微信小程序扫描普通二维码打开小程序的方法

　　很久没有写博客了，之前换了一份工作，很久没有做Android开发了，现在转做前端开发了，记录一下遇到的问题及解决的方法。

　　最近做微信小程序开发，遇到一个需求，后台管理系统生成的问卷和投票会有一个二维码，需要用微信扫码后自动打开微信小程序的问卷或投票详情页面。

　　首先，每个问卷或投票都有一个唯一的id，使用vue-qr来生成二维码

　　vue-qr安装：

?

1	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，然后就可以显示出问卷或投票的详情了。

　　用测试机扫描后台管理页面中生成的二维码，可进入小程序的详情页面。