java后台restTemplate生成二小程序维码,前端渲染

简介: java后台restTemplate生成二小程序维码,前端渲染


需求场景

用户A登录小程序,在我的页面,点击推荐新客户,需要生成小程序二维码携带用户A的id;

用户B扫描上面的二维码,即可进入小程序,根据是否注册过,将用户B和用户A的id建立推荐关系。

技术实现分析

重点代码如下:

java后台restTemplate生成二小程序维码

@RequestMapping("/getQrCode")
    @ResponseBody
    public String getAppQrCode(@RequestParam(name="recomReferorId") String recomReferorId, HttpServletResponse response) throws Exception {
        RestTemplate restTemplate = new RestTemplate();
        SimpleClientHttpRequestFactory requestFactory = new SimpleClientHttpRequestFactory();
        // 设置代理,因为我们公司访问外网需要代理,所以设置代理,如果没有这个要求,就不用设置
        restTemplate.setRequestFactory(requestFactory);
        // 获取token
        String 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.js
import { 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.path
    try {
      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.scene
          if (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) {
            // 存在邀请 clientId
            this.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.data
          return 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.lotteryTitle
          wx.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.scene
          if (queryStr) {
            let query = {}
            decodeURIComponent(queryStr).split('&').forEach(item => {
              let arr = item.split('=')
              query[arr[0]] = arr[1]
            })
            this.globalData.recomReferorId = query['clientId']
          }



相关文章
|
2月前
|
小程序
小程序提交数据到后台做加法运算
小程序提交数据到后台做加法运算
32 0
|
1月前
|
小程序 前端开发 算法
|
1月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
43 1
|
2月前
|
小程序 Java
小程序访问java后台失败解决方案
小程序访问java后台失败解决方案
57 2
|
2月前
|
小程序 JavaScript Java
小程序访问java后台
小程序访问java后台
31 1
|
2月前
|
小程序 安全 数据库连接
为什么已经提交的小程序无法连接后台服务?
【10月更文挑战第17天】为什么已经提交的小程序无法连接后台服务?
118 0
|
3月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
3月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
2月前
|
小程序
java--微信小程序发送模板消息
java--微信小程序发送模板消息
144 0
|
2月前
|
小程序 前端开发 Java
java 生成小程序二维码
java 生成小程序二维码
32 0