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


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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
redux处理异步action解决方案
Mar 22 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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图片等比例缩放
2015/07/28 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
jquery简单体验
2007/01/10 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python单元测试简单示例
2018/07/03 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Python实现动态循环输出文字功能
2020/05/07 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
一些PHP的面试题
2015/05/06 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
五一劳动节活动总结
2015/02/09 职场文书
2015年推普周活动总结
2015/03/27 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书