- [已解决]编译时报错: Error: Cannot find module '@dcloudio/webpack-uni-mp-loader/lib/style.js
- [已解决]编译时报错: Error: EBUSY: resource busy or locked, unlink 'E:\h5\zmn-mp\dist\build\mp-alipay\debug.log'
- [已解决]h5项目页面白屏,提示网络连接超时
- 平台差异代码,持续更新
- 集成
友盟+统计支付宝小程序找不到@alipay/af-appx包的错误 - [已解决]小程序里面开通js的sourcemap源代码调试功能(191024)
1. [已解决]编译时报错: Error: Cannot find module '@dcloudio/webpack-uni-mp-loader/lib/style.js
业务背景
一个开发好的项目,换一台电脑,从git上拉下来,install之后运行,经常会报各种各样的错误
问题解决
- 删除掉
package.json.lock文件 - 然后重新安装
原因分析
- 因为
uni-app版本号是用的*号,每次安装时都会下载最新的 - 如果之前下载安装过,其他插件都会生成一个固定版本
- 当
uni-app更新后,其他插件没有更新,就会导致各种错误 - 所以删除掉
lock文件,全部重新下载.都会是最新的
2. [已解决]编译时报错: Error: EBUSY: resource busy or locked, unlink 'E:\h5\zmn-mp\dist\build\mp-alipay\debug.log'
业务背景
- 使用
uni-app开发支付宝小程序 - 在支付宝小程序开发者工具中进行调试
报错内容
E:\h5\zmn-mp>npm run build:mp-alipay
> c@0.1.0 build:mp-alipay E:\h5\zmn-mp
> cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build
当前项目编译模式：非自定义组件模式。编译模式差异见：https://ask.dcloud.net.cn/article/35843
ERROR Error: EBUSY: resource busy or locked, unlink 'E:\h5\zmn-mp\dist\build\mp-alipay\debug.log'
Error: EBUSY: resource busy or locked, unlink 'E:\h5\zmn-mp\dist\build\mp-alipay\debug.log'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! c@0.1.0 build:mp-alipay: `cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the c@0.1.0 build:mp-alipay script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\LJ\AppData\Roaming\npm-cache\_logs\2019-07-03T06_48_35_867Z-debug.log
复现步骤
- build:mp-alipay打包小程序文件
- 支付宝小程序开发者工具打开编译目录
- 会自动在根目录下生成一个debug.log
- 再次build:mp-alipay就会报错
问题分析
- 小程序开发者工具正在使用
debug.log文件 - 而
build:mp-alipay的时候会清空整个dist目录 - 删除一个正在使用的文件肯定会报错
临时解决
- 重新
build之前 - 先退出支付宝小程序开发者工具
- 等
build完之后,再打开开发者工具 - 2019-08-25更新,关闭模拟器面板,然后再编译,编译完之后再打开调试面板也可以
问题解决
- 之前不知道是什么原因
- 自己在
webpack里面添加了webpackclean插件(而uni-app本身没本配置这个插件) - 所以每次构建时都会自动清空目录
- 删除这个插件就好了
3. [已解决]h5项目页面白屏,提示网络连接超时
业务背景
- 用
uni-app开发微信公众号 - 偶尔会在线上正式环境遇到这种情况
- 点击刷新之后就好了
复现步骤
- 目前还没找到百分百复现的方法
- 以后有空了再专门来测试一下
问题分析
- 官网介绍要在
manifest.json设置h5.async.timeout超时时间 - 设置后问题依旧
- 并且不可能是手机网络问题,因为其他网页才能打开
问题解决
- 最后发现是因为链接请求出错导致的
- 页面请求的某个Js文件在服务器上已经不存在了
- 只是这提示有点...
- 为什么刷新之后又会好呢?这就和公众号的浏览器缓存有关了,在公众号开发中详细记录
4. 平台差异代码,持续更新
业务背景
在h5,小程序中,同样的代码,可能效果不一样,所以在开发的时候要避免使用这种兼容性差的语法.只能边踩坑边记录
- 组件
props不要传递Function方法,因为在小程序里面不支持- 使用
$emit事件机制替代
- 使用
<view @click="click"> // => bad
<view @click="$emit('click')"> // => good
props: {
click: {
type: Function,
default: () => (() => {}},
}
}
vuex不能通过new Vue({ store })挂载,小程序不支持这种方式- 通过
Vue.prototype.$store = store;挂载vuex
- 通过
import store from './store/index';
new Vue({
store, // => bad
})
Vue.prototype.$store = store; // => good
- 引用的组件上不要使用类名,小程序不支持类穿透到组件根节点
- 如果要修改组件样式,换成/deep/写法
<uni-list class="custom"> // => bad
<uni-list>
/deep/ .uni-list // => good
5. 集成友盟+统计支付宝小程序找不到@alipay/af-appx包的错误
业务背景
- 公司要求,使用
友盟+统计支付宝小程序流量 - 友盟提供了一个sdk叫
umtrack-alipay - 这个sdk依赖于
@alipay/af-appx这个包,但是这个包没有随umtrack-alipay一起安装,并且在网络上也找不到@alipay/af-appx这个包 - 经测试发现,
@alipay/af-appx是内置在支付宝开发者工具里面的
存在的问题
- 在APP.vue里面引用
umtrack-alipay就会报错@alipay/af-appx找不到 - 但是同样的代码,在原生支付宝开发者工具里面引用是不会报这个错的
问题解决
- 要在打包后的main.js里面引入
umtrack-alipay - 但是不知道怎么配置webpack自动生成,现在是人工粘贴,编译一次粘贴一次.......
6. [已解决]小程序里面开通js的sourcemap源代码调试功能(191024)
业务背景
开发多端应用,在H5下面,js报错点击堆栈行号信息,可以跳转到报错的源代码.但是在小程序里面,代码是压缩后的,根本看不懂.所以想在小程序里面也开启sourcemap功能
问题解决
vue.config
configureWebpack: {
devtool: 'inline-source-map',
},
原理
- 之前是sourcemap,在公众号可以.但是为什么在小程序里面不行呢
- 这两个值有啥区别呢.以后研究webpack的时候再来搞吧
