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


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 相关文章推荐
javascript之学会吝啬 精简代码
Apr 25 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
简单的js表格操作
Sep 24 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
小程序转发探索示例
Feb 19 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 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
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
python 测试实现方法
2008/12/24 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
图解Python变量与赋值
2018/04/03 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
文秘专业个人求职信
2013/12/22 职场文书
丑小鸭教学反思
2014/02/03 职场文书
cf搞笑广告词
2014/03/14 职场文书
计生工作先进事迹
2014/08/15 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android