（1） 圖片盡量都放在cdn上, 避免小程序打包體積過大
（2）wepy目前不支持自動把px轉(zhuǎn)為rpx, 所以復(fù)制css時(shí)，需要先手動粘貼到這個網(wǎng)站做一次轉(zhuǎn)化。
方法一：http://allan5.com/px2rpx/
方法二：下載 vscode 插件 px to rpx，并在你項(xiàng)目中的 .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） 頁面路由跳轉(zhuǎn)，要用小程序的寫法

（5） wepy和vant結(jié)合的時(shí)候，picker組件toolbar.wxml打包時(shí)丟失，需要在源碼里copy toolbar.wxml的代碼到picker的index.wxml中。
（6）Tab點(diǎn)擊不觸發(fā) tabs中this.trigger(‘click’)=>‘tap’
（7）vant dialog 遮罩層無法遮住小程序tabber，可以使用小程序原生的wx.showModal()解決這個問題
（8）小程序更新版本到線上時(shí)，可能會出現(xiàn)用戶手機(jī)還是上一個版本的情況，這時(shí)就要強(qiáng)制更新：

// 根目錄下的app.js
App({
  getNewVersion () {
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function (res) {
        console.log('res是啥', res)
        if (res.hasUpdate) { // 請求完新版本信息的回調(diào)
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: '更新提示',
              content: '新版本已經(jīng)準(zhǔn)備好，是否重啟應(yīng)用？',
              success: function (res) {
                if (res.confirm) { // 新的版本已經(jīng)下載好，調(diào)用 applyUpdate 應(yīng)用新版本并重啟
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function () {
            wx.showModal({ // 新的版本下載失敗
              title: '已經(jīng)有新版本了喲~',
              content: '新版本已經(jīng)上線啦~，請您刪除當(dāng)前小程序，重新搜索進(jìn)入喲~'
            })
          })
        }
      })
    } else {
      wx.showModal({ // 如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦?#xff0c;可以這樣子提示
        title: '提示',
        content: '當(dāng)前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
      })
    }
  },
  onShow(res) {
    this.getNewVersion()
  }
})

(9) vscode自動格式化wepy設(shè)置

• vscode中下載vetur-wepy插件
  

• 在項(xiàng)目根目錄下新建工作區(qū)級別的配置文件（這里配置的文件僅會對這個項(xiàng)目有效）
  

• 把下列配置拷貝進(jìn)去

{
  "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上不生效
需改成作用在其他標(biāo)簽上如div、block
（11）使用 vant 的 radio 的時(shí)候，onChange 事件應(yīng)該這么寫

onChange(event) {
  // 正確的寫法
  this.radio = event.$wx.detail
  // 官方文檔的寫法
  this.radio = event.detail
}

(12) vant的popup組件會被小程序原生組件穿透。

（13） vant-button組件，禁用狀態(tài)能可以被點(diǎn)擊。(不管設(shè)置click或者tap)。
（14）有時(shí)打包缺少文件，刪除記錄重新導(dǎo)入一下（15）在組件里調(diào)用路由 this.$navigate 會報(bào)錯說 navigate 不是一個函數(shù)，可以用原生的

（15）在組件里調(diào)用路由 this.$navigate 會報(bào)錯說 navigate 不是一個函數(shù)，可以用原生的

wx.navigateTo({
  url: `/pages/skin/upload-img?caseCode=${caseCode}&revisitCode=${revisitCode}`
})

（16）用JWT登錄的小程序，需要加上這段代碼，防止切換到正式環(huán)境的時(shí)候，用戶還是用的測試環(huán)境的token

// app.wpy
onLaunch() {
  console.log('這是目前的環(huán)境（mcp/mcptest）', __BASE_URL__)
  // 獲取本地存儲的baseUrl
  const baseUrl = wx.getStorageSync('baseUrl')
  // 如果沒有的話，把目前設(shè)置的__BASE_URL__存到本地
  if (!baseUrl) {
    wx.removeStorageSync('x-u-token')
    wx.setStorageSync('baseUrl', __BASE_URL__)
    return false
  }
  // 如果有，但是和目前設(shè)置的__BASE_URL__不一致，那就說明切環(huán)境了，則清除token和userId，并把新的環(huán)境存到本地
  if (baseUrl !== __BASE_URL__) {
    wx.removeStorageSync('x-u-token')
    wx.setStorageSync('baseUrl', __BASE_URL__)
  }
}