微信小程式云開發動態制作小程式碼

一、前言

因為學業以及作業上的事情繁多，已經棄"耕"許久了，在這段時間里，學了很多東西，也做了大大小小將近10個專案，這個程序中，越發覺得記錄的重要性，所以才想著在忙碌之中，抽出時間來寫一下博客，記錄一下開發程序中的一些知識點，老生常談了，既是讓自己下次能夠回顧，也是希望能夠幫到有需要的人，

二、需求分析

在日常的微信小程式專案中，我們經常需要用到一些宣傳海報，邀請海報等功能，例如一個邀請好友的海報，生成之后讓用戶發朋友圈或者轉發好友邀請，那這時，我們就需要知道那些用戶是你邀請的，方便下發獎勵啥的，這都是很常見的需求，那該如何實作類似的需求呢？

三、思路分析

這些海報其實最關鍵的一個就是長按掃碼識別的帶參二維碼（小程式碼），
通過查閱微信小程式開發檔案，我們可以知道，總的來說有兩種方式可以生成這種帶參二維碼（小程式碼），當這種帶參二維碼繪制在海報上時，就可以通過這個二維碼的引數來進行識別是哪個用戶生成的海報，當其他用戶掃碼進入小程式時就可將標識的id存進資料庫里，進而判斷到底是誰邀請的人了，
太久沒有碼字了，說得可能有點累贅，
總結一下：根據二維碼帶的引數來判斷是誰的海報，這個引數一定是能夠定位出來用戶的，一般來說，可以使用用戶的openid來作為這個標識引數，

舉個簡單的例子（云開發）：
定義一個集合：user
有兩個用戶
U1

U2

上面的資料表中，很明顯，U2是掃了U1的二維碼（小程式碼）進來的，所以U2的superiorId欄位的值是U1的openid

那么當我們需要統計U1邀請了多少人的時候，就可以通過查詢資料中有多少用戶的superiorId的值等于U1的openid即可，

四、兩大實作途徑

前面說到大致上有兩種方式可以實作這種需求，那么我們來分析一下這兩種實作方法各自的特點，方便我們在開發程序中選用適合的方法，

途徑一：小程式碼

微信對動態生成小程式碼提供了三種方式給我們，這里我只講云呼叫的方式，傳統服務器開發的，可根據檔案來操作，原理大致相同，

1、A介面： wxacode.createQRCode

2、C介面： wxacode.get

3、B介面： wxacode.getUnlimited

列個表格分析一下這三個介面，詳細的介紹可以點擊標題直達官文檔案查閱，

可以看到，其實AC介面是一伙的，實際的使用方法也差不多，只是引數上會有所不同，
AC介面與B介面的區別在于生成的數量限制和攜帶引數的長度，所以在選用的時候，就要考慮這生成的數量和攜帶的引數長度這兩個條件了，

途徑二：普通二維碼

簡單對比完小程式碼的三個介面后，再來看看這普通二維碼的特點，如果是上面的三個介面都無法滿足業務需求，例如引數長、生成的數量還要特別多的場景，那可以試試通過這個普通二維碼的途徑實作，
這個二維碼跟介面相比，生成的數量無限制，引數理論可以很長（具體多長沒試過，但是肯定比128長），時效也是長期有效，這樣看來，似乎直接無論什么業務場景，直接選這種方式就對了？

當然不是，普通二維碼最少這兩個方面需要考慮，

一、開放范圍：企業、媒體、政府及其他組織型別小程式， 換句話說，就是不支持個人開發者賬號開通使用，

二、開發起來相對來說比較復雜，需要用到服務器和域名來進行配置，會踩不少坑，

由于這個這種途徑實作有點復雜，所以在這里不啰嗦了，有這方面需求的朋友可以私信我交流，互相學習，

還有最后一個需要注意的是：無論哪種途徑實作，小程式都必須在發布后才可以正常掃碼使用，

五、AC介面實作代碼示例（云開發）

B介面與AC介面使用起來差不多，可以直接去官網看代碼示例，應該是可以觸類旁通的，所以這里我只用一下AC其中一個介面，主要還是引出一些常見問題，
1、新建云函式后，在config.json檔案中配置權限（以createQRCode例）

2、index.js代碼

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event) => {
  try {
    const result = await cloud.openapi.wxacode.createQRCode({
      path: event.path,
      width: event.width
    })
    return result
  } catch (err) {
    return err
  }
}

3、呼叫（如果不是本地除錯，記得提交云函式）

if (posterType == 1) {
		// 配置頁面路徑以及引數
        path = "pages/indexStudent1/indexStudent1?superiorId1=" +
         superiorId1 + "&superiorId2=" + superiorId2
      } 
      else if (posterType == 2) {
        path = "pages/teacherSubmit/teacherSubmit?superiorId="
         + superiorId2
      }
      // 呼叫云函式，請求生成小程式碼 buffer 資料
      const QRCodeObj = await wx.cloud.callFunction({
        name: 'createQRCode',
        data: {
          path: path,
          width: 430
        }
      })
      // 需要注意的是回傳來的資料是Buffer格式
      // 需要轉換成為base64格式（為了方便存盤復用，畢竟次數有限）
 	  const base64 = "data:image/jpeg;base64," + 
 	  wx.arrayBufferToBase64(QRCodeObj.result.buffer.data)
 	  // 將資料直接扔進image組件的src引數里面即可
 	  this.setData({
          imgUrl:  base64
        })

4、wxml

5、效果

六、說明與優化

只是截取了部分的關鍵代碼，小程式碼也做了處理，
觸發函式、實作復用的代碼都沒有貼出來（為了安全，不方便貼出來），

優化的話，第一個肯定就是考慮復用了，即新用戶第一次呼叫云函式去生成，下次的話，就直接從資料庫里面讀出來生成，

當然前提是引數一致，

為什么要復用呢，主要是因為即使是同一個二維碼，引數什么都一致，你呼叫了十次函式生成，也算是十個碼，不是一個碼，所以在數量有限的情況下，盡可能考慮復用，

如果這篇文章幫到了你，點個贊吧，