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

复制代码