小程序生成二维码并且把二进制流转换图片

### 小程序生成二维码并且把二进制流转换图片 #### 背景与目标 在小程序开发过程中，为了方便用户分享或者记录某些特定的信息，经常需要生成二维码。此外，生成的二维码通常需要以图片的形式展示给用户。本文将详细介绍如何在微信小程序环境中实现这一功能：即生成带有特定参数（如场景值）的二维码，并将其转换为图片格式展示。 #### 关键技术点 1. **获取Access Token** - Access Token是调用微信接口所需的凭证。 - 需要通过AppID和AppSecret向微信服务器发起请求来获取。 2. **创建二维码** - 使用Access Token调用`getwxacodeunlimit`接口来创建不限制扫描次数的二维码。 - 设置必要的参数，例如场景值、页面路径等。 3. **处理二进制数据** - 从服务器返回的是一个二进制流，需要将其转换为Base64编码以便进一步操作。 - 在小程序环境中，可以使用`wx.arrayBufferToBase64`方法完成转换。 4. **显示二维码图片** - 通过将Base64编码的数据设置为图片的`src`属性来显示二维码图片。 #### 详细步骤与代码解析 **第一步：获取Access Token** 需要通过小程序的AppID和AppSecret向微信服务器发起请求获取Access Token： ```javascript var appid = "wxf03b6b5aaedfa785"; var secret = "158553c156bab018999a1233cf5e9671"; var url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret; wx.request({ url: url, method: 'GET', success: function (res) { var access_token = res.data.access_token; } }); ``` **第二步：创建二维码** 使用获取到的Access Token调用`getwxacodeunlimit`接口来创建二维码： ```javascript var scene = '85688'; // 场景值 var urls = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + access_token; wx.request({ url: urls, method: 'POST', responseType: 'arraybuffer', // 指定响应类型为二进制数据 data: { scene: scene, page: "pages/home/shopDesc/shopDesc", // 需要跳转的页面路径 width: 430, // 二维码的宽度，单位像素 auto_color: true, // 是否自动颜色配置 is_hyaline: false // 是否透明底色 }, header: { 'content-type': 'application/json;charset=utf-8' }, success: function (res) { let bin64 = wx.arrayBufferToBase64(res.data); that.setData({ each: bin64 }); } }); ``` **第三步：处理二进制数据并显示二维码图片** 获取到的二维码数据是二进制流，需要转换为Base64编码以便在小程序中显示： ```javascript let bin64 = wx.arrayBufferToBase64(res.data); // 转换为Base64编码 that.setData({ each: bin64 }); // 保存数据至组件实例 <!-- 在wxml文件中 --> <image src="data:image/png;base64,{{each}}" mode=""></image> ``` 以上步骤详细展示了如何在微信小程序中实现二维码的生成及展示功能。需要注意的是，在实际开发中还需要考虑到异常处理以及权限验证等问题。此外，对于不同的应用场景，可能还需要调整二维码中的参数以满足特定需求。