小程序扫码
小程序扫码功能,官方只给了简单的介绍,和方法,这让很多像我一样的菜鸟,刚接触这样的功能时,完全无从下手,本章,我会详细的介绍一下,小程序扫码功能的实现。
注意事项:
1.小程序扫码功能,用处普遍,只有发布了正式版本,才可以测试,虽说微信的开发工具提供了模拟扫码的入口,但是开发测试和上线以后,这两个参数的获取还是存在差异的,下面我就讲讲,我是如何趟过这个坑的,并会把我正式上线的扫码功能代码贴出来(不用找了,网上没有这么干的,见者有缘,转载记得带上原文地址就行。)
首先微信开发工具的自定义模拟肯定是用到了,上图
最主要的就是启动参数和进入场景的演示:
1.启动参数:这个地方可以看到有类似乱码的存在。下面我拆解一下,告诉你这是什么意思。
scene=storeCode%3D10003060%26tableNo%3D0001
scene: 这个参数是取页面链接的地方
%3D:这个是被微信加密后的等号,等号前面的是你自己定义的key,等号后面的是value
%26:这个符号代表的是微信加密号后的 & 符号
拆解以后是不是更加清晰了。下面我们来看代码:
首先我们来看通过微信扫码进入小程序取得参数的代码块:
这里有几个要点:
1.微信扫码进入小程序取得参数,必须要写在跳转页面的 onload生命周期函数里(从链接里取参数,他们规定的)
2.在onload的生命周期函数里一定要传query,如图:
这个是从微信里拿到的,只要写了就行。
//这个时候再去进行判断
if (query.scene) {//微信扫码的数据我们都模拟出来了,剩下当然就是截取有用的部分了。
var scene = query.scene; //把链接取出存到变量。
var reg = new RegExp('scene=', "g"); //然后创建一个正则表达式,截取scene=后面的数据部分
scene = scene.replace(reg, ""); //保留有用的部分重新存储到这个变量里
scene = decodeURIComponent(scene);//这是解码方式,把得到的链接数据进行解密
console.log("解密数据后路径===" + scene) //可以解密后打印查看
//然后通过 &符号截取他的左右两部分这个时候的数据格式应该是这样的
//storeCode=10003060 tableNo=0001
var arrPara = scene.split("&");
//紧接着我们只需要循环arrPara
var arr = [];
for (var i in arrPara) {//循环arrPara
// 通过 = 号在截取一次 这是后的数据应该是 storeCode,10003060 tableNo,0001
arr = arrPara[i].split("=");
//然后通过存缓存的方法,按顺序把你需要的 Key和value存起来。就拿到了你需要的参数了。
wx.setStorageSync(i == 0 ? "menu_storeCode" : "menu_tableNo", arr[1]);
}
}
这样,我们就避免了,扫码这个功能必须发布正式版以后才能在做调试这个问题了,小程序每次审核都有三个工作日左右,对于着急的程序猿们来说,因为这一个问题,反复调试,还得发布审核,这简直就是个煎熬。