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

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

需求场景


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


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


技术实现分析


1dc618a0ed9580ce8bfa6facb208c08f.png


重点代码如下:


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']
          }


效果如下:


66ba272a0bfc97be54a5fa679e3d5482.png



相关文章
|
1月前
|
关系型数据库 MySQL Java
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
51 0
|
6天前
|
小程序 前端开发 数据可视化
作为一个前端小白,我竟然搞定了一个小程序的交付
作为一名刚毕业的前端码农,今年毕业后就加入了一家初创公司。入职不久便接到了一个小程序开发项目,客户特别强调必须使用小程序原生语言进行开发。由于时间紧迫而合适的后端开发者暂时还没到位,老板决定让我边学边做,承担起整个项目的前后端开发工作。对于初出茅庐的我来说,这无疑是一个巨大的挑战。不仅要掌握一门新的编程语言,还要学习数据库设计、服务器部署等一系列后端技术,任务艰巨。正当我为此感到头疼时,一位前辈向我推荐了极态云。经过一番调研后发现,它简直就是为像我这样缺乏后端经验但又急需快速完成项目的人量身定做的解决方案!
作为一个前端小白,我竟然搞定了一个小程序的交付
|
6天前
|
小程序 前端开发 算法
|
1月前
|
前端开发 JavaScript 关系型数据库
前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用
这篇文章介绍了一个名为Vue3Admin的全栈后台应用,前端基于SoybeanAdmin二次开发,后端基于Nest.js。主要使用了Vue3.5、AntDesignVue、UnoCSS、Pinia等前端技术栈,以及Nest.js、PostgreSQL、Prisma等后端技术栈。文章详细描述了系统的功能设计,包括动态国际化语言配置、登录用户操作日志、用户和角色权限映射、动态路由菜单、消息公告发布及前端业务功能等。同时,也提供了项目运行所需的环境和依赖,以及如何拉取代码、安装依赖和启动项目的方法。最后,文章展示了项目的演示图,并对项目进行了总结,指出项目未经严格测试,仅供学习交流使用。
前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用
|
14天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
17天前
|
移动开发 小程序 前端开发
小程序的前端插件都有哪些?
【10月更文挑战第16天】小程序的前端插件都有哪些?
33 1
|
21天前
|
前端开发 JavaScript API
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
61 3
|
1月前
|
小程序 Java
小程序访问java后台失败解决方案
小程序访问java后台失败解决方案
42 2
|
1月前
|
小程序 JavaScript Java
小程序访问java后台
小程序访问java后台
26 1
|
1月前
|
Java 测试技术 Maven
编写一个java后台
编写一个java后台
12 1