文章目錄

• 前言
• 一、自測(cè)版本
• 二、線上版本
• 三、測(cè)試
• 總結(jié)

---

前言

需求：用戶通過掃描小程序碼，直接跳轉(zhuǎn)到小程序的登陸頁，并自動(dòng)填充推薦碼

---

一、自測(cè)版本

用于前端自己測(cè)試如何生成小程序碼

<!-- 以圖片的形式展示 -->
<image :src="maskData"></image>

onLoad(options) {
    console.log('需要推薦碼',options)//打印出來是 {scene: "code%3D2QQ"}
	const scene = options.scene ? decodeURIComponent(options.scene) : ''
	console.log('編譯出來的scene',scene) //打印出來是 code=3D2QQ
	this.code = scene.split('=')[1]//打印出來是 3D2QQ
	console.log('編譯出來的推薦碼',this.code)
},

getData(e) {
	//獲取accessToken
	let that = this;
	const APP_ID = 'xxx'; // 小程序appid
	const APP_SECRET = 'xxxxx'; // 小程序app_secret
	let access_token = '';
	uni.request({
		url: "https://api.weixin.qq.com/cgi-bin/token", //固定鏈接，不用改
		data: {
			grant_type: 'client_credential',
			appid: APP_ID,
			secret: APP_SECRET
		},
		success: function(res) {
			console.log('獲取accessToken', res)
			access_token = res.data.access_token;
			// 接口B：適用于需要的碼數(shù)量極多的業(yè)務(wù)場(chǎng)景 生成的是小程序碼
			that.getQrCode(access_token);
		}
	})
},
//獲取二維碼
getQrCode(access_token) {
	var that = this;
	uni.request({
		url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token,//固定鏈接，不用改
		method: 'POST',
		responseType: 'arraybuffer', //設(shè)置響應(yīng)類型
		data: {
			path: 'pages/public/login?code=' + that.code, // 必須是已經(jīng)發(fā)布的小程序存在的頁面（否則報(bào)錯(cuò)）
			width: 298,
			auto_color: false, // 自動(dòng)配置線條顏色，如果顏色依然是黑色，則說明不建議配置主色調(diào)
			line_color: {
				"r": "0",
				"g": "0",
				"b": "0"
			} // auto_color 為 false 時(shí)生效，使用 rgb 設(shè)置顏色
		},
		success: function(res) {
			console.log('獲取二維碼', res)
			that.maskData = "data:image/PNG;BASE64," + uni.arrayBufferToBase64(res.data);//以圖片的形式展示
		}
	})
}

---

二、線上版本

原來以為很難的，壓力都在前端，等做完了，測(cè)試體驗(yàn)版的時(shí)候，發(fā)現(xiàn)api.weixin.qq.com域名沒加進(jìn)去，結(jié)果官方跟我說，不能加這個(gè)域名，原因是前端不能直接用上面的方法自己去生成小程序碼，必須要通過后臺(tái)服務(wù)器轉(zhuǎn)一下

// 給了個(gè)token，后端自己去實(shí)現(xiàn)自測(cè)版本中的操作-生成小程序碼，返回圖片地址，前端直接展示圖片就好了，666
getData(e) {
	this.$api
		.qrcode({
			token: this.token
		})
		.then(res => {
			console.log('我的推薦碼', res)
			this.maskData = res
		})
		.catch(err => {
			this.$api.msg(err)
		});

---

三、測(cè)試

截取生成小程序碼的圖片，用微信開發(fā)者工具的“通過二維碼編譯”掃碼測(cè)試能不能拿到參數(shù)，并填充

---

總結(jié)

事情其實(shí)很簡單，沒必要想的太復(fù)雜