小程序获取菊花码的问题

小程序获取小程序码提供了三个接口

接口A: 适用于需要的码数量较少的业务场景 接口地址:

https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

POST 参数说明(先写表格会出现两个对markdown语法还不太熟悉,就先用dai ma hang)

参数            类型      默认值            说明
path            String                   不能为空,最大长度 128 字节
width           Int      430             二维码的宽度
auto_color      Bool     false           自动配置线条颜色,line_color    {"r":"0","g":"0","b":"0"}

接口B:适用于需要的码数量极多,或仅临时使用的业务场景

接口地址:

 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

POST 参数说明

参数            类型      默认值            说明
scene           String                   最大32个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~,其它字符请自行编码为合法字符(因不支持%,中文无法使用 encodeUrl 处理,请使用其他编码方式)
page            String                   不能为空,最大长度 128 字节
width           Int      430             二维码的宽度
auto_color      Bool     false           自动配置线条颜色,line_color    {"r":"0","g":"0","b":"0"}
line_color      Object   rgb(0,0,0)      auto_color 为 false 时生效,使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"}{"r":"0","g":"0","b":"0"}

获取小程序二维码

接口C:适用于需要的码数量较少的业务场景

接口地址:

https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

POST 参数说明

参数            类型      默认值            说明
page            String                   不能为空,最大长度 128 字节
width           Int      430             二维码的宽度

示例:

{"path": "pages/index?query=1", "width": 430}

注:pages/index 需要在 app.json 的 pages 中定义

根据公司业务需求获取小程序码我们都是需要第二个接口:

问题来了:第二个接口的scene字段是什么?一说场景值,一说需要带的参数值。

1.首先获取ACCESS_TOKEN,什么是ACCESS_TOKEN?

access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。

公众号可以使用AppID和AppSecret调用本接口来获取access_token。AppID和AppSecret可在“微信公众平台-开发-基本配置”页中获得(需要已经成为开发者,且帐号没有异常状态)。调用接口时,请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中,点击查看设置方法,否则将无法调用成功。

详见:网页调试工具

所以最初的代码是:

wx.request({
 // 获取token
 url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential',
 data: {
  appid: '***',
  secret: '***'
 },
 success(res) {
  wx.request({
   // 调用接口C
   url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + res.data.access_token,
   method: 'POST',
   data: {
    "path": "pages/qtshe/qtshe",
    "width": 430
   },
   success(res) {
    // res是二进制流,后台获取后,直接保存为图片,然后将图片返回给前台
   }
  })
 }
})

上面这个例子是前端获取小程序码的写法。

因为前端获取到后接口返回的是个二进制的流,使用小程序自带的image标签是不能进行展示的,并且前端暴露AppID和AppSecret密钥不安全,所以这里的操作都是需要后端来进行的,此时交给后端进行转换并返回一张小程序码的图片给你。

前端只需要拿到后端返回图片的图片展示即可。现与后端约定:

我给页面page(第一,第三个接口是path)路径,以及需要的scene字段。

期间遇到的问题:scene字段是什么?我怎么拿到?

期间设想scene是扫码后才能拿到的场景值,注意是扫码后才会有,那我怎么生成小程序码,这里陷入一个误区了。

其实scene在这里你可以理解为传参数的一个字段。

⚠️第一个第三个接口是不需要传入scene字段的且字段为path

path: 'pages/index/index?jobId=111111' //此时字段是path

⚠️第二个接口是需要的且字段为page

scene: 'jobId=111111',  //(string类型)
page: 'pages/index/index' //此时字段是page注意前面不要加'/'

⚠️生成的小程序码都是只能跳转线上的小程序页面,如果线上没有页面是跳转不了的,当然跳转后需要在我要跳转的页面onLoad里拿到scene字段然后进行逻辑操作

使用如下代码可以获取到二维码中的 scene 字段的值。调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟,开发工具模拟时的 scene 的参数值需要进行 encodeUrl

Page({
  onLoad: function(options) {
    // options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    var scene = decodeURIComponent(options.scene)
  }
})
  1. tip:通过该接口,仅能生成已发布的小程序的二维码。
  2. tip:可以在开发者工具预览时生成开发版的带参二维码。
  3. tip:接口A加上接口C,总共生成的码数量限制为100,000,请谨慎调用。
  4. tip: POST 参数需要转成 json 字符串,不支持 form 表单提交。
  5. tip: auto_color line_color 参数仅对小程序码生效。
  6. 这样进行调试模拟线上环境只要在onLoad里拿到scene即可
image

image

因产品需求原因需先上线,所以生成小程序码需要在正式上才能测试,所以这里先用到第一个接口,然后再慢慢改为第二个接口调试。具体效果可以查看青团社兼职实习小程序 随便点击一个兼职,进入详情页,左下角有个分享码,生成即可。

青团社招聘:

招聘岗位:高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层

简历投递到:hr@qtshe.com || haochen@qtshe.com

职位描述:

1、建设工具、提炼组件、抽象框架,促进前端工程化、服务化,持续提升研发效率,保障线上产品质量

2、构建H5/PC应用基础设施,主导建设前端各种发布/监控等平台,指导落实解决方案

3、持续优化前端页面性能,维护前端代码规范,钻研各种前沿技术和创新交互,增强用户体验、开拓前端能力边界

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,757评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,478评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,540评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,593评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,903评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,329评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,659评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,383评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,055评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,337评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,864评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,227评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,820评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,999评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,750评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,365评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,260评论 2 258