本來年底跑路了诵肛，但上上家公司還一直打電話镀虐、發(fā)視頻叫我?guī)兔ψ鍪孪潴。疃嗟木褪巧尚〕绦蚪缑娑S碼供市場部推廣(寫需求也不少，還拖欠一個月工資刮便，蠻過分的)顽腾，總不能一直做重復(fù)工作吧，因此诺核，寫了一個組件抄肖，引入需要生成二維碼的界面，點擊即可生成窖杀，一勞永逸漓摩。
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>
```
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:{}
? ? }
? },
? /**
? * 組件的初始數(shù)據(jù)
? */
? 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('組件數(shù)據(jù):',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 業(yè)務(wù)邏輯
? ? 獲取二維碼卓舵，先要獲取token，需要傳appid和小程序secret膀钠，最開始我采用B接口掏湾，因為數(shù)量無限，且永不過期肿嘲，但是scene長度微信做了限制融击，我需要傳的界面參數(shù)id大于32,只能放棄b接口。
1雳窟、4尊浪、1獲取token
1、4、2 獲取二維碼
? ? 有三個需要注意的地方：
? ? ? ? 1拇涤、token不能放在body里捣作，需要直接在url后面拼接；
? ? ? ? 2工育、重點:responseType要指定為'arraybuffer'虾宇，不然微信返回的二進(jìn)制image組件顯示不了搓彻；
? ? ? ? 3如绸、加上"data:image/PNG;base64,"，然后拼接wx.arrayBufferToBase64返回的base64
2旭贬、使用組件
? ? wxml
? ? qrdata父組件傳值給qrcode組件
js
傳頁面路徑和參數(shù)
收工
? ? 我是iOS怔接，不是正經(jīng)h5，代碼寫的粗糙稀轨，各位輕噴扼脐。。奋刽。簡書的Markdown不太會用瓦侮，各位湊合著看吧。佣谐。肚吏。
