uniapp 生成微信小程序码

article/2025/10/25 16:08:15

第一步创建一个容器,展示图片

<view style="margin: 49rpx auto;width: 300rpx;height: 300rpx;"><image :src="maskData" style="width: 100%;" @longtap="longtap"></image>
</view>

功能是,用户生成小程序码,可以邀请其他用户注册。用户通过自己生成的小程序码,给其他用户扫码,跳转到注册页面可自动填写推荐人的邀请码。

数据层的变量:

data() {return {code: '',  //用户的推荐码maskData: '' //小程序码信息}},

所以首先要获取用户自己的推荐码,在缓存里面获取推荐码,赋值给数据层。

onLoad() {// 获取本地缓存的信息,赋值给数据层let user_info = uni.getStorageSync('USER_INFO');//获取缓存的用户信息this.code = user_info.sunicode   //把用户信息里面的推荐码,赋值给数据层的变量console.log('需要推荐码', this.code) //打印一下,看下是否成功赋值},

核心代码,生成小程序码,就是先请求服务器,获取到token,获取到token之后再执行生成小程序码的方法:

getData(e) {//获取accessTokenlet that = this;const APP_ID = ''; // 小程序appid  微信公众平台,开发管理,开发设置里面获取const APP_SECRET = ''; // 小程序app_secret 微信公众平台,开发管理,开发设置里面let access_token = '';   //定义一个用来存放token的变量uni.request({url: "https://api.weixin.qq.com/cgi-bin/token", //固定链接,不用改data: {grant_type: 'client_credential',appid: APP_ID,secret: APP_SECRET},success: function(res) {// console.log('获取accessToken', res)access_token = res.data.access_token;// 接口B:适用于需要的码数量极多的业务场景 生成的是小程序码that.getQrCode(access_token);}})},//获取小程序码getQrCode(access_token) {var that = this;uni.request({url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token, //固定链接,不用改method: 'POST',responseType: 'arraybuffer', //设置响应类型data: {path: 'pages/user/register?code=' + that.code, // 必须是已经发布的小程序存在的页面(否则报错),that.code就是邀请码width: 298,auto_color: false, // 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调line_color: {"r": "0","g": "0","b": "0"} // auto_color 为 false 时生效,使用 rgb 设置颜色},success: function(res) {// console.log('获取二维码', res)that.maskData = "data:image/PNG;BASE64," + uni.arrayBufferToBase64(res.data); //以图片的形式展示// console.log(that.maskData)}})}

that.code就是存放在数据层中的邀请码,这个path就是扫码后跳转的页面,当跳转到注册界面的时候。可以通过onLoad(options),options可以获取URL的参数信息。这时候options.code即可获取用户的邀请码。最后再把options.code与页面上填写邀请吗的数据进行绑定即可。如下:

data: {path: 'pages/user/register?code=' + that.code, // 必须是已经发布的小程序存在的页面(否则报错),that.code就是邀请码},

 注册界面的onload:

onLoad(options) {console.log(options.code)this.form[4].value = options.code},

注意:前端不能直接用上面的方法自己去生成小程序码,必须要通过后台服务器转一下。也就是说给后台一个token,让后台服务器帮我们去请求,生成小程序码。然后再传给前端。前端在渲染小程序码。上面的代码只能用于测试,不能用于发布上线。

界面上实现小程序码之后。要实现一个长按保存图片到系统相册的功能。

 之前在图片里面添加了一个长按事件,把图片保存到本地,代码如下:

因为业务需求,保存下来的图片名称不能相同,也就是同一张图片是不能有覆盖效果,所以能个随机数,确保文件名不同。

longtap() {// 创建随机数let dataTime = new Date().getTime();let count = 3000;let num = Math.floor(Math.random() * count);let randomNumber = "/G" + dataTime + '' + num;let that = this;let base64 = that.maskData.replace(/^data:image\/\w+;BASE64,/, ""); //去掉data:image/png;BASE64,console.log(base64)let filePath = wx.env.USER_DATA_PATH + randomNumber + '.png';uni.getFileSystemManager().writeFile({filePath: filePath, //创建一个临时文件名data: base64, //写入的文本或二进制数据encoding: 'base64', //写入当前文件的字符编码success: res => {uni.saveImageToPhotosAlbum({filePath: filePath,success: function(res2) {uni.showToast({title: '保存成功,请从相册选择再分享',icon: "none",duration: 5000})},fail: function(err) {// console.log(err.errMsg);}})},fail: err => {//console.log(err)}})},

http://chatgpt.dhexx.cn/article/W7TMOuRf.shtml

相关文章

微信小程序的推广思路与方法,详细思路解析

简单来说&#xff0c;小程序就是微信上的APP&#xff0c;它内生于微信&#xff0c;坐享10亿流量&#xff0c;而且不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”的梦想&#xff0c;用户扫一扫或者搜一下即可打开应用。今天&#xff0c;我们就来看一看微信小…

替你发优惠券,为了推广小程序微信真是豁出去了

微信iOS 6.6.6版本上线了! 虽然App Store的新功能里,只写了“可保留未编辑完的朋友圈”。但心细如发的道爷依然发现几大重要更新,解决的痛点,必将让10亿用户为之小嗨一把,小程序也迎来了新的春天!另外,安卓版已经正式上线了! 微趋道,就是小程序 本次主要更新了以下内…

小程序介绍

1. 小程序介绍 微信小程序&#xff0c;简称小程序&#xff0c;英文名 Mini Program &#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现 了应用“触手可及”的梦想&#xff0c;用户扫一扫或搜一下即可打开应用 1.1 为什么是微信小程序&#xff1f; 微信有海…

小程序快速推广方法,你知道多少?

很多人觉得小程序的风口已经过去&#xff0c;其实不然&#xff01;就从这次疫情看&#xff0c;很多平时只做线下的大型餐饮店&#xff0c;都开始上线外卖平台&#xff0c;如果品牌具有一定规模的话&#xff0c;比起依托第三方的外卖平台&#xff0c;肯定是开发自己的小程序性价…

视频号推广小程序是什么;助你快速引流变现;丨国仁网络资讯

目前微信已经退出了视频号推广小程序,但对于大多数创作者来说还不知道它是干啥的。视频号推广小程序可以比喻视频号“dou+”, 它是腾讯官方专门为视频号博主打造的,以推广视频号内容为主,主要针对三个方向:基础定向投放,可以限定性别、年龄、地域的人群;投放指定账号的粉…

如何快速推广微信小程序,并通过微信小程序赚取睡后收入

微信小程序的搭建&#xff1a; 1、使用邮箱注册微信小程序帐号。 2、完善小程序主体。个人认为小程序的名称以及图标很重要。名称要言简意干&#xff0c;让用户根据名称就能知道小程序是做什么的。图标要简洁、清爽&#xff0c;并且符合主题。 3、开发小程序。自己具有开发能…

获取小程序appid和path教程详细版

打开你需要获取appid的小程序&#xff0c;这里以“饿了么”小程序为例&#xff0c;然后点击右上角的图标 以下为小程序path获取方法 登录你的小程序的微信公众平台https://mp.weixin.qq.com点击右上角的工具&#xff0c;进入后是下面的页面 然后用你输入的微信号微信浏览“饿了…

微信小程序实现展示图片(图片推广小程序可以使用)

实现效果图&#xff1a; 首先就是这个封面是一些图片展示界面&#xff0c;后台返回的都是图片。然后根据返回数据数组的下标进行分类&#xff0c;第一排只显示数组为1&#xff0c;4&#xff0c;7一次类推&#xff0c;第二列是2&#xff0c;5&#xff0c;8的index&#xff0c;第…

微信公众号如何推广自己的小程序以及操作步骤

微信公众号如何推广自己的小程序以及操作步骤 在使用微信公众号推广自己的小程序之前&#xff0c;首先要关联您的小程序。操作步骤如下&#xff1a; 微信公众号如何绑定自己的小程序的第一步&#xff0c;点微信公众号后台的左侧里有个小程序管理&#xff0c; 第二步&#xff…

如何在大学推广小程序?

如何在大学推广你的小程序&#xff1f; 最近是开学季&#xff0c;对于小程序运营者来说&#xff0c;这又是小程序推广的一个较佳时期。为什么这样说呢&#xff1f;在这之前&#xff0c;我们先来看一句话&#xff1a;利用用户关系链进行小程序的裂变传播能够最大程度曝光小程序。…

小程序推广有几种方式?小程序运营有什么步骤?

目前&#xff0c;微信小程序已经成为越来越多企业进行拓客推广的方式&#xff0c;但如何推广、如何引流成为不少企业需要思考的难题。小程序使用便捷&#xff0c;但也需要了解小程序的特性及推广方式&#xff0c;才能更好地进行运营。小程序有哪些入口&#xff1f;企业可以通过…

小程序推广方案有哪些?

小程序推广方案有哪些&#xff1f;如今&#xff0c;从事小程序推广领域的人越来越多。对于新人来说&#xff0c;有必要掌握的小程序推广方案有哪些&#xff1f;这里有四个。 1.做线下宣传策划 如果商店有预算&#xff0c;可以考虑在各种线下场景投放广告&#xff0c;购买广告…

小程序如何推广?这里有5招

如何推广这个小程序&#xff1f;我坚信有很多朋友刚刚建立了自己的小程序&#xff0c;不知道如何推广这个小程序。今天小将教你一些更常见和实用的小程序如何推广&#xff0c;你为什么不根据自己的具体情况选择应用程序哦&#xff01; 小程序如何推广&#xff1f;这里有5招 1…

小程序推广的6个超简单方案

小程序的运营与推广是一个长期的过程&#xff0c;以下是几个关键点&#xff1a; 1. 做好小程序产品本身 产品的质量和体验是推广的基础。因此在开发小程序时应该考虑用户的需求&#xff0c;注重细节&#xff0c;使用户获得良好的使用体验。如果小程序的产品体验不佳&#xff0…

远程Linux权限不够

远程连接linux主机时提示如下&#xff1a; 解决办法&#xff1a; 修改 /etc/ssh/sshd_config 文件 将 PermitRootLogin prohibit-password 注释掉&#xff0c;改为 PermitRootLogin yes &#xff0c;然后重启机器 如下图&#xff1a;

Linux--权限

前言&#xff1a; “权限”这一词并不陌生&#xff0c;在我们日常生活中经常会有权限的设定。比如我们一个学校&#xff0c;老师有讲课的权限&#xff0c;而且学生有听课的权限&#xff0c;学校的食堂阿姨他们是没有这些权限的。我们感觉一个学校校长好像什么权限都有。这里的…

linux添加jdk权限不够

777是给与全部权限 由于linux系统是一个多用户的操作系统&#xff0c;并且针对每一个用户&#xff0c;Linux会严格的控制操作权限。接下来&#xff0c;我们就需要介绍一下Linux系统的权限控制。 1). chmod&#xff08;英文全拼&#xff1a;change mode&#xff09;命令是控制用…

linux 打开权限不够,linux无法打开目录提示权限不够

解决方法&#xff1a; sudo -s #进入root用户模式&#xff0c;仍在原来目录下(不要用su - root,否则进入root目录了) cd /var/lib #进入指定目录 ll # 查看该目录下所有文件权限 chmod 777 files-name #更改指定文件的权限 知识点补充&#xff1a; r 表示文件可以被读(read) w …

linux mysql 权限不够_linux提示权限不够怎么办

linux提示权限不够怎么办 在Linux中使用终端命令或者安装.deb安装包时&#xff0c;总会时常出现权限不够的问题&#xff0c;有很多种解决方法&#xff0c;现汇总如下。 针对.deb安装包&#xff0c;若遇到权限不够&#xff0c;可以直接右击&#xff0c;以管理员身份打开即可 用终…

linux 用户权限不够,linux .权限不够怎么办

linux .权限不够&#xff1f; linux .权限即表示linux当前目录的权限不够。 解决办法&#xff1a;sudo -s #进入root用户模式&#xff0c;仍在原来目录下(不要用su - root,否则进入root目录了) cd /var/lib #进入指定目录 ll # 查看该目录下所有文件权限 chmod 777 files-name …