评论

借助云开发10行代码生成小程序码,可以微信扫码快速进入指定小程序页

10行代码快速生成小程序二维码

最近老有同学问我,如何生成小程序二维码,让用户扫码后能快速进入指定页面。经过一番研究,发现用云开发的云调用来实现特别方便,基本上10行代码就可以快速的生成指定页面的二维码。这样我们在做一些线下业务时就能让用户方便快速的进入到指定页面了,比如我们的点餐小程序,我们可以在二维码里绑定桌号,这样用户用微信扫码二维码,就可以快速的进入点餐页面了,并且可以识别到用户当前所在的桌号。

注意事项

我们生成的小程序码指定的页面,必须是你小程序已经发布,如果小程序还没有发布,获取小程序码绑定的页面不存在,扫码后就会出现以下错误

所以要想使用这个功能,必须要先发布你的小程序。接下来我们就来讲下具体的实现。

一,先看官方文档

我其实说过很多遍的,官方文档永远是最好的老师。因为官方文档永远是最标准的。所以我们实现这个功能,同样要先去看下官方文档。小程序码官方文旦

看上图的官方文档,我们可以看出,有三种方式可以生成小程序码。

  • A,createQRCode:生成二维码,可接受 path 参数较长,生成个数受限,数量限制
  • B,get:生成小程序码,可接受 path 参数较长,生成个数受限,数量限制见
  • C,getUnlimited:生成小程序码,可接受页面参数较短,生成个数不受限

官方提示:

接口只能生成已发布的小程序的二维码
接口 A 加上接口 C,总共生成的码数量限制为 100,000,请谨慎调用。
接口 B 调用分钟频率受限(5000次/分钟),如需大量小程序码,建议预生成
所以我们一定要结合自己的业务场景来使用不同的方法来生成小程序码或者二维码。我们这里以点餐桌号为例。因为我们一个餐厅也没有多少桌,所以我们就用接口B来实现页面和桌号的绑定。

看官方文档,我们可以看到,我们主要使用的还是path这个参数,这个参数用来设置页面和参数。具体代码如下图。

代码很简单,在第11行,我们给path参数设置了小程序页面和参数name。这样我们用微信扫码后,就会打开对应的页面,并且可以拿到name参数,

其实到这里我们就成功的生成小程序码了,并且可以用微信直接扫码进入到指定页面,并携带指定参数了。
接下来呢,我就把代码改造成一个简单的工具,这样大家拿到源码后就可以直接使用这个工具快速的生成小程序码了。

创建云函数

关于云开发,云函数的创建和使用,我讲过很多遍了,还不知道的同学,可以去翻看下我之前的文章,或者看下我录的云开发视频:5小时零基础入门小程序云开发
下面我们就创建一个云函数,并编写云函数,如下图

细心的同学应该可以看到,我这里传了两个参数进来。event.path就是用来指定我们二维码绑定的页面和携带的参数,event.name就是用来给我们的二维码图片命名的。
原理:我们这里生成小程序码的原理就是使用云开发的云调用,获取二维码,然后把二维码存到云存储,这样我们就可以拿到我们需要的二维码了

  • 再来看下调用的方法。
  • 再来看下我们生成的小程序码

    可以看到我们生成的1号桌对应的二维码,这样顾客用微信扫描一号餐桌的二维码时,就可以直接进入对应的页面,并且把桌号带进去了。

    这样你只需要改造下我index.js里的path和name就可以生成你想要的小程序二维码了。

    然后再到云存储里获取对应的二维码,

    下载后打印出来,贴到对应的桌子上,就可以供用户扫码点餐了。还有一点要记住奥,一定是你小程序发布后,才可以使用这个功能奥。
    今天就到这里把,祝大家元旦快乐,2020年学有所成,想获取更多小程序相关的知识,请持续关注。
最后一次编辑于  2020-01-01  
点赞 1
收藏
评论

3 个评论

  • ꯭醇꯭醇꯭醇꯭醇꯭醇꯭某꯭
    ꯭醇꯭醇꯭醇꯭醇꯭醇꯭某꯭
    2020-04-16

    大佬帮忙看一下为什么云存储里没用小程序码,代码都一样的

    2020-04-16
    赞同
    回复
  • 韦不吕
    韦不吕
    2020-01-03

    新的文档对page的说明不能带参数,要求放在scene参数里面?那么扫描后进入onload() options object是怎样的?

    =======

    必须是已经发布的小程序存在的页面(否则报错),例如 pages/index/index, 根路径前不要填加,不能携带参数(参数请放在scene字段里),如果不填写这个字段,默认跳主页面

    2020-01-03
    赞同
    回复 4
    • i
W
      i W
      2020-01-03
      带参:scene:"123456"
      onload(options) :   options:{scene:"123456"}
      开发工具有二维码编译,可以用这个
      2020-01-03
      1
      回复
    • 韦不吕
      韦不吕
      2020-01-03回复i W
      这样的回复100分:都能预测到我需要什么。非常感谢!
      2020-01-03
      回复
    • searchFan
      searchFan
      2020-02-24回复i W
      报40169错误怎么破?
      2020-02-24
      回复
    • 拎包哥
      拎包哥
      2020-03-19回复i W
      小心眼哥,这个不是getUnlimited才需要scene吗
      2020-03-19
      回复
  • Why not?
    Why not?
    2020-01-01

    吓了一跳,是接口a和b加起来一共不超过10w

    2020-01-01
    赞同
    回复
登录 后发表内容