h5（vue）遷移小程序（wepy）的問題/方法/技巧記錄
發表時間：2020-9-29
發布人：葵宇科技
瀏覽次數：26
（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__)
}
}
