本来年底跑路了，但上上家公司还一直打电话、发视频叫我帮忙做事，最多的就是生成小程序界面二维码供市场部推广(写需求也不少，还拖欠一个月工资，蛮过分的)，总不能一直做重复工作吧，因此，写了一个组件，引入需要生成二维码的界面，点击即可生成，一劳永逸。
效果图
1、二维码生成组件
1、1在工程根目录新建component文件夹，然后右键新建Component
目录结构
1、2 全局引入,注意路径
引入组件
1、3 废话不多说，直接上代码
```
<!--components/qrcode-tool.wxml-->
<view class="mainView" hidden="{{hidden}}">
<image class="qrimg" src="{{qrimg}}" mode="scaleToFill" hidden="{{!flag}}"></image>
<button type="warn" class="createBtn" bindtap="getToken">{{flag ? '完成' : '生成二维码'}}</button>
</view>
```
wxml
wxss
```
.mainView{
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.5);
}
.qrimg{
position: fixed;
top: 10vh;
margin:auto;
left: 0;
right: 0;
width: 200px;
height: 200px;
}
.createBtn{
position: fixed;
bottom: 5vh;
margin-left: 10vw;
margin-right: 10vw;
height: 50px;
width: 80%;
background-color: #00808D;
text-align: center;
}
```
js
```
// components/qrcode-tool.js
const config = require('../utils/config.js');
Component({
/**
* 组件的属性列表
*/
properties: {
qrdata: {
type:Object,
value:{}
}
},
/**
* 组件的初始数据
*/
data: {
hidden:false,
qrimg:'',
flag:false
},
/**
* 组件的方法列表
*/
methods: {
getToken: function () {
if(this.data.flag){
this.setData({hidden:true});
return;
}
wx.showLoading({
title: '正在生成中...',
})
let domain = 'https://api.weixin.qq.com/cgi-bin/token';
let appid = config.appId();
let appsecrt = config.appSecr();
var param = {};
param['grant_type'] = 'client_credential';
param['appid'] = appid;
param['secret'] = appsecrt;
var that = this;
wx.request({
url: domain,
data: param,
method: 'get',
success: function (res) {
console.log('获取token成功,', res);
that.getQRcode(res.data.access_token);
},
fail: function (fail) {
console.log('获取token失败,', fail);
wx.hideLoading()
wx.showModal({
title: '失败',
content: '获取tokeo失败',
})
}
})
},
getQRcode: function (token) {
//var param = {'scene':this.qrdata.pa};
//console.log('token:',token);
//console.log('组件数据:',JSON.stringify(this.data.qrdata));
let domian = 'https://api.weixin.qq.com/wxa/getwxacode?access_token=' + token; //token要直接拼，不然报41001错误
var param = {};
//param['access_token'] = token;
//param['scene'] = decodeURIComponent(this.data.qrdata.id);
//param['page'] = this.data.qrdata.path;
param['path'] = this.data.qrdata.path + '?' + this.data.qrdata.id
//console.log('param:',JSON.stringify(param));
var that = this;
wx.request({
url: domian,
data: param,
method: 'POST',
responseType: 'arraybuffer',
success: function(res){
wx.hideLoading()
console.log('获取小程序二维码成功');
that.setData({
flag:true,
qrimg: "data:image/PNG;base64," + wx.arrayBufferToBase64(res.data)
})
},
fail: function(fail){
console.log('获取小程序二维码失败',fail);
wx.hideLoading()
wx.showModal({
title: '失败',
content: '请求二维码',
})
}
})
}
}
})
```
1、4 业务逻辑
获取二维码，先要获取token，需要传appid和小程序secret，最开始我采用B接口，因为数量无限，且永不过期，但是scene长度微信做了限制，我需要传的界面参数id大于32,只能放弃b接口。
1、4、1获取token
获取token
1、4、2 获取二维码
有三个需要注意的地方：
1、token不能放在body里，需要直接在url后面拼接；
2、重点:responseType要指定为'arraybuffer'，不然微信返回的二进制image组件显示不了；
3、加上"data:image/PNG;base64,"，然后拼接wx.arrayBufferToBase64返回的base64
获取二维码
2、使用组件
wxml
qrdata父组件传值给qrcode组件
wxml
js
传页面路径和参数
js
收工
我是iOS，不是正经h5，代码写的粗糙，各位轻喷。。。简书的Markdown不太会用，各位凑合着看吧。。。
网友评论