文(wén)章(zhāng)目錄

• 前言
• 一(yī)、自(zì)測版本
• 二、線上(shàng)版本
• 三、測試
• 總結

---

前言

需求：用(yòng)戶通(tōng)過掃描₽ ≠小(xiǎo)程序碼，直接跳(tiào)轉到(dσΩ↕ào)小(xiǎo)程序的(de)登陸頁，并自(zìπ↕)動填充推薦碼

---

一(yī)、自(zì)測版本

用(yòng)于前端自(zì)己測試如(rú)何生(shēng)成小(xiǎo)程序碼

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

onLoad(options) {
    console.log('需要(yào)推薦碼',options)//打印出來(lái)是(shì) {scene: "code%3•Ω​×D2QQ"}
	const scene = options.scene ? decodeURIComponent(options.scene) : ''
	console.log('編譯出來(lái)的(de)scene',scene) //打印出來(lái)是(shì) code=3D2QQ
	this.code = scene.split('=')[1]//打印出來(lái)是(shì) 3D2QQ
	console.log('編譯出來(lái)的(de)推薦碼',this.code)
},

getData(e) {
	//獲取accessToken
	let that = this;
	const APP_ID = 'xxx'; // 小(xiǎo)程序appid
	const APP_SECRET = 'xxxxx'; // 小(xiǎo)程序app_secret
	let access_token = '';
	uni.request({
		url: "https://api.weixin.qq.com/cgi-bin/token"✔<¶, //固定鏈接，不(bù)用(yòng)改
		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：适用(yòng)于需要(yào)的(de)碼數(shù)§ ≥量極多(duō)的(de)業(yè)務場(chǎng)景 生(shēnδ∏g)成的(de)是(shì)小(xiǎo)程序碼
			that.getQrCode(access_token);
		}
	})
},
//獲取二維碼
getQrCode(access_token) {
	var that = this;
	uni.request({
		url: "https://api.weixin.qq.com/wxa/getwxε≤acode?access_token=" + access_token,//固定鏈接，不(bù)用(yòng)改
		method: 'POST',
		responseType: 'arraybuffer', //設置響應類型
		data: {
			path: 'pages/public/login?code=' + that.code, // 必須是(shì)已經發布的(de)小(xiǎo)程±♣♠序存在的(de)頁面（否則報(bào)錯(cuò)）
			width: 298,
			auto_color: false, // 自(zì)動配置線條顔色，如(rú)果顔色依然是(shì)黑(hē∑≤∞™i)色，則說(shuō)明(míng)不(bù)建議(yì)配置主色調
			line_color: {
				"r": "0",
				"g": "0",
				"b": "0"
			} // auto_color 為(wèi) false 時(shí)生(shēng‍←σ↓)效，使用(yòng) rgb 設置顔色
		},
		success: function(res) {
			console.log('獲取二維碼', res)
			that.maskData = "data:image/PNG;BASE64,&# σγ34; + uni.arrayBufferToBase64(res.data);//以圖片的(de)形式展示
		}
	})
}

---

二、線上(shàng)版本

原來(lái)以為(wèi)很(hěn)難的(de)，壓力都(dōu)在前端₹£§♥，等做(zuò)完了(le)，測試體(t↕♦>ǐ)驗版的(de)時(shí)候，發現(xiàn)api.w↓±‌eixin.qq.com域名沒加進去(qù)，結果官λ✘方跟我說(shuō)，不(bù)能(néng)加這(zhè)個(gè)域名ÿ✔→₽0c;原因是(shì)前端不(bù)能(néng)直接用(yòng)上(s£✘♦εhàng)面的(de)方法自(zì)己去(qù)生(shēng)成小(xiǎo) ↓£程序碼，必須要(yào)通(tōng)過後台服務器(qì)₩ ≈轉一(yī)下(xià)

// 給了(le)個(gè)token，後端自(z>∏ì)己去(qù)實現(xiàn)自(zì)測版本中的≥↔(de)操作(zuò)-生(shēng)成小(xiǎo)程序碼，返回 ∞✘×圖片地(dì)址，前端直接展示圖片就(jiù)好(hǎo)了(le)，♠↕'&666
getData(e) {
	this.$api
		.qrcode({
			token: this.token
		})
		.then(res => {
			console.log('我的(de)推薦碼', res)
			this.maskData = res
		})
		.catch(err => {
			this.$api.msg(err)
		});

---

三、測試

截取生(shēng)成小(xiǎo)程序碼的(de)圖片，用(yòng)微(wēiπα ≠)信開(kāi)發者工(gōng)具的(de)“通(tōng)過二維碼編譯”掃碼測試能(néng)★✘≤不(bù)能(néng)拿(ná)到(dào)參數(shù)， δπ£;并填充

---

總結

事(shì)情其實很(hěn)簡單，沒必要(yào)想的(dφ↑φ♣e)太複雜(zá)