前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序扫描二维码获取参数

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

作者头像
挥刀北上
发布2019-11-05 00:59:40
4.8K0
发布2019-11-05 00:59:40
举报
文章被收录于专栏:Node.js开发Node.js开发

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

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

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

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

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

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

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

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

但是有时候我们需要传递一些参数,通过上面的普通链接来传递,传递的方式就是在普通链接后面添加参数,参数格式为查询字符串,例如 http://www.a.com?name=zs&age=18,这样的话小程序内部如何获取这个数据呢?观察如下代码:

代码语言:javascript
复制
onLoad (option) {
console.log(option)
}

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

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

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

那我们如何获取呢?查看官方文档:

onload事件的默认形参option中会有一个q属性,这个属性需要用decodeURIComponent解码一次,解码后得到原二维码的完整内容,例如:“http://www.a.com?name=zs&age=18”。得到这个完整的链接后,我们再提取参数,主要过程就是字符串的处理。

代码语言:javascript
复制
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包,这个包专门处理查询字符串的,我们用?分割这个字符串“http://www.a.com?name=zs&age=18”,得到“name=zs&age=18”,然后用qs的parser方法进行解析得到{name:'zs',age:18}这个对象,至此我们就得到我们通过二维码链接传递的参数了。

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-11-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 nodejs全栈开发 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档