mpvue開發小程序總結

時間 2019-11-24

標籤 mpvue 開發程序總結简体版

原文原文鏈接

1、對小程序自身的封裝

1.1.wx.request()的promise封裝（併發請求不能超過五個）

export const request = (url, data, method) => {
    return new Promise((resolve, reject) => {
        const accessToken = wx.getStorageSync('accessToken')
          const header  = {
            'Content-Type': 'application/json',
            'token': accessToken             // 全部請求將token放在header裏傳輸
          }
          wx.request({
            url,
            data,
            method,
            success(res) {
                if (res.data.success) {
                    resolve(resp)
                } else {
                    if(res.data.errorCode === 401) {        // token錯誤特殊邏輯（code碼跟後端約定）
                         const url = "../login/main"
                         wx.redirectTo({ url })
                         wxToast('登陸失效,請從新登陸')
                         return
                    }
                    wxToast(res.errorMessage || '服務異常，請稍後再試')     // 錯誤統一以toast形式彈出
                    reject(res.data)              // 並將錯誤拋出以便在catch中處理一些特殊業務邏輯
                    
                }
            },
            fail(res) {
                reject(res)
                wxToast(res.errorMessage || '服務異常，請稍後再試')
                console.log(res)
            }
          })
    })
}

//調用：
const url = 'https://xxx'
export const login = params => request(`${url}/xxx`, params, 'POST'); // 登陸

login(params).then(data => {
    console.log('success')
}).catch(e => {
    console.log('failed')
})
複製代碼

1.2 toast的封裝

export const wxToast = (title='',icon='none',duration=2000) => {
    wx.showToast({
        title,
        icon,
        duration
    })
}
複製代碼

1.3 storage的封裝

export const wxStorage = (key, data) => {
    if(data) {             // data存在，則是設置
        wx.setStorage({
            key,
            data
        })
    } else {
        wx.getStorageSync(key)
    }
}
複製代碼

2、mpvue小程序採坑

2.1 vue的created鉤子

全部頁面的created鉤子在onLaunch後就執行了,因此頁面裏使用created鉤子函數是拿不到實時數據的，故created通常狀況下不使用。可用小程序的onReady或onLoad代替css

2.2 vue的mounted鉤子

退出再進來頁面後mounted裏的數據並無重置（頁面跳轉後並無銷燬頁面實例，而是將其推入頁面棧中，因此會保存以前的舊的數據），將會致使一系列數據錯誤，可用小程序的onShow代替（在onShow裏初始化數據或者在onUnLoad裏銷燬數據）vue

2.3 用戶拒絕受權後從新受權

小程序官方已經禁止主動跳轉設置頁了，必須在button上觸發（相似獲取用戶信息wx.getUserInfo()首次也是沒法主動喚起受權操做，必須在button上綁定@getuserinfo函數）json

預受權

const that = this
   wx.getSetting({
     success (res) {
       console.log('點擊查詢用戶錄音權限', res.authSetting['scope.record'])
       if (!res.authSetting['scope.record']) {
         // 若是用戶以前已經贊成受權，則不會出現彈窗，直接返回成功
         wx.authorize({
           scope: 'scope.record',
           success () {
             that.isAuth = true
           },
           fail () {    // 主動受權失敗後引導用戶打開權限設置頁
             that.isAuth = false
           }
         })
       } else {
         that.isAuth = true
       }
     }
   })
複製代碼

用戶點擊須要受權的操做時(點擊的必須是button,不然wx.openSetting()沒法喚起權限設置頁)

if (!this.isAuth) {
   wx.openSetting()
   return
 }
複製代碼

2.4 不支持template中使用複雜渲染函數，可用computed計算屬性替代

<template>
   <div> {{format(a)}} </div>   // 不支持使用渲染函數format
   <div>{{b}}</div>             // 使用計算屬性(如果一個數組列表，只能先轉譯數組)
</template>

<script>
   export default {
       data() {
           return {
               a:1
           }
       }
       methods: {
           format(e) {
               return `${e}bbb`
           }
       },
       computed: {
           b() {
               return `${this.a}bbb`
           }
       }
   }
</script>
複製代碼

2.5 class/style 不支持 vue 的 classObject/styleObject，但支持以下形式：

<p class="static" :class="{ active: isActive, 'text-danger': hasError }">222</p>
<p class="static" :class="[isActive ? activeClass : '', errorClass]">444</p>
:style="{transform: 'translate('+ (item.ansId==currentTouchId ? xAxis : 0) + 'px,'+ ((item.ansId==currentTouchId ? yAxis : 0)) +'px)',width: width + 'px', height: height + 'px'}"
複製代碼

2.6 css background-image 不支持本地圖片，必須是遠程cdn資源

2.7 用canvas繪圖，生成帶參數的小程序碼的海報用於分享朋友圈

因爲海報圖是放在cdn中，canvas不能操做不在同一域名下的圖片，故由服務端去合成canvas

2.8 跳轉tabBar頁面必須用switchTab

2.9 強制更新

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
    // 請求完新版本信息的回調
    console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
    wx.showModal({
        title: '更新提示',
        content: '新版本已經準備好，是否重啓應用？',
        success: function (res) {
            if (res.confirm) {
                // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啓
                updateManager.applyUpdate()
            }
        }
    })
    
})
複製代碼

2.10 單獨爲每一個頁面的設置頁面頭部信息(main.js中設置)

// main.js
const app = new Vue(App)
app.$mount()
export default {
  config: {
    navigationBarTitleText: '登陸'
  }
}
複製代碼

2.11 獲取掃帶參數二維碼用戶進來的參數

onLoad(options) {
    console.log(decodeURIComponent(options.scene))
}
複製代碼

2.12 小程序checkbox 點擊選中顯示錯亂

<checkbox :value="index" :checked="checkItem.checked" />
// 加上checked屬性，點擊修改其boolean值
複製代碼

2.13 帶參數的自定義分享

<template>
    //經過button觸發
    <button open-type="share" ></button>
</template>
<script>
onShareAppMessage(res) {
    let id = wx.getStorageSync("id");
    let title = `${this.name}哈哈哈！`              // 能夠取到data中的數據
    let path = "/pages/xxx/main?sourceId=" + id   // 必須是以 / 開頭的完整路徑
    let imageUrl = "https:xxx.jpg"                  // 默認是截屏
    
    return {
        title: title,
        path: path,
        imageUrl: imageUrl
    };
}
</script>
複製代碼

2.14 獲取模板消息id

<form :report-submit="true"	 @submit="onClick">
  <button @click="onShare('students')" class="applyStu" formType="submit">獲取form_id</button>
</form>

onClick(e){
    this.formId = e.mp.detail.formId
}
// 點擊一次獲取多個formId:
//https://www.jianshu.com/p/84dd9cd6eaed?_blank
複製代碼

2.15 分包與主包的配置

{
  "pages": [
    "pages/index/main",
    "pages/logs/main"  
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "subPackages": [
    {
      "root": "pages/subPackages",              // 分包根路徑
      "pages": [
        "index/main"
      ]
    }
  ]
}

複製代碼