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


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连接access数据库的方法
Nov 17 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
javascript实现日期格式转换
Dec 16 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
原生JavaScript实现留言板
Jan 10 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堆排序(heapsort)练习
2013/11/13 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
通过JAVAScript实现页面自适应
2007/01/19 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python实现简单多线程任务队列
2016/02/27 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python最小二乘法矩阵
2019/01/02 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
企业治理工作自我评价
2013/09/26 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
物流创业计划书
2014/02/01 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
检讨书大全
2015/01/27 职场文书
庆祝教师节主持词
2015/07/06 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL