微信小程式掃描普通二維碼開啟小程式的方法

尚弦月發表於2021-12-03
微信小程式

　　很久沒有寫部落格了，之前換了一份工作，很久沒有做Android開發了，現在轉做前端開發了，記錄一下遇到的問題及解決的方法。

　　最近做微信小程式開發，遇到一個需求，後臺管理系統生成的問卷和投票會有一個二維碼，需要用微信掃碼後自動開啟微信小程式的問卷或投票詳情頁面。

　　首先，每個問卷或投票都有一個唯一的id，使用vue-qr來生成二維碼

　　vue-qr安裝：

npm install vue-qr --save

　　安裝完成後，在頁面中引入vue-qr外掛

<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr
  }
}
</script>

　　引入完成後，在頁面中使用vue-qr外掛

1 <template>
2 <vue-qr
3       :text="dataForm.url"
4       :margin="0"
5       colorDark="#000"
6       colorLight="#fff"
7       :logoScale="0.3"
8       :size="100"></vue-qr>
9 </template>

　　使用vue-qr外掛後，需要動態設定二維碼中的內容，我這裡通過一個url地址+問卷或投票的id來動態生成二維碼

 1 <script>
 2 export default {
 3   data() {
 4     return {
 5       dataForm: {
 6         id: 0,
 7         url: "",
 8       },
 9     };
10   },
11   methods: {
12     init(id) {
13       this.dataForm.id = id || 0;
14       this.dataForm.url = `https://xxxxx.cn/questionnaire-ids/${this.dataForm.id}`;
15     }
16   }
17 }
18 </script>

　　那麼現在，我們掃描二維碼獲得的內容就是前面的一段連結+問卷或投票的id。

　　接下來進入微信小程式開發者後臺，點選左側開發下的開發管理，接下來點選開發設定Tab，如下圖所示。

 

 　　向下拖動頁面，直到看到 掃普通連結二維碼開啟小程式 標題，如下圖所示

 

 　　點選右側的新增按鈕，配置普通連結二維碼規則，如下圖所示。

 

 

　　設定二維碼規則，可檢視文件進行設定（文件地址：掃碼開啟小程式接入指南）

 

 　　點選儲存按鈕，提示對應的檔案沒有儲存到伺服器的目錄，這時下載效驗檔案，上傳至伺服器打包目錄下對應的資料夾（questionnaire-ids）中，如下圖所示:

 

 　　儲存之後，回到二維碼地址列表中，如果需要在微信小程式的正式版中使用，需要點選列表後面操作欄中的釋出按鈕，釋出完成後就可以使用。

　　接下來處理小程式頁面的邏輯。在小程式對應的投票或問卷詳情頁面，我們只需要拿到投票或問卷的id，然後通過後臺介面，獲取問卷或投票的詳情內容顯示出來就OK了。　　

 1   onLoad: function (options) {
 2     wx.showLoading({
 3       title: '努力載入中......',
 4     })
 5     if (options.q) {
 6       let scan_url = decodeURIComponent(options.q)
 7       let cp_id = scan_url.match(/\d+/)
 8       wx.setStorageSync('scan_url', parseInt(cp_id[0]))
 9       this.setData({
10         id: parseInt(cp_id[0]),
11       })
12     } 
13 }

　　這樣就獲取了id，然後就可以顯示出問卷或投票的詳情了。

　　用測試機掃描後臺管理頁面中生成的二維碼，可進入小程式的詳情頁面。

 

　　

 

相關文章