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


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 替换Html标签实现代码
Oct 14 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
javascript清空table表格的方法
May 14 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP面向对象概念
2011/11/06 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
Python中函数的用法实例教程
2014/09/08 Python
Python中zfill()方法的使用教程
2015/05/20 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
会计专业个人自我鉴定
2014/03/21 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
世界读书日的活动方案
2014/08/20 职场文书
户外活动总结
2015/02/04 职场文书
入队仪式主持词
2015/07/04 职场文书
技术转让协议书
2016/03/19 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL