首页 技术 正文
技术 2022年11月6日
0 收藏 328 点赞 946 浏览 1443 个字

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

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

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

  vue-qr安装:

npm install vue-qr --save

  安装完成后,在页面中引入vue-qr插件

<script>
import vueQr from "vue-qr";
export default {
components: {
vueQr,Clipboard
}
}
</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,如下图所示。

  向下拖动页面,直到看到 扫普通链接二维码打开小程序 标题,如下图所示

  点击右侧的添加按钮,配置普通链接二维码规则,如下图所示。

  设置二维码规则,可查看文件进行设置

  点击保存按钮,提示对应的文件没有保存到服务器的目录,这时下载效验文件,上传至服务器的打包目录下对应的文件夹中,如下图所示

  保存之后,回到二维码地址列表中,如果需要在微信小程序的正式版中使用,需要点击列表后面操作栏中的发布按钮,发布完成后就可以使用。

  接下来处理小程序页面的逻辑。在小程序对应的投票或问卷的详情页面,我们只需要拿到投票或问卷的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,然后就可以显示出问卷或投票的详情了。

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

  

  

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,088
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,564
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,412
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,185
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,822
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,905