uniapp项目发布成微信小程序的一些坑
相信每个开发都遇到过:本地调试好好的没毛病,为啥一上 测试/正式 就出毛病了呢?今天我想记录的问题与此类似,是我在使用 uniapp 框架进行开发时,本地调试一切正常,但是打了微信小程序包,在微信开发者工具中调试时,遇到了许多奇奇怪怪的错误,在此记录下来,以便以后再次踩坑。1、微信小程序不支持本地引入 background-image本地调试正常的背景图,在微信中一打开就会报如下错误:[渲染层网络
相信每个开发都遇到过:本地调试好好的没毛病,为啥一上 测试/正式 就出毛病了呢?
今天我想记录的问题与此类似,是我在使用 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、具体依赖模块具体分析
可以点击这里查看代码依赖模块,做出适当调整。
更多推荐
所有评论(0)