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


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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
jQuery常用选择器详解
Jul 17 jQuery
vue实现随机验证码功能的实例代码
Apr 30 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
Vue将页面导出为图片或者PDF
Aug 17 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+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
javaScript复制功能调用实现方案
2012/12/13 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python二进制文件的转译详解
2019/07/03 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Python中qutip用法示例详解
2020/10/02 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
夏季奶茶店创业计划书
2014/01/16 职场文书
洗发水广告词
2014/03/13 职场文书
《秋游》教学反思
2014/04/24 职场文书
关于环保的标语
2014/06/13 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
意向协议书
2015/01/27 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python