今天分享一下如何在[uni-app](https://www.aliyue.net/10258.html)中生成帶有參數的二維碼，主要用于分享和推廣使用。首先分享一下思路和流程，最后總結一下需要注意的事項。 首先看一下效果圖吧。【請忽略圖上的二維碼。】  **需求：** * 1、點擊生成專屬二維碼 * 2、彈出框展示生成的二維碼，附帶當前用戶的個人信息 * 3、點擊保存可以保存到手機相冊 代碼如下： ~~~ <view class="my_list_item" @click="createQrCode"> <view>生成專屬二維碼</view> </view> ~~~ 彈出框： ~~~ <!-- 二維碼彈出層 --> <view class="qrcode" v-if="showQrcode"> <view class="code_content"> <image :src="src2" style="width: 400rpx;height: 400rpx; margin: 10px auto; display: block;" mode="widthFix"></image> <button class="savePoster" @click="savePoster" type="primary">保存到相冊</button> </view> <image src="../../../static/icon_close.png" class="close_code" @click="closeCode"></image> </view> ~~~ 微信官方文檔：[https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.createQRCode.html?](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.createQRCode.html) ??注意： 需要注意的是小程序分享二維碼有三種方法，分別對應不同的需求，具體詳情請看微信官方文檔。 ### 第一步： 獲取 access\_token ~~~ getToken() { uni.showLoading({ title: '加載中', mask: true }) let APPID = '從后臺獲取' let APPSECRET = '從后臺獲取' uni.request({ url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`, method: "GET", }).then((res) => { if (res[1].data.expires_in != 7200) { uni.showToast({ title: "分享失敗，請重新嘗試。", icon: "none", duration: 2000 }) uni.hideLoading(); return } console.log(res) this.shareToken = res[1].data.access_token uni.hideLoading(); }).catch(err => { console.log(err) uni.hideLoading(); }) }, ~~~ 這里需要注意的是，現在我們是在前端寫的，測試的時候設置成為不校驗域名，真是線上版本的時候，是不能這么寫的，因為涉及到機密的數據：APPID 和?APPSECRET，微信是強制不讓在前端做這個。 報錯： https://api.weixin.qq.com不在以下 request 合法域名列表中，請參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html  所以必須在服務器上獲取token 然后再通過后臺的服務器返回 token給前端。（沒有服務器的也不要擔心，云開發可以解決這個難題，寫一個云函數來代替服務器返回token） ### 第二步：將要轉換的頁面和參數轉換為小程序碼 ??： 請求微信的接口的時候請求方式為post，要注意設置相應的數據格式為**arraybuffer**，請求完畢后將數值轉換為base64。 ~~~ getWxCode() { let that = this let userId = uni.getStorageSync('userId') //這里是我要傳遞的參數 let scene='t/qrcode01*id/'+ userId; // 這里設置了渠道和分享人的信息 //let scene= 'id=123&name=jack' 也可以是這樣子的格式 console.log(scene) uni.showLoading({ title: '加載中', mask: true }) uni.request({ url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${this.shareToken}`, method: "POST", data: { scene: scene, page: 'pages/index/index' }, responseType: 'arraybuffer', success: function(res) { uni.hideLoading(); let src = wx.arrayBufferToBase64(res.data); that.src2 = 'data:image/png;base64,' + src; that.showQrcode = true //控制彈出框，展示二維碼 } }) }, ~~~ 注意??????：**通過微信開發文檔將頁面轉換為帶參數的小程序碼（一定要保證當前小程序有線上版本）** 最后連貫起來就是： ~~~ createQrCode() { console.log("生成專屬二維碼") if(this.src2){ this.showQrcode = true } else { this.showQrcode = false this.getToken() } }, ~~~ 頁面中如果獲取傳遞的參數呢？ ~~~ onLoad: function (options) { let scene = decodeURIComponent(options.scene) console.log(scene) }, ~~~ [如何解處理所接收到的 scene](https://www.aliyue.net/10297.html)？所生成的圖片我們[如何保存到手機相冊](https://www.aliyue.net/10302.html)？ 下一篇文章一起分享。