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


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中ajax学习笔记3
Oct 16 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vue-swiper的使用教程
Aug 30 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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生成16位随机数的代码(两种方法)
2014/09/16 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
详解参数传递四种形式
2015/07/21 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue实现购物车的监听
2020/04/20 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
小程序实现录音功能
2020/09/22 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python接入支付宝的实例操作
2020/07/20 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
EJB面试题
2015/07/28 面试题
八项规定整改措施
2014/02/12 职场文书
职业女性的职业规划
2014/03/04 职场文书
表彰大会策划方案
2014/05/13 职场文书
优秀教师个人材料
2014/12/15 职场文书
关于倡议书的范文
2015/04/29 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python