1、生成二维码
  • 在小程序开发中,经常需要用到通过分享小程序二维码,进行扫码进入小程序。

  • 官方文档 生成小程序二维码接口,这个生成接口可以放置服务器使用。
    page:是扫码之后需要打开的小程序页面
    scene:是小程序通过扫码之后进入小程序页面带进来的参数,这个参数也是你在生成二维码的时候填好的识别参数
    其他的属性可以直接看文档,主要功能还是在这两个参数上。

  • 生成二维码的时候报错: invalid page hint: [khnDRb0gE-rMmlpA] rid: 5f475efd-096822b7-643b3732
    1、一种原因是线上小程序不存在当前这个配置的页面地址,所以需要等上线之后才可以测试。
    2、一种原因是在填写参数 page 的时候:pages/index/index 不要写成 /pages/index/index

  • 通过文档生成小程序二维码之后,并分享之后,如何获取到扫码进来二维码所带的参数呢,我们只需要生成二维码的时候配置的 page 页面中 onLoad 中进行判断处理即可:

onLoad: function (options) {if (options.scene) {// 必须要 decodeURIComponent 格式化一下,不然里面的符号会是 %23... 这样的格式let scene = decodeURIComponent(options.scene);// '&'是我们定义的参数链接方式let userID = scene.split("&")[0];let bookID = scene.split('&')[1];// 其他逻辑处理。。。。。}
}

2、扫码进入开发版测试二维码数据
  • 我们通过下面数据生成二维码,注意配置的页面需要存在于小程序项目里面,不存在是无法打开页面的:
{"page": "pages/index/index","scene": "name=dzm#age=18"
}

  • 生成二维码之后,我们将二维码保存到桌面上,然后打开小程序工具:

    点击头部的编译模式,找到通过二维码编译,然后选择桌面上的二维码图片,这样就会跟手机上扫码一样,打开二维码中配置的页面,以及通过页面中 onLoad: function (options) 方法带过来之前配置的 scene 参数。

  • 解析参数看第一步中最后一步即可。

3、扫码进入开发版测试二维码数据
  • 其实还可以通过 选择编译模式中的 自定义编译条件 来进行测试

  • 模式名称: 随便起个名字,方便下次找到在重复使用

  • 启动页面: 我们之前配置二维码中需要打开的页面

  • 启动参数:我们之前配置二维码中需要打开的页面附带的参数,填写格式为:scene=yq#397#261,也可以传入格式化好的数据 scene=yq%23397%23261这里就不能出现多余的 = 号了 例如 scene=name=dzm#age=18 这中数据就不能这么传的,自己拿去格式化一下在放进来,里面的 scene 就需要我们自己指定好,打开页面的时候获取到的数据就是这样的了:{scene: "yq#397#261"}{scene: "yq%23397%23261"},然后参数通过 decodeURIComponent 格式化回来就都是 yq#397#261 了。

  • 进入场景:无特殊情况默认即可

  • 然后点击确定即可测试!

微信小程序 - 二维码数据解析,如何扫码进入开发版测试二维码数据相关推荐

  1. mpvue 微信小程序_使用Vue.js开发微信小程序:开源框架mpvue解析

    戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

  2. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  3. 微信小程序自定义组件/插件等解析

    自定义组件 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页 ...

  4. h5+js调取相机做取景框_使用Vue.js开发微信小程序:开源框架mpvue解析

    戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

  5. 使用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发 ...

  6. 在微信小程序中,使用wxParse插件解析HTML/md富文本

    1. 在微信小程序中,使用wxParse插件解析HTML富文本 下载文件 GitHub地址:https://github.com/icindy/wxParse 解压文件,在解压后的文件夹里找到wxPa ...

  7. ssm基于微信小程序的社区老人健康管理服务系统的设计与实现 毕业设计-附源码011513

    摘要 随着现在网络的快速发展,网络的应用在各行各业当中它很快融入到了许多分类管理之中,他们利用网络来做这个社区老人健康管理服务系统,随之就产生了"社区老人健康管理服务系统 .",这 ...

  8. 超市微信小程序怎么做_微信小程序便利店怎么开?便利店和百货超市怎么开发小程序?...

    微信小程序便利店怎么开?便利店和百货超市怎么开发小程序?下面跟随小编一起来看看吧! 现在很多商家还在小程序是什么,流行的说法是开店到微信,创建一个互联网离线模式,将近五公里的小程序显示出来,只要别人用 ...

  9. 微信小程序(应用号)实战课程之记账软件开发

    http://git.oschina.net/dotton/finance [2016-10-12] 更新 缘起:昨天官方开发有了更新v0.10.101100,Picker的mode属性已经支持dat ...

最新文章

  1. 【Prometheus】PromQL 万字详解
  2. ASP.NET Core 2.1带来SignalR、Razor类库
  3. PC机键盘的处理过程
  4. Matlab实用程序--图形应用-轮廓图
  5. 旅游景点人物进出系统[OC项目]
  6. 服务器端如何开启GZIP压缩功能
  7. python的open函数百度百科,open函数
  8. 如何在工作中快速成长?致工程师的10个技巧
  9. 面试题,产品经理岗位的哪些特点最吸引你?
  10. 关于MYSQL中FLOAT和DOUBLE类型的存储
  11. 代码整洁之道-程序员的职业素养
  12. 阿里巴巴数据中台实践
  13. canu三代组装软件安装
  14. mac下更新自带的PHP版本到5.6或7.0
  15. matlab设置图片背景透明_Matlab ---- 有透明度的png图像的显示与图层叠加方法
  16. NGINX工作原理解析
  17. matlab地球月球卫星关系,Matlab 卫星绕地球旋转演示动画
  18. node与npm版本对应关系以及使用nvm管理node版本
  19. 微博修改域名的服务器,新浪微博个性域名是什么 新浪微博如何修改个性域名...
  20. linux中的21是什么

热门文章

  1. 强烈推荐几个超厉害的公众号!
  2. AI 测温、无人机喊话、机器人防疫,科技抗疫超硬核!
  3. 直播带货app源码,实现直播的秒开和优化
  4. OPPO加入连接标准联盟董事会;BOSE为领克09汽车打造Centerpoint环绕声音响系统 | 全球TMT...
  5. 凭实力讲,运维工程师能不能做成预言家?
  6. 计算机网络:路由器和路由选择协议
  7. LeGO-LOAM资料整理
  8. 浙江大学计算机科学与技术学院导师,浙江大学计算机科学与技术学院导师介绍:杨莹春...
  9. 在线编码工具_每个新编码员都需要25种工具
  10. 直观认识Windows