微信小程序开发的坑---获取小程序码

约定不等于承诺〃 2021-09-18 11:40 561阅读 0赞

今日楼主正在搞原生小程序，想搞一下转发功能，而转发功能就需要获取到小程序码，方便别人识别二维码并进入小程序；

起因，楼主按照官网，先获取access\_token;然后拿着access\_token去获取小程序码，奈何经验不足，获取回来的二进制流不会处理。不过，奋斗了一上午，中午知道原因在哪了？下面咱们来讲一下。

### **1、先看获取小程序码的[官方api][api]（共有三种，根据需求自己选择，楼主选不受限制的）** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70][]

### **2、获取小程序的access\_token[官方api][api 1]** ###

### **3、调用获取小程序码的接口 [官方api][api 2]（重点）** ###

console.log('小程序码===接口调用')
            var that = this;
            wx.request({
                url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + this.data.access_token, // c
                method: "POST",
                data: {
                   scene: 'guoguo'
                },
                success: function (res) {
                    console.log(res)
                    let data = wx.arrayBufferToBase64(res.data);
                    that.setData({
                        imgSrc: 'data:image/png;base64,' + data
                    })
                },
                fail: function (res) {
                    console.log('fail')
                }
            })

获取到的结果为下图，图片的二进制流，并且我用wx.arrayBufferToBase64(res.data)去转这个，为啥也转不出来呢???

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70 1][]

**好了，言归正传：如何解决呢？其实很简单，咱们忽略了一点，就是请求的响应类型，默认情况下是字符串的，咱们需要 设置为2进制数组，用数组的语法来处理2进制数据；直接上代码！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70 2][]

一段完整的代码【responseType的类型请看[官方文档][Link 1]】

### **4、那么又有人来问了，转完之后为什么还要在前面加上【data:image/png;base64,】，这又是什么？下面都是干货。。。** ###

翻阅了一些资料才知道，这是在RFC2397中定义的Data URI scheme，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

### 优点：    ###

*  减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。
 *  对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。
 *  对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。
 *  可以把整个多媒体页面保存为一个文件。

### 缺点：    ###

*  无法被重复利用，同一个文档应用多次同一个内容，则需要重复多次，数据量大量增加，增加了下载时间。
 *  无法被独自缓存，所以其包含文档重新加载时，它也要重新加载。
 *  客户端需要重新解码和显示，增加了点消耗。
 *  不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多。
 *  不利于安全软件的过滤，同时也存在一定的安全隐患。

## 什么是Data URI Scheme ##

**《HTTP权威指南》对URI和URL的定义：**

*  URI（Uniform Resource Identifier）:统一资源标识符,服务器资源名被称为统一资源标识符。

*  URL（Uniform Resource Locator）:统一资源定位符，描述了一台特定服务器上某资源的特定位置。

*  URN（Uniform Resource Name）:统一资源名称。

**URL组成：**

协议://主机名[:端口]/ 路径/[:参数] [?查询]#Fragment
    
    protocol :// hostname[:port] / path / [:parameters][?query]#fragment

**URI,URL,URN三者关系：**

URL,URN是URI的子集

![1100338-20180629210051023-770133130.png][]

data URI scheme 允许我们使用内联（inline-code）的方式在网页中包含数据，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。常用于将图片嵌入网页。

## Data URI的格式规范 ##

data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>
    
    1.  data ：协议名称；
    
    2.  [<mime type>] ：可选项，数据类型（image/png、text/plain等）
    
    3.  [;charset=<charset>] ：可选项，源文本的字符集编码方式
    
    4.  [;<encoding>] ：数据编码方式（默认US-ASCII，BASE64两种）
    
    5.  ,<encoded data> ：编码后的数据

### **目前，Data URI scheme支持的类型有：** ###

data:,                            文本数据
    data:text/plain,                    文本数据
    data:text/html,                  HTML代码
    data:text/html;base64,            base64编码的HTML代码
    data:text/css,                    CSS代码
    data:text/css;base64,              base64编码的CSS代码
    data:text/javascript,              Javascript代码
    data:text/javascript;base64,        base64编码的Javascript代码
    data:image/gif;base64,            base64编码的gif图片数据
    data:image/png;base64,            base64编码的png图片数据
    data:image/jpeg;base64,          base64编码的jpeg图片数据
    data:image/x-icon;base64,          base64编码的icon图片数据

data:image/png;base64相当于图片的Data URL，它是利用base64编码把图片数据翻译成标准ASCII字符，等同于<img src="images/image.png"/>

换句话说我们把图像文件的内容内置在 HTML 文件中，节省了一个 HTTP 请求

[api]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70]: /images/20210812/bf738fcbd1714a6887984d418d12541a.png
[api 1]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/getAccessToken.html
[api 2]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/getWXACodeUnlimit.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70 1]: /images/20210812/6bdd6ca48e4e4fa5ae74018624e77db4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70 2]: /images/20210812/1e4e91f6322f499798a819b73bdac9d6.png
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType
[1100338-20180629210051023-770133130.png]: /images/20210812/88072db62a9c4e5caf06b55906383b94.png