微信小程序显示二维码?

简介: 微信小程序显示二维码?

wxml

<canvas style="width: 100%;height: 100%;margin-left: 20%;" id="Canvase" type="2d"></canvas>

js

// pages/code/code.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    code: '',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var that = this
      wx.request({
        url: '接口数据', //仅为示例,并非真实的接口地址
        data: {
          userid: 36,
          scienceid: 1,
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          console.log(res);
          const fs = wx.getFileSystemManager();
          var codeimg = wx.env.USER_DATA_PATH + '/' + '.jpg';
          fs.writeFile({
            filePath: codeimg,
            data: res.data.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)
            encoding: 'base64',
            success: () => {
              // console.log(codeimg);
              wx.createSelectorQuery().select('#Canvase').fields({
                  node: true,
                  size: true
                })
                .exec((res) => {
                  console.log(res);
                  let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文              
                  let canvas = res[0].node;
                  const bg = canvas.createImage();
                  //背景图片
                  const image = canvas.createImage();
                  // 图片高清化
                  const dpr = wx.getSystemInfoSync().pixelRatio;
                  res[0].node.width = res[0].node.width * dpr;
                  res[0].node.height = res[0].node.height * dpr;
                  // 设置背景图片src
                  image.src = 'https://pic.imgdb.cn/item/647d31011ddac507cc160e75.jpg'
                  bg.src = codeimg;
                  image.onload = function () {
                    ctx.drawImage(image, 0, 0, 289, 370)
                    ctx.drawImage(bg, 76, 175, 140, 140);
                  }
                  // 将图片保存需要的实例,不写保存可以不需要
                  that.setData({
                    ctx: canvas
                  })  
                })
            }
          })
        }
      })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})
相关文章
|
5月前
|
Java API
wxid添加微信好友工具,免费微信wxid转换器二维码,jar实现仅供学习参考
本项目实现微信ID与wxid的转换及二维码生成功能,核心逻辑基于ZXing库完成QR编码,支持文件批量导入导出。
|
5月前
|
编解码 Java
wxid加微信好友工具,二维码转换工具,微信号转wxid插件【仅供学习参考】
本工具基于JAVA实现微信ID转换功能,支持wxid、微信号与二维码之间的相互转换。开发中使用ZXing库(版本3.5.1)完成二维码编解码,并设计核心类`WxidConverter`实现关键转换逻辑。
|
小程序 JavaScript
小程序生成二维码
小程序生成二维码
342 11
|
算法 小程序 Java
java制作海报三:获取微信二维码详情,并改变大小,合成到海报(另一张图片)上
这篇文章介绍了如何使用Java获取微信小程序的二维码,并将其调整大小后合成到海报(另一张图片)上。
243 0
|
小程序 前端开发 Java
java 生成小程序二维码
java 生成小程序二维码
233 0
|
小程序 数据挖掘 UED
餐饮店小程序开发定制桌边二维码点餐系统
随着技术不断进步,各行各业都在使用新工具来提高效率和服务质量。餐饮业也不例外。餐饮点餐小程序系统是基于微信公众平台开发的在线点餐方式。顾客可以通过手机微信扫描餐桌上的二维码,进入餐厅的点餐小程序,选择菜品、数量和口味,直接完成点餐。点餐系统会自动保存并发送给厨房,避免了传统手工点餐容易出错的问题。
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
792 0
|
小程序 JavaScript
微信小程序长按识别图片二维码功能
微信小程序长按识别图片二维码功能
1601 0
|
开发框架 小程序 .NET
C#动态生成带参数的小程序二维码
C#动态生成带参数的小程序二维码