微信小程序開發

前言

程序小哥參與的原生小程序，目前累計用戶240W，在這裏整理了一下期間遇到的坑，也給其餘朋友一些經驗。

1、註冊開發者賬號

微信公衆平臺前往進行註冊，生成appid和app secrect, appid在登陸微信開發者工具時須要。

注意：

• 小程序設置的修改都是有限制次數的，請謹慎修改。
• 服務器域名的配置 request 合法域名：配置後端接口的域名；
  socket 合法域名：
  uploadFile 合法域名：配置上傳文件的域名，例如：七牛等；
  downloadFile 合法域名：下載文件的域名，例如：七牛，以下載微信頭像，請配置www.qlogo.org/

2、開發

（一）目錄結構

• pages
  • home
    • index.js Page({}) 註冊頁面 Page，頁面的生命週期
    • index.json 頁面配置文件
    • index.wxml 相似 html
    • index.wxss 樣式文件
• styles 公用樣式文件
• components
  • 公用組件 index.js index.json index.wxml index.wxss
• app.js App({}) 小程序啓動文件，啓動的生命週期
• app.json 小程序配置文件，pages: [ ‘’, ‘’] , window 配置 等, app.json 裏配置的頁面路徑，需與 pages 文件夾內的頁面文件一致
• app.wxss 小程序的樣式文件
• project.config.json 小程序名稱，appid 以及項目所須要的相關配置

3、微信開發中的登陸機制

直接查看微信文檔

（一）注意

• 獲取用戶信息，須要用戶點擊 Button（open-type="getUserInfo"）來受權獲取，以後可以使用 wx.getUserInfo 獲取；
• 獲取 openid, wx.login 獲取 Code, 而後在服務器後臺調用 code2Session，使用 code 換取 openid 和 session_key 等信息；
• 獲取 unionid（用於矩陣小程序）用戶受權後，傳入 rawUserInfo 和 session_key 服務端解密上報獲取；
• 會出現解密失敗的可能性很高，目前的作法是，失敗重試。

1. 保證 wx.login 的 code 在 wx.getUserInfo 以前返回；
2. 解密失敗，從新 wx.login 而後再請求一次。

4、微信分享

• 頁面配置分享，必須有 onShareAppMessage()，頁面纔會有分享

onShareAppMessage() {
        return {
          title,
          summary,
          imageUrl,
          path,
          success
        }
      }
複製代碼

• 按鈕分享給好友 <button open-type="share">分享</button>
• 分享海報
  點擊按鈕生成 canvas，而後保存到手機相冊

wx.saveImageToPhotosAlbum({
        filePath,
        success: s => {
          wx.showToast({
            title: '已保存圖片',
            icon: 'success'
          })
        },
        fail: f => {
          console.log('f', f)
        }
      })
複製代碼

• 羣分享 在分享時頁面加入配置

  onLoad(e) {
        wx.showShareMenu({
          withShareTicket: true
        })
      }
  複製代碼

在打開分享頁面的用戶，經過啓動小程序的場景 scene 值爲1044
打開頁面，會在頁面加載帶上 shareTicket 參數。
注意：因爲小程序生命週期的關係，根據業務不一樣狀況來判斷場景值。

App({
      // 每次進入就觸發
      onShow(e) {
        // 分享羣的場景標識
        if (e.scene === 1044 && e.shareTicket) {
          this.globalData.shareTicket = e.shareTicket
        }
        // 分享我的的場景標識
        if (e.scene === 1007) {
          this.globalData.shareTicket = ''
        }
      }
    })
複製代碼

在經過 wx.getShareInfo(Object object)方法, 後端解密，返回一個 openGId

export function fetchGroupId(shareTicket) {
      let { appName } = getApp().globalData
      return new Promise((resolve, reject) => {
        wx.getShareInfo({
          shareTicket,
          complete(shareKey) {
            const data = {
              sessionKey: getApp().globalData.sessionKey
            }
            delete shareKey.errMsg
            Object.assign(data, shareKey)
            request({
              url,
              method: 'POST',
              data
            }).then(r => {
              if (r.code) {
                // 解密失敗從新登陸從新解密
                login(appName).then(() => {
                  fetchGroupId(shareTicket).then(openGId => resolve(openGId))
                })
              } else {
                resolve(r.data.openGId)
              }
            })
          }
        })
      })
    }
複製代碼

經過微信控件顯示羣名

<open-data type="groupName" open-gid="{{ groupId }}" />
複製代碼

5、上線小程序

（一）發佈體驗版

1. 在微信開發者工具，工具欄上點擊上傳按鈕便可發佈到微信服務器，提交後就能夠在微信開發管理端查看到新的開發版本，能夠發佈二維碼白名單用戶掃碼後進行體驗。
2. 測試環境的接口與 request 合法域名不一致時，可在手機端調試便可訪問。
3. 測試完成沒問題，提交審覈。記得檢查審覈版本的 request 域名是否正確。
4. 審覈成功後，提交發布。第一次發佈審覈時間會比較長，大約3－5個工做日左右，往後的升級版本審覈就很快了，基本上能夠作到半天就審覈經過。