找回密码
 立即注册

uniapp 生成微信小程序码

匿名  发表于 2023-4-20 09:39:59 阅读模式 打印 上一主题 下一主题
需求是用户经过自己天生的小法式码,给其他用户扫码,跳转到注册页面可自动填写保举人的约请码。

uniapp 天生微信小法式码-1.jpg
第一步建立一个容器,展现图片:
  1. <view style="margin: 49rpx auto;width: 300rpx;height: 300rpx;">
  2.     <image :src="maskData" style="width: 100%;" @longtap="longtap"></image>
  3. </view>
复制代码
首先要获得用户自己的保举码,在缓存里面获得保举码,赋值给数据层。
  1. data() {
  2.                 return {
  3.                         code: '',  //用户的保举码
  4.                         maskData: '' //小法式码信息
  5.                 }
  6. },
  7. onLoad() {
  8.                 // 获得当地缓存的信息,赋值给数据层
  9.                 let user_info = uni.getStorageSync('USER_INFO');//获得缓存的用户信息
  10.                 this.code = user_info.sunicode   //把用户信息里面的保举码,赋值给数据层的变量
  11.                 console.log('需要保举码', this.code) //打印一下,看下能否成功赋值
  12. },
复制代码
然后就是请求办事器,获得到token,获得到token以后再履行天生小法式码的方式:
  1. getData(e) {
  2.                                 //获得accessToken
  3.                                 let that = this;
  4.                                 const APP_ID = ''; // 小法式appid  微信公众平台,开辟治理,开辟设备里面获得
  5.                                 const APP_SECRET = ''; // 小法式app_secret 微信公众平台,开辟治理,开辟设备里面
  6.                                 let access_token = '';   //界说一个用来寄存token的变量
  7.                                 uni.request({
  8.                                         url: "https://api.weixin.qq.com/cgi-bin/token", //牢固链接,不用改
  9.                                         data: {
  10.                                                 grant_type: 'client_credential',
  11.                                                 appid: APP_ID,
  12.                                                 secret: APP_SECRET
  13.                                         },
  14.                                         success: function(res) {
  15.                                                 // console.log('获得accessToken', res)
  16.                                                 access_token = res.data.access_token;
  17.                                                 // 接口B:适用于需要的码数目极多的营业场景 天生的是小法式码
  18.                                                 that.getQrCode(access_token);
  19.                                         }
  20.                                 })
  21. },
  22. //获得小法式码
  23. getQrCode(access_token) {
  24.                                 var that = this;
  25.                                 uni.request({
  26.                                         url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token, //牢固链接,不用改
  27.                                         method: 'POST',
  28.                                         responseType: 'arraybuffer', //设备响应范例
  29.                                         data: {
  30.                                                 path: 'pages/user/register?code=' + that.code, // 必须是已经公布的小法式存在的页面(否则报错),that.code就是约请码
  31.                                                 width: 298,
  32.                                                 auto_color: false, // 自动设置线条色彩,假如色彩仍然是黑色,则说明不倡议设置主色彩
  33.                                                 line_color: {
  34.                                                         "r": "0",
  35.                                                         "g": "0",
  36.                                                         "b": "0"
  37.                                                 } // auto_color 为 false 时生效,利用 rgb 设备色彩
  38.                                         },
  39.                                         success: function(res) {
  40.                                                 // console.log('获得二维码', res)
  41.                                                 that.maskData = "data:image/PNG;BASE64," + uni.arrayBufferToBase64(res
  42.                                                         .data); //以图片的形式展现
  43.                                                 // console.log(that.maskData)
  44.                                         }
  45.                 })
  46. }
复制代码
that.code就是寄存在数据层中的约请码,这个path就是扫码后跳转的页面,当跳转到注册界面的时辰。可以经过onLoad(options),options可以获得URL的参数信息。这时辰options.code即可获得用户的约请码。最初再把options.code与页面上填写约请吗的数据停止绑定即可
留意:前端不能间接用上面的方式自己去天生小法式码,必必要通事背景办事器转一下。也就是说给背景一个token,让背景办事器帮我们去请求,天生小法式码。然后再传给前端。前端再衬着小法式码。上面的代码只能用于测试,不能用于公布上线。

uniapp 天生微信小法式码-2.jpg
界面上实现小法式码以后。要实现一个长按保存图片到系统相册的功用。在图片里面增加了一个长按事务,把图片保存到当地,代码以下:
  1. longtap() {
  2.                                 // 建立随机数
  3.                                 let dataTime = new Date().getTime();
  4.                                 let count = 3000;
  5.                                 let num = Math.floor(Math.random() * count);
  6.                                 let randomNumber = "/G" + dataTime + '' + num;
  7.                                 let that = this;
  8.                                 let base64 = that.maskData.replace(/^data:image\/\w+;BASE64,/, ""); //去掉data:image/png;BASE64,
  9.                                 console.log(base64)
  10.                                 let filePath = wx.env.USER_DATA_PATH + randomNumber + '.png';
  11.                                 uni.getFileSystemManager().writeFile({
  12.                                         filePath: filePath, //建立一个姑且文件名
  13.                                         data: base64, //写入的文本或二进制数据
  14.                                         encoding: 'base64', //写入当前文件的字符编码
  15.                                         success: res => {
  16.                                                 uni.saveImageToPhotosAlbum({
  17.                                                         filePath: filePath,
  18.                                                         success: function(res2) {
  19.                                                                 uni.showToast({
  20.                                                                         title: '保存成功,请从相册挑选再分享',
  21.                                                                         icon: "none",
  22.                                                                         duration: 5000
  23.                                                                 })
  24.                                                         },
  25.                                                         fail: function(err) {
  26.                                                                 // console.log(err.errMsg);
  27.                                                         }
  28.                                                 })
  29.                                         },
  30.                                         fail: err => {
  31.                                                 //console.log(err)
  32.                                         }
  33.                                 })
  34. },
复制代码
如上就完成了uniapp 天生微信小法式码的需求,可是刊行后却是没法利用的,开源字节友爱封装了天生小法式码的功用,在背景天生图片,间接在前端加载即可。代码可前往码云仓库搜索【开源字节】免费获得。
如若转载,请说明出处:开源字节   https://sourcebyte.vip/article/306.html
回复

使用道具

说点什么

您需要登录后才可以回帖 登录 | 立即注册
HOT • 推荐

神回复

站长姓名:王殿武 杭州共生网络科技 创始人 云裂变新零售系统 创始人 飞商人脉对接平台 创始人 同城交友聚会平台 创始人 生活经验分享社区 创始人 合作微信:15924191378(注明来意)