小程序模板網(wǎng)

mpvue開發(fā)小程序總結(jié)

發(fā)布時(shí)間：2018-12-11 08:40 所屬欄目：小程序開發(fā)教程 
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 || '服務(wù)異常，請稍后再試')     // 錯誤統(tǒng)一以toast形式彈出
                    reject(res.data)              // 并將錯誤拋出以便在catch中處理一些特殊業(yè)務(wù)邏輯
                    
                }
            },
            fail(res) {
                reject(res)
                wxToast(res.errorMessage || '服務(wù)異常，請稍后再試')
                console.log(res)
            }
          })
    })
}

//調(diào)用：
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')
})
復(fù)制代碼

1.2 toast的封裝

export const wxToast = (title='',icon='none',duration=2000) => {
    wx.showToast({
        title,
        icon,
        duration
    })
}
復(fù)制代碼

1.3 storage的封裝

export const wxStorage = (key, data) => {
    if(data) {             // data存在，則是設(shè)置
        wx.setStorage({
            key,
            data
        })
    } else {
        wx.getStorageSync(key)
    }
}
復(fù)制代碼

二、mpvue小程序采坑

2.1 vue的created鉤子

所有頁面的created鉤子在onLaunch后就執(zhí)行了,所以頁面里使用created鉤子函數(shù)是拿不到實(shí)時(shí)數(shù)據(jù)的，故created一般情況下不使用?？捎眯〕绦虻膐nReady或onLoad代替

2.2 vue的mounted鉤子

退出再進(jìn)來頁面后mounted里的數(shù)據(jù)并沒有重置（頁面跳轉(zhuǎn)后并沒有銷毀頁面實(shí)例，而是將其推入頁面棧中，所以會保存之前的舊的數(shù)據(jù)），將會導(dǎo)致一系列數(shù)據(jù)錯誤，可用小程序的onShow代替（在onShow里初始化數(shù)據(jù) 或者在onUnLoad里銷毀數(shù)據(jù)）

2.3 用戶拒絕授權(quán)后 重新授權(quán)

小程序官方已經(jīng)禁止 主動跳轉(zhuǎn)設(shè)置頁了，必須在button上觸發(fā)（類似獲取用戶信息wx.getUserInfo()首次也是無法主動喚起授權(quán)操作，必須在button上綁定@getuserinfo函數(shù)）

  1. 預(yù)授權(quán)
const that = this
   wx.getSetting({
     success (res) {
       console.log('點(diǎn)擊查詢用戶錄音權(quán)限', res.authSetting['scope.record'])
       if (!res.authSetting['scope.record']) {
         // 如果用戶之前已經(jīng)同意授權(quán)，則不會出現(xiàn)彈窗，直接返回成功
         wx.authorize({
           scope: 'scope.record',
           success () {
             that.isAuth = true
           },
           fail () {    // 主動授權(quán)失敗后引導(dǎo)用戶打開權(quán)限設(shè)置頁
             that.isAuth = false
           }
         })
       } else {
         that.isAuth = true
       }
     }
   })
復(fù)制代碼
  1. 用戶點(diǎn)擊 需要授權(quán)的操作時(shí)(點(diǎn)擊的必須是button,否則wx.openSetting()無法喚起權(quán)限設(shè)置頁)
if (!this.isAuth) {
   wx.openSetting()
   return
 }
復(fù)制代碼

2.4 不支持template中使用復(fù)雜渲染函數(shù)，可用computed計(jì)算屬性替代

<template>
   <div> {{format(a)}} </div>   // 不支持使用渲染函數(shù)format
   <div>{}</div>             // 使用計(jì)算屬性(若是一個(gè)數(shù)組列表，只能先轉(zhuǎn)譯數(shù)組)
</template>

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

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'}"
復(fù)制代碼

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

2.7 用canvas繪圖，生成帶參數(shù)的小程序碼的海報(bào)用于分享朋友圈

由于 海報(bào)圖是放在cdn中，canvas不能操作不在同一域名下的圖片，故由服務(wù)端去合成

2.8 跳轉(zhuǎn)tabBar頁面必須用switchTab

2.9 強(qiáng)制更新

const updateManager = wx.getUpdateManager()

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

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()
            }
        }
    })
    
})
復(fù)制代碼

2.10 單獨(dú)為每個(gè)頁面的設(shè)置頁面頭部信息(main.js中設(shè)置)

// main.js
const app = new Vue(App)
app.$mount()
export default {
  config: {
    navigationBarTitleText: '登錄'
  }
}
復(fù)制代碼

2.11 獲取掃 帶參數(shù)二維碼用戶進(jìn)來的參數(shù)

onLoad(options) {
    console.log(decodeURIComponent(options.scene))
}
復(fù)制代碼

2.12 小程序checkbox 點(diǎn)擊選中顯示錯亂

<checkbox :value="index" :checked="checkItem.checked" />
// 加上checked屬性，點(diǎn)擊修改其boolean值
復(fù)制代碼

2.13 帶參數(shù)的自定義分享

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

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
}
// 點(diǎn)擊一次獲取多個(gè)formId:
//https://www.jianshu.com/p/84dd9cd6eaed?_blank
復(fù)制代碼

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"
      ]
    }
  ]
}

復(fù)制代碼


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/25003.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢