文章目錄

• • 需求場景
  • 技術實現分析
  • java后臺restTemplate生成二小程序維碼
  • 前端渲染
  • app.js
  • 效果如下:

需求場景

用戶A登錄小程序，在我的頁面，點擊推薦新客戶，需要生成小程序二維碼攜帶用戶A的id；
用戶B掃描上面的二維碼，即可進入小程序，根據是否注冊過，將用戶B和用戶A的id建立推薦關系。

技術實現分析

重點代碼如下:

java后臺restTemplate生成二小程序維碼

@RequestMapping("/getQrCode")@ResponseBodypublic String getAppQrCode(@RequestParam(name="recomReferorId") String recomReferorId, HttpServletResponse response) throws Exception {RestTemplate restTemplate = new RestTemplate();SimpleClientHttpRequestFactory requestFactory = new SimpleClientHttpRequestFactory();// 設置代理，因為我們公司訪問外網需要代理，所以設置代理，如果沒有這個要求，就不用設置restTemplate.setRequestFactory(requestFactory);// 獲取tokenString token = businessWxService.getAccessToken();// 配置參數Map<String, Object> param = new HashMap<>(5);param.put("scene", "clientId="+recomReferorId);param.put("page", "pages/index/index");param.put("width", 247);param.put("is_hyaline", true);String url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + token;ResponseEntity<byte[]> responseEntity = restTemplate.postForEntity(url, JSON.toJSONString(param), byte[].class);byte[] result = responseEntity.getBody();String s = Base64.getEncoder().encodeToString(result);return s;}

前端渲染

生成二維碼頁js

// 獲取小程序碼（接口）getQrCode() {app.func.reqGet('/static/wx/getQrCode', {recomReferorId: wx.getStorageSync('userInfo').wechatId}, res => {if (res.result === 'SUCCEED') {this.setData({qrcode: `data:image/PNG;base64,${res.data}`})}})},

二維碼頁面

<view class="share-container"><view class="qrcode"><image src="{{qrcode}}" mode="widthFix"></image></view><button class="btn" type="primary" open-type="share">立即分享</button> </view>

app.js

//app.jsimport { TOKENISSURE } from "./config/config";var http = require('http.js')App({globalData: {token: null,userInfo: null,hasUserInfo: false,userInfo1: null,lotteryTitle: null,recomReferorId: '',firstLoginPage: ''},onLaunch(options) {console.log(options, 'options-----------------')this.globalData.firstLoginPage = options.pathtry {this.globalData.token = wx.getStorageSync('token')this.globalData.userInfo = wx.getStorageSync('userInfo')if (this.globalData.token) {this.globalData.hasUserInfo = true// 每次進入小程序需要調一下，后臺記錄使用this.getCurrentPageUrl()} else {if(options.scene === 1047) {// 掃小程序碼進入let queryStr = options.query.sceneif (queryStr) {let query = {}decodeURIComponent(queryStr).split('&').forEach(item => {let arr = item.split('=')query[arr[0]] = arr[1]})this.globalData.recomReferorId = query['clientId']}} else {// 沒登陸跳轉登陸頁面if (options.query.clientId) {// 存在邀請 clientIdthis.globalData.recomReferorId = options.query.clientId}}wx.navigateTo({ url: '/pages/login/index' })}} catch (e) {console.log(e)}// 展示本地存儲能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)},// 獲取當頁面url地址getCurrentPageUrl: function () {wx.showLoading({title: '數據加載...',mask: true,})let data = {clientId: wx.getStorageSync('userInfo').wechatId,enterPageUrl: `/${this.globalData.firstLoginPage}`,enterPageDecri: '飛碟汽車天文館',providerType: 1,}wx.request({url: http.rootUrl + '/business_enter_record/add?sign=1&timestamp=' + Date.parse(new Date()),data: data,method: 'POST',header: {'Content-Type': 'application/json','X-Request-Id': new Date().getTime(),'X-Token-Issuer': TOKENISSURE,Authorization: wx.getStorageSync('token'),},success: function (res) {if (res.data.result == 'SUCCEED') {wx.hideLoading()return typeof cb == 'function' && cb(res.data)} else {wx.hideLoading()return typeof cb == 'function' && cb(false)}},fail: function () {wx.hideLoading()return typeof cb == 'function' && cb(false)},})},GetUserToken: function () {return new Promise((resolve) => {//console.log("this.globalData.userInfo.userId", this.globalData.userInfo.userId)wx.request({url: 'https://nms.wuzheng.com.cn/common/xcx/getToken',method: 'GET',data: {userId:wx.getStorageSync('userInfo').wechatId,},success: (res) => {//console.log("2", res);this.globalData.token = res.data.datareturn resolve(res.data.data)},fail: function (res) {return res},})})},GetSystemInfo: function () {return new Promise((resolve) => {wx.request({url: 'https://nms.wuzheng.com.cn/common/xcx/systemInfo',method: 'GET',success: (res) => {this.globalData.lotteryTitle = res.data.data.lotteryTitlewx.setStorage({key: 'programNotice',data: res.data.data.programNotice,success: function () {return resolve(res.data.data)},})},})})},// 這里配置我們需要的方法func: {reqGet: http.reqGet,reqPost: http.reqPost,postQuery: http.postQuery,formatRichText: http.formatRichText,}, })

關鍵代碼:

if(options.scene === 1047) {// 掃小程序碼進入let queryStr = options.query.sceneif (queryStr) {let query = {}decodeURIComponent(queryStr).split('&').forEach(item => {let arr = item.split('=')query[arr[0]] = arr[1]})this.globalData.recomReferorId = query['clientId']}

效果如下:

---

完

總結

以上是生活随笔為你收集整理的java后台restTemplate生成二小程序维码，前端渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。