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


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学习笔记7 原型链的原理
Jan 11 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
JsRender实用入门教程
Oct 31 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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 xml-rpc远程调用
2008/12/19 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
青春奉献演讲稿
2014/05/08 职场文书
门店业绩提升方案
2014/06/08 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
生日宴会祝酒词
2015/08/10 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs