小程序扫描二维码获取参数

题图FromBingBy Clm

最近开发的小程序有一个需求，当用户通过微信扫一扫功能，扫普通链接二维码打开小程序时，需要获取这个普通链接中传递的参数,然后再做进一步的操作。

这个需求很常见，比如为某个饭店开发一个自助点餐功能，微信扫码进入饭店的点餐页面，页面显示的是所有菜品，然后用户在菜单中去选择，然后下单。

另外一种更加便捷的是饭店推出几个热门的菜，在饭店显眼的位置放上图片和本菜的二维码，扫描二维码直接进入本菜的点单页面，这样省去了用户在页面中查找的时间。

另外还有一些博物馆设置的小程序自助讲解功能，只需扫码即可进入相应的展品页面。

原理很简单，但是因为小程序并不是完全按照web的方式去设计的，下面看看如何配置一下吧。

实现这个需求，首先要在小程序的后台控制页面配置一下，如图：

点击上图中右上角的添加按钮去配置：

需要填写四项内容，前缀规则默认不占用，当我们通过二维码工具或者qcodejs将普通链接转化为二维码后，调用微信扫一扫功能扫描此二维码，微信就会跳转到目标小程序的特定页面。

但是有时候我们需要传递一些参数，通过上面的普通链接来传递，传递的方式就是在普通链接后面添加参数，参数格式为查询字符串，例如 ,这样的话小程序内部如何获取这个数据呢？观察如下代码：

onLoad (option) { console.log(option) }

一般我们会在小程序生命周期函数onload函数中打印这个函数的默认形参option，option就是上一个页面传递过来的参数，但是这里需要注意，这是小程序内部页面之间传递参数的方式，不适用于上面扫描二维获取二维码中的参数微信小程序url传值，好多同学在获取二维码中的参数时容易和页面间传值获取的方式搞混。

这两种方式传参的方式是一样的，都是在链接后面追加问号和查询字符串，但是获取方式不同。

扫描二维码进入小程序并没有发生页面间的跳转，所以并不能直接从option中获取链接中传递的参数。

那我们如何获取呢？查看官方文档：

onload事件的默认形参option中会有一个q属性，这个属性需要用decodeURIComponent解码一次，解码后得到原二维码的完整内容微信小程序url传值，例如：“”。得到这个完整的链接后，我们再提取参数，主要过程就是字符串的处理。

import qs from "qs"onLoad (option) {  console.log(option)  if (option.q) {    let url = decodeURIComponent(option.q)    // url http://www.a.com?name=zs&age=18;    let paramstr = url.split("/\?/")[1];    // name=zs&age=18;    let params = qs.parser(paramstr);    //最终结果为：params  {name:'zs',age:18}  }}

上面我们使用了一个叫做qs的npm包，这个包专门处理查询字符串的，我们用？分割这个字符串“”，得到“name=zs&age=18”，然后用qs的parser方法进行解析得到{name:'zs',age:18}这个对象，至此我们就得到我们通过二维码链接传递的参数了。

关于qs这个npm包的具体使用方法，大家可以去npm官网查看相关文档，很方便的一个类库，大家有兴趣可以去看看。

以上便是我最近在开发小程序遇到的一个小问题，如果你有什么其他的想法或者建议欢迎留言。