微信小程序 生成携带参数的二维码


Posted in Javascript onOctober 23, 2019

第一步第二步都要必须由后端完成,返回图片地址给前端!!原因??如下图:

微信小程序 生成携带参数的二维码

微信小程序 生成携带参数的二维码

想了解,想尝试的可以看看:

第一步:获取ACCESS_TOKEN

// 这一步 前端可以试试请求玩玩,一般由后端获取access_Token。后端请求微信API接口时会用到这个access_Token,前端

再请求会造成重复请求,会使之前的access_token过期。

第二步:获取小程序二维码并渲染:

小程序API地址

wx.request({
    // url:'https://api.weixin.qq.com/wxa/getwxacode?access_token=' + accessToken, // a
    // url:'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + accessToken, // b
    url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token' + accessToken, // c
    method: "POST",
    data: {
      'path': "/pages/index/index?openid=" + openid, // 携参数openid
      'width': '430'
    },
    responseType: 'arraybuffer',
    success: function (res) {
      console.log(res.data)  // 二维码
      that.setData({
        qrcode: res.data
      })
    },
    fail: function (res) {
      console.log('fail')
    }
  })

最后结果会出现小程序乱码,(这是个二进制流文件):

微信小程序 生成携带参数的二维码

解决?

可以利用微信小程序拓展接口,(后台转二进制流也是可以的,后台获取后,直接保存为图片,然后将图片路径返回给前台)。

wx.arrayBufferToBase64(arrayBuffer) 可以将二进制流转为base64,拓展接口方法地址

// 前端请求完整方法:

wx.request({
    // url:'https://api.weixin.qq.com/wxa/getwxacode?access_token=' + accessToken, // a
    // url:'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + accessToken, // b
    url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token' + accessToken, // c
    method: "POST",
    data: {
      'path': "/pages/index/index?openid=" + openid, // 携参数openid  
      'width': '430'
    },
    responseType: 'arraybuffer', // arraybuffer是以数组的语法处理二进制数据,称为二进制数组。
    success: function (res) {
      let data = wx.arrayBufferToBase64(res.data);
      that.setData({
        qrcode: 'data:image/png;base64,' + data
      })
    },
    fail: function (res) {
      console.log('fail')
    }
  })

wxml文件:

<image src='{{qrcode}}' />

这样二维码就可以出现了,

首页获取二维码参数

onLoad: function (options) {
  // console.log(options.openid) 
  if (options.openid) {
    wx.setStorageSync('openid', options.openid) // 将openid缓存
  }
}

要使用的时候,拿缓存则:let openid = wx.getStorageSync("openid");

如果后端给你传的是base64?

那么恭喜你,本该传图片路径给你...

解决base64图片显示的方法:

var array = wx.base64ToArrayBuffer(res.data.data)
var base64 = wx.arrayBufferToBase64(array)
if (res.statusCode == 200) {
  that.setData({
    qrcode: 'data:image/jpeg;base64,' + base64, // data 为接口返回的base64字符串 
  })
}

附:前端请求获取access_token与小程序二维码(试试)

wx.request({
      // 获取token
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential',
      data: {
        appid: '***', // 小程序appid
        secret: '***' // 小程序秘钥
      },
      success(res) {
        // res.data.access_token 
        wx.request({
          url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + res.data.access_token,
          method: 'POST',
          data: {
            'path': "/pages/index/index",
            "width": 430
          },
          success(res) {
            console.log(res.data)
            // 后台转二进制流,后台获取后,直接保存为图片,然后将图片路径返回给前台
            // 前端转,如上 
          }
        })
      }
    })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
用javascript动态调整iframe高度的代码
Apr 10 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
浅析javascript中的DOM
Mar 01 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
Vuex提升学习篇
Jan 11 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
使用p5.js临摹动态图形
Oct 23 #Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 #Javascript
p5.js临摹动态图形实现方法详解
Oct 23 #Javascript
jQuery实现轮播图源码
Oct 23 #jQuery
JavaScript实现图片轮播特效
Oct 23 #Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 #Javascript
You might like
php 购物车实例(申精)
2009/05/11 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP7变量处理机制修改
2021/03/09 PHP
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
python 获取et和excel的版本号
2009/04/09 Python
TensorFlow变量管理详解
2018/03/10 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
家电业务员岗位职责
2014/03/10 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers