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）

1. p 改为 view
2. span、i 改为 label
3. @click 改为 @tap
4. img 改为 image
5. a href 改
6. :style="" 改为 style="{{}}"
7. 路由

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