微信小程序分享小程序码的生成(带参数)以及参数的获取


Posted in Javascript onMarch 25, 2020

1.小程序码介绍

从微信小程序开发文档上我们可以了解到,目前微信支持两种二维码(左),小程序码和小程序二维码(右)。官方推荐使用小程序码,因为小程序码具有更好的辨识度。

 微信小程序分享小程序码的生成(带参数)以及参数的获取

官方提供生成小程序码的两种方式
一种适用于需要的码的数量相对较少的业务场景:接口地址

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

access_token是公众号的全局唯一接口调用凭据。

获取access_token方法详见:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

具体参数见图(0-2)

微信小程序分享小程序码的生成(带参数)以及参数的获取

另一中适用于使用数量极多的场景。接口地址:
https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

具体参数见图(0-3)

微信小程序分享小程序码的生成(带参数)以及参数的获取

通过scene参数来给页面添加参数

2.前端请求获取小程序码具体实现

因为第二中方法可生成的小程序码极多,所以我们一般会使用这种方法来获取小程序码。
今天主要像大家介绍一下第二种方法。

一般我们主要常用的参数是:scene(如果需要页面参数)、page和width。
page是页面地址,例如:'pages/index'。pages前面不能有斜杠
scene是参数,为字符串。比如要传入一个用户id=1234,要根据这个用户id来给当前页面返回不同的内容,那么scene参数就可以写成"1234",多个参数按一定规则分开,如&符号,第二个参数是recommendId=123则可以这样写"1234&123"。我们来开一下代码:

Page({
  data:{},
  getQrcode(){
   wx.request({
      url: "https://www....com/weixin/get-qrcode",//域名省略
      data: {
       page:"pages/index",
       scene:"1234&123",
       width:300
      },
      header: {
       'content-type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      dataType: 'json',
      success: function(res){
       let qrcodeUrl=res.data;//服务器小程序码地址
      },
      fail: function(){},
      complete: options.complete || function(){}
    })
  }
})

解析:get-qrcode接口是自己小程序后端的接口,前端调用此接口,传入相应参数,后台通过参数请求小程序接口获取到小程序码存到自己服务上,返回小程序码服务器地址。

3.用户扫码进入后的逻辑

我们可以在onload生命周期中处理参数

onLoad:function(options){
 if(options.scene){
  let scene=decodeURIComponent(options.scene);
  //&是我们定义的参数链接方式
  let userId=scene.split("&")[0];
  let recommendId=scene.split('&')[1];
  //其他逻辑处理。。。。。
 }
}

到此这篇关于微信小程序分享小程序码的生成(带参数)以及参数的获取的文章就介绍到这了,更多相关小程序码的生成带参数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
ajax与302响应代码测试
Oct 23 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
js获取页面description的方法
May 21 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
jQuery实现评论模块
Aug 19 jQuery
微信小程序canvas实现签名功能
Jan 19 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
JS实现网页时钟特效
Mar 25 #Javascript
js实现小时钟效果
Mar 25 #Javascript
vue页面更新patch的实现示例
Mar 25 #Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 #Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 #Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 #Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 #Javascript
You might like
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python批量修改图片大小的方法
2018/07/24 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
设计专业自荐信
2014/06/19 职场文书
结婚通知短信大全
2015/04/17 职场文书
未婚证明格式
2015/06/15 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
Python装饰器的练习题
2021/11/23 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js