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



相关文章
|
13天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
133 12
|
30天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
320 1
|
30天前
|
JSON 小程序 数据格式
微信小程序默认的文字内容在左上角怎么办?带你0基础快速了解skyline渲染模式。
本文主要介绍微信小程序开发中遇到的问题及其解决方法。问题通常由微信小程序自带的Skyline渲染模式引起,而非代码编写错误。解决步骤包括:1. 找到全局配置文件app.json;2. 去掉相关配置项;3. 修改后的配置示例。通过这些步骤可以有效解决文字内容顶格或覆盖的问题。文中还提供了进一步了解Skyline渲染模式的链接,帮助开发者深入理解其原理和应用。
86 1
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
3月前
|
小程序 前端开发 算法
|
3月前
|
小程序 前端开发 数据可视化
作为一个前端小白,我竟然搞定了一个小程序的交付
作为一名刚毕业的前端码农,今年毕业后就加入了一家初创公司。入职不久便接到了一个小程序开发项目,客户特别强调必须使用小程序原生语言进行开发。由于时间紧迫而合适的后端开发者暂时还没到位,老板决定让我边学边做,承担起整个项目的前后端开发工作。对于初出茅庐的我来说,这无疑是一个巨大的挑战。不仅要掌握一门新的编程语言,还要学习数据库设计、服务器部署等一系列后端技术,任务艰巨。正当我为此感到头疼时,一位前辈向我推荐了极态云。经过一番调研后发现,它简直就是为像我这样缺乏后端经验但又急需快速完成项目的人量身定做的解决方案!
作为一个前端小白,我竟然搞定了一个小程序的交付
|
3月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
65 1
|
4月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
4月前
|
移动开发 小程序 前端开发
小程序的前端插件都有哪些?
【10月更文挑战第16天】小程序的前端插件都有哪些?
78 1
|
4月前
|
前端开发 JavaScript API
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
147 3

热门文章

最新文章

  • 1
    【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
  • 2
    基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
  • 3
    uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
  • 4
    打造无缝社交体验:多平台适配,开启线上线下陪玩系统小程序社交新时代
  • 5
    10分钟搭建微信小程序ecs【2月更文挑战第07天】
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    详解智能编码在前端研发的创新应用
  • 10
    巧用通义灵码,提升前端研发效率