欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

h5(vue)迁移小程序(wepy)的问题/方法/技巧记录

程序员文章站 2022-03-15 10:25:28
(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.autoRemovePre...

(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

使用:
h5(vue)迁移小程序(wepy)的问题/方法/技巧记录

(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插件
    h5(vue)迁移小程序(wepy)的问题/方法/技巧记录

  • 在项目根目录下新建工作区级别的配置文件(这里配置的文件仅会对这个项目有效)
    h5(vue)迁移小程序(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组件会被小程序原生组件穿透。
h5(vue)迁移小程序(wepy)的问题/方法/技巧记录

(13) vant-button组件,禁用状态能可以被点击。(不管设置click或者tap)。
(14)有时打包缺少文件,删除记录重新导入一下(15)在组件里调用路由 this.$navigate 会报错说 navigate 不是一个函数,可以用原生的
h5(vue)迁移小程序(wepy)的问题/方法/技巧记录

(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

相关标签: 小程序