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


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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
使用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递归函数中使用return的注意事项
2014/01/17 PHP
php把数组值转换成键的方法
2015/07/13 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python写日志封装类实例
2015/06/28 Python
python实现SOM算法
2018/02/23 Python
python tkinter组件使用详解
2019/09/16 Python
python编写微信公众号首图思路详解
2019/12/13 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
介绍Java的内部类
2012/10/27 面试题
给排水专业应届生求职信
2013/10/12 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
房屋委托书范本
2014/04/04 职场文书
工作检讨书怎么写
2014/10/10 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL