微信小程序開發總結

微信小程序開發總結

1. 微信公衆號的帳戶和微信小程序的帳戶是分離的，並非同一個，須要使用一個新的郵箱來註冊小程序。

2. 正式環境必須使用https協議，測試環境配置工具中能夠設置爲不校驗http協議。

1. 第三方框架 wepy 與 mpvue 的區別：

wepy

騰訊官方開發的類vue框架，可是實際使用和vue仍是有不小的區別的，總的來講比直接用原生開發體驗上要好不少，若是是新項目建議用wepy開發，不能使用div、ul等html標籤，而必須使用小程序的view、text等基礎組件。

mpvue

美團基於vue開發的框架，最大的優勢就是符合vue的使用習慣，熟悉vue開發的同窗，能夠很快適應，比較適用於從原有vue項目遷移過來。

1. wepy 與 vue 的異同

#### 相同點：

Props、 Mixin、 computed、 slot、組件化開發

#### 不一樣點：

methods裏只能寫template裏綁定的事件、髒數據檢查須要手動調用方法觸發

1. 微信小程序的第三方UI框架，目前各方面相對比較好用的是 iview weapp，不過仍是存在比較多的坑，建議iview只是做爲參考，另外本身實現組件體驗和穩定性上來講會更好。

2. 微信小程序的http封裝

默認是get方法，post方法只接受表單傳值。

// http.js
  export const API_URI = 'https://test.faceke.com/api/v2'
  import util from "./util"
  let token = ""
  function fetch(url, params, method, header, resolve, reject) {
     let _header = {
      ...header,
      'client': 'miniapp',
      'Authorization': "Bearer " + token
   }
   wx.request({
      url: `${API_URI}/${url}`,
      data: params,
      method: method,
      header: _header,
      success: res => {
      if (res.statusCode === 200 || res.statusCode === 201 || res.statusCode === 202 || res.statusCode 
      === 204) {
       resolve(res)
     } else if (res.statusCode === 401) {
       console.log("token過時從新登陸")
       wx.removeStorage({
         key: 'token',
         success(res) {
           console.log(res.data)
         }
       })
       setTimeout(() => {
         wx.reLaunch({
           url: 'index'
         })
       }, 600);
     } else {
       reject(res)
     }
   },
   fail: err => {
     console.log(err)
   }
 })
 }

  const http = function (url, params, method, header) {
 if (!token) {
   wx.getStorage({
     key: 'token',
     success(res) {
       token = res.data
       console.log(res.data)
     }
   })
 }
 return new Promise((resolve, reject) => {
   if (!token) {
     setTimeout(() => {
       fetch(url, params, method, header, resolve, reject)
     }, 300);
   } else {
     fetch(url, params, method, header, resolve, reject)
   }
 })
 }

 module.exports = {
 baseUrl: function () {
   return API_URI
 },
 get: function (url, params) {
   return http(url, params, "GET", {
     'content-type': 'application/json'
   })
 },
 delete: function (url, params) {
   return http(url, params, "DELETE", {
     'content-type': 'application/json'
   })
 },
 post: function (url, params) {
   let formData = util.json2Form(params)
   return http(url, formData, "POST", {
     'content-type': 'application/x-www-form-urlencoded'
   })
 }
 }

封裝一個json格式數據轉form格式數據的方法

function json2Form(json) {
 let str = [];
 for (let p in json) {
   str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
 }
 return str.join("&");
}

module.exports = {
 json2Form,
}

1. 小程序/公衆號登陸涉及到兩個最關鍵的用戶標識：

OpenId 是一個用戶對於一個小程序／公衆號的標識，開發者能夠經過這個標識識別出用戶。

UnionId 是一個用戶對於同主體微信小程序／公衆號／APP的標識，開發者須要在微信開放平臺下綁定相同帳號的主體。開發者可經過UnionId，實現多個小程序、公衆號、甚至APP 之間的數據互通了。

1. wx.getUserInfo用戶信息在wx.login以後再獲取

wx.login({
   success(res) {
     if (res.code) {
       that.code = res.code
       wx.getUserInfo({
         success: function (res) {
           console.log("獲取微信用戶信息", res)
           let data = res
           http.post("miniLogin", {
             code: that.code,
             encryptedData: data.encryptedData,
             iv: data.iv
           }).then(({
             data
           }) => {
             console.log("登陸", data)
           })
         }
       })
     }
   }
 })

1. 小程序模板消息推送獲取formId

突破微信小程序模板消息限制，實現無限制主動推送

模板消息

這裏的button必須用原生的button, 若是用iview的i-buttton會獲取不到formId。

<template>
    <form @submit="getFormId" report-submit="true">
      <button form-type="submit" @submit="getFormId">開關</button>
    </from>
  </template>
  <script>
   import wepy from 'wepy'
   export default class XXX extends wepy.component {
      methods = {
        getFormId(e) {
           let formId = e.detail.formId
           // to do sth
        }
      }
   }
  </script>

1. template中{{}}直接寫js不起效

有時候咱們在vue中習慣寫{{ item.label.substr(0,2) }}來處理字符串，可是在wepy中這種寫法有時候會不起效，爲了使程序更穩定，咱們能夠在onLoad中直接處理好。

1. wx.navigateTo 和 wx.reLaunch

wx.navigateTo 會保留當前頁面而後跳轉，當用戶按返回按鈕後不會觸發onLoad等事件，致使沒法更數據。

wx.reLaunch 會關閉全部頁面再跳轉。

使用時須要根據實際業務選擇合適的api。

1. 微信開發者工具的bug

當發現輸入框不能輸入或者工具的按鈕點不動時，關掉微信開發者工具，而後從新打開便可。

1. 發佈審覈流程

提交體驗版，內部測試審覈經過後 -> 提交審覈（1~3天，本次項目審覈時間2個小時）-> 提交發布

注意，提交審覈後，還須要手動去提交發布，不然是不算上線的。提交發布成功後，大概須要5分鐘左右的時間，就能夠在微信裏搜索到小程序了。

1. 右上角的轉發/分享按鈕

默認右上角是沒有轉發按鈕的，須要本身手動在須要轉發分享的頁面onLoad裏添加如下代碼。

wx.showShareMenu({
    withShareTicket: false
})