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


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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
python简单实现基数排序算法
2015/05/16 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python使用Tesseract库识别验证
2018/03/21 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
详解python中init方法和随机数方法
2019/03/13 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python加载自定义词典实例
2019/12/06 Python
python识别验证码图片实例详解
2020/02/17 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
历史学专业推荐信
2013/11/06 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
地球一小时活动总结
2015/02/27 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
务工证明怎么写
2015/06/18 职场文书
PHP解决高并发问题
2021/04/01 PHP