微信小程序掃描普通二維碼打開小程序的方法

　　很久沒有寫博客了，之前換了一份工作，很久沒有做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插件

<template>
<vue-qr
      :text="dataForm.url"
      :margin="0"
      colorDark="#000"
      colorLight="#fff"
      :logoScale="0.3"
      :size="100"></vue-qr>
</template>

　　使用vue-qr插件后，需要動態設置二維碼中的內容，我這里通過一個url地址+問卷或投票的id來動態生成二維碼

<script>
export default {
  data() {
    return {
      dataForm: {
        id: 0,
        url: "",
      },
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.dataForm.url = `https://xxxxx.cn/questionnaire-ids/${this.dataForm.id}`;
    }
  }
}
</script>

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

　　接下來進入微信小程序開發者后台，點擊左側開發下的開發管理，接下來點擊開發設置Tab，如下圖所示。

 

 　　向下拖動頁面，直到看到 掃普通鏈接二維碼打開小程序 標題，如下圖所示

 

 　　點擊右側的添加按鈕，配置普通鏈接二維碼規則，如下圖所示。

 

 

　　設置二維碼規則，可查看文檔進行設置（文檔地址：掃碼打開小程序接入指南）

 

 　　點擊保存按鈕，提示對應的文件沒有保存到服務器的目錄，這時下載效驗文件，上傳至服務器打包目錄下對應的文件夾（questionnaire-ids）中，如下圖所示:

 

 　　保存之后，回到二維碼地址列表中，如果需要在微信小程序的正式版中使用，需要點擊列表后面操作欄中的發布按鈕，發布完成后就可以使用。

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

  onLoad: function (options) {
    wx.showLoading({
      title: '努力加載中......',
    })
    if (options.q) {
      let scan_url = decodeURIComponent(options.q)
      let cp_id = scan_url.match(/\d+/)
      wx.setStorageSync('scan_url', parseInt(cp_id[0]))
      this.setData({
        id: parseInt(cp_id[0]),
      })
    } 
}

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

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