手把手教你写一个生成yapi接口代码Chrome 扩展插件

前言

公司想开发个公众号，想在公众号里做业务，也不是做小程序，但是以后也可能做小程序。emm，就是这么随意。所以就找个到了uniapp，说是可以开发一套代码，多平台运行。开发语法还是vue，感觉也没啥难度，就写呗。网上也刚好搜到一个uview的ui框架，也就直接用了。直到图片上传的时候，发现框架写的是不错，可是后台给的接口逻辑和ui画的图跟这套框架差的还是有点的。所以特意来记录下

需求

身份证上传，有正反面，还有营业执照。

这些功能大体上，框架是都符合的，主要就是样式问题。

样式

基本思路，还是用列表做，list里放item。提示图案设置成item的背景

<view class="list"><view class="item itme1"><u-upload :form-data="formData" @on-success="onSuccess" :header="headerData" max-count="1":before-upload="beforeUpload" ref="sfzz" custom-btn class="myUpload" :show-progress="false":action="action"><view slot="addBtn" class="slot-btn"></view></u-upload></view>
</view>

因为item样式很多都是相同的，就背景图片有区别，所以用群组选择器来写

.list {margin: 0 140rpx;.item {width: 467rpx;height: 242rpx;margin-top: 46rpx;display: flex;justify-content: flex-end;align-items: center;}}

因为我们的图片是还不是直接的url路径，也不是放本地，所以还要拼接

.itme1 {background: url('#{$path}images/form/sfzz.png') center/100%;}.itme2 {background: url('#{$path}images/form/sfzf.png') center/100%;}.itme3 {background: url('#{$path}images/form/yyzz.png') center/100%;}

$path

path是scss定义的变量。定义方法就是path 是scss定义的变量。定义方法就是path是scss定义的变量。定义方法就是变量名:‘值’，使用的时候，要是不用跟其他字符串拼接就直接写 $ 变量名就行。要是有其他字符串拼接就写’#{$变量名}其他内容’

修改组件样式

毕竟组件我们要调整到项目要求的那种样式，所以还需要修改组件样式，一般的选择器是不行的。这里框架里好像是写了的还是我从哪里搜来的，反正是要用深度选择器，样式才有用。就是两个冒号加v-deep放在组件的选择器前，用空格隔开，有些我还特意加了!important;才管用。这样的话就好看多了。样式也算搞定

.myUpload {
::v-deep .u-preview-wrap {width: 467rpx !important;height: 242rpx !important;border: none;margin: 0;
}

总结

做开发最正常的一点就是不确定性，今天可能这样，明天又可能那样。所以做好心理准备。就比如人家是要用小程序还是公众号还是h5呢，所以才有了uniapp吧。还有ui框架的问题，是好看，但是跟公司ui设计的又不完全一样。有的地方还真不好弄。所以大体用框架，小地方实在搞不定就自己写。我觉得uview这个上传还行，所以就硬头皮来搞了

好啦，本节内容就总结到这里。我的文章都是学习过程中的总结，希望能够和小伙伴们共同进步共同学习，如果发现错误，也欢迎留言指出，我及时更正。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取