uniapp项目发布成微信小程序的一些坑

相信每个开发都遇到过：本地调试好好的没毛病，为啥一上 测试/正式 就出毛病了呢？

今天我想记录的问题与此类似，是我在使用 uniapp 框架进行开发时，本地调试一切正常，但是打了微信小程序包，在微信开发者工具中调试时，遇到了许多奇奇怪怪的错误，在此记录下来，以防再次踩坑。

1、微信小程序不支持本地引入 background-image

本地调试正常的背景图，在微信中一打开就会报如下错误：

[渲染层网络层错误] pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取.......

但是错误提示也描述的比较清楚，有三种解决方案：

1> 使用在线图片。

2> 将本地图片资源转化为 base64 格式，再使用 background-image 引入。

3> 使用 <image> 标签 ，然后将图片定位到你想展示的位置。

2、微信小程序调试中样式错乱的问题

如图，我开发时使用的 uview Ui 库，本地样式都是调好的，但是打包后，伪元素的icon消失了(是由于上述背景图的问题)，并且每一个 form-item 的间距都很宽，在观察试错后得出结论，要修改第三方样式库需要使用深度选择器。 less语言是 /deep/ , scss语言是 ::v-deep (但在HbuilderX中不使用也可以生效，打包后就无法生效了，不知道是什么原因)，具体写法改成：

3、微信小程序上传版本体积问题

  

如图所示，当你的小程序主包大于 2M 时，发版会出现这样一个报错信息提示，这时有几种解决方案：

1、分包，如图，在 subPackages 中设置分包的路径和根节点，将内容从 pages 文件夹中提取出来，这样会减少主包的体积(注意，如果写了分包但是没有分配路径，其大小依然会计算在主包中)

2、将本地资源改为引入在线资源，如图片等，也能减少本地资源包体积。

3、具体依赖模块具体分析

可以点击这里查看代码依赖模块，做出适当调整。