mpvue開發小程序總結
發布時間：2018-12-11 08:40 所屬欄目：小程序開發教程
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)
}
}
復制代碼
|
二、mpvue小程序采坑
2.1 vue的created鉤子
所有頁面的created鉤子在onLaunch后就執行了,所以頁面里使用created鉤子函數是拿不到實時數據的，故created一般情況下不使用。可用小程序的onReady或onLoad代替
2.2 vue的mounted鉤子
退出再進來頁面后mounted里的數據并沒有重置（頁面跳轉后并沒有銷毀頁面實例，而是將其推入頁面棧中，所以會保存之前的舊的數據），將會導致一系列數據錯誤，可用小程序的onShow代替（在onShow里初始化數據 或者在onUnLoad里銷毀數據）
2.3 用戶拒絕授權后 重新授權
小程序官方已經禁止 主動跳轉設置頁了，必須在button上觸發（類似獲取用戶信息wx.getUserInfo()首次也是無法主動喚起授權操作，必須在button上綁定@getuserinfo函數）
- 預授權
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不能操作不在同一域名下的圖片，故由服務端去合成
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"
]
}
]
}
復制代碼
|
