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


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 相关文章推荐
jQuery的12招常用技巧分享
Aug 08 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
使用正则替换变量
2007/05/05 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
node.js超时timeout详解
2014/11/26 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python处理csv中的空值方法
2018/06/22 Python
python实现图片压缩代码实例
2019/08/12 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
Keras搭建自编码器操作
2020/07/03 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
档案接收函
2014/01/13 职场文书
图书室标语
2014/06/21 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
校长师德表现自我评价
2015/03/04 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android