h5(vue)迁移小程序(wepy)的问题/方法/技巧记录
(1) 图片尽量都放在cdn上, 避免小程序打包体积过大
(2)wepy目前不支持自动把px转为rpx, 所以复制css时,需要先手动粘贴到这个网站做一次转化。
方法一:http://allan5.com/px2rpx/
方法二:下载 vscode 插件 px to rpx,并在你项目中的 .vscode/settings.json 中配置以下代码
"px-to-rpx.baseWidth": 375,
"px-to-rpx.fixedDigits": 1,
"px-to-rpx.autoRemovePrefixZero": false
使用:
(3)
- p 改为 view
- span、i 改为 label
- @click 改为 @tap
- img 改为 image
- a href 改
- :style="" 改为 style="{{}}"
- 路由
this.$router.push({
path: '/course-detail',
query: {
caseCode: '123'
}
})
改为
this.$navigate('/course-detail', {
caseCode: '123'
})
(4) 页面路由跳转,要用小程序的写法
(5) wepy和vant结合的时候,picker组件toolbar.wxml打包时丢失,需要在源码里copy toolbar.wxml的代码到picker的index.wxml中。
(6)Tab点击不触发 tabs中this.trigger(‘click’)=>‘tap’
(7)vant dialog 遮罩层无法遮住小程序tabber,可以使用小程序原生的wx.showModal()解决这个问题
(8)小程序更新版本到线上时,可能会出现用户手机还是上一个版本的情况,这时就要强制更新:
// 根目录下的app.js
App({
getNewVersion () {
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
console.log('res是啥', res)
if (res.hasUpdate) { // 请求完新版本信息的回调
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: function (res) {
if (res.confirm) { // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
wx.showModal({ // 新的版本下载失败
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您删除当前小程序,重新搜索进入哟~'
})
})
}
})
} else {
wx.showModal({ // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
},
onShow(res) {
this.getNewVersion()
}
})
(9) vscode自动格式化wepy设置
-
vscode中下载vetur-wepy插件
-
在项目根目录下新建工作区级别的配置文件(这里配置的文件仅会对这个项目有效)
-
把下列配置拷贝进去
{
"editor.defaultFormatter": "hu2ren.vetur-wepy",
"vetur.validation.script": false,
"vetur.validation.interpolation": false,
"vetur.validation.template": false,
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"editor.formatOnSave": true,
"eslint.run": "onSave",
"eslint.validate": [
"vue"
],
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.stylelint": true
}
}
- 重启vscode,即可完成自动格式化
(10) v-if v-else作用在template上不生效
需改成作用在其他标签上如div、block
(11)使用 vant 的 radio 的时候,onChange 事件应该这么写
onChange(event) {
// 正确的写法
this.radio = event.$wx.detail
// 官方文档的写法
this.radio = event.detail
}
(12) vant的popup组件会被小程序原生组件穿透。
(13) vant-button组件,禁用状态能可以被点击。(不管设置click或者tap)。
(14)有时打包缺少文件,删除记录重新导入一下(15)在组件里调用路由 this.$navigate 会报错说 navigate 不是一个函数,可以用原生的
(15)在组件里调用路由 this.$navigate 会报错说 navigate 不是一个函数,可以用原生的
wx.navigateTo({
url: `/pages/skin/upload-img?caseCode=${caseCode}&revisitCode=${revisitCode}`
})
(16)用JWT登录的小程序,需要加上这段代码,防止切换到正式环境的时候,用户还是用的测试环境的token
// app.wpy
onLaunch() {
console.log('这是目前的环境(mcp/mcptest)', __BASE_URL__)
// 获取本地存储的baseUrl
const baseUrl = wx.getStorageSync('baseUrl')
// 如果没有的话,把目前设置的__BASE_URL__存到本地
if (!baseUrl) {
wx.removeStorageSync('x-u-token')
wx.setStorageSync('baseUrl', __BASE_URL__)
return false
}
// 如果有,但是和目前设置的__BASE_URL__不一致,那就说明切环境了,则清除token和userId,并把新的环境存到本地
if (baseUrl !== __BASE_URL__) {
wx.removeStorageSync('x-u-token')
wx.setStorageSync('baseUrl', __BASE_URL__)
}
}
本文地址:https://blog.csdn.net/weixin_43972437/article/details/108865649