程序笔记   发布时间:2022-07-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了微信小程序扫描普通二维码打开小程序的方法大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

  很久没有写博客了,之前换了一份工作,很久没有做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,然后就可以显示出问卷或投票的详情了。

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

 

  

 

大佬总结

以上是大佬教程为你收集整理的微信小程序扫描普通二维码打开小程序的方法全部内容,希望文章能够帮你解决微信小程序扫描普通二维码打开小程序的方法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: