当前位置: 首页 > news >正文

uniapp微信小程序开发工具本地获取指定页面二维码

只能临时使用,线上还是要访问后端拿二维码

代码:

<template>
	<view>
		<form @submit="sendinfo">
			<view class="uni-form-item uni-column">
				<view class="title">页面路径</view>
				<input class="uni-input" name="input" v-model="path" placeholder="pages/index/index" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">宽度</view>
				<input class="uni-input" name="input" v-model="width" placeholder="二维码宽度" />
			</view>
			<view class="uni-btn-v">
				<button form-type="submit">获取二维码</button>
			</view>
		</form>
		<view style="text-align:center;">
			<image v-if="codeimg" :src="codeimg" style="width:300rpx;height:300rpx;" @click="showimg" mode="widthFix">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path: "pages/index/index", //""
				width: 500,
				codeimg: "",
			}
		},
		onLoad() {

		},
		methods: {
			sendinfo() {
				if (!this.path) return uni.showToast({
					title: "请输入路径",
					icon: 'error'
				});
				if (uni.getStorageSync('access_token')) {
					this.getcode();
				} else
					wx.request({
						url: 'https://api.weixin.qq.com/cgi-bin/token',
						method: "GET",
						data: {
							appid: '',
							secret: '',
							grant_type: 'client_credential'
						},
						success: res => {
							console.log("huoqutoken", res)
							uni.setStorageSync('access_token', res.data.access_token);
							this.getcode();
						}
					})
			},
			getcode() {
				let access_token = uni.getStorageSync('access_token');
				wx.request({
					url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + access_token, //
					method: "POST",
					responseType: "arrayBuffer",
					data: {
						"path": this.path,
						"width": this.width
					},
					success: info => {
						uni.showToast({
							title: "获取成功"
						});
						// console.log("code",info.data)
						const fileSystem = wx.getFileSystemManager();
						const filePath = wx.env.USER_DATA_PATH + '/tempImage' + Date.now() + '.png'; // 临时文件路径
						// 写入文件
						fileSystem.writeFile({
							filePath: filePath,
							data: info.data, // 直接使用字节流 一定要写
							encoding: 'binary',
							success: (res) => {
								console.error('文件保存:', res);
								this.codeimg = filePath;
								wx.saveImageToPhotosAlbum({
									filePath: filePath
								})
							},
							fail: (err) => {
								console.error('文件保存失败:', err);
							}
						});
					}
				})
			},
			showimg() {
				wx.previewImage({
					current: this.codeimg, // 当前显示图片的http链接
					urls: [this.codeimg] // 需要预览的图片http链接列表
				})
			},
		}
	}
</script>

<style scoped>
	.uni-form-item {
		display: flex;
		border-bottom: 2rpx solid #eee;
		margin: 10rpx 20rpx;
		padding: 10rpx 0;
	}

	.uni-form-item .title {
		width: 200rpx;
	}

	.uni-form-item .uni-input {
		flex: 1;
	}

	.uni-btn-v {
		width: 400rpx;
		margin: 50rpx auto;
	}
</style>

相关文章:

  • 【AI工具】DeepSeek直接生成图片,效果不错
  • 前后端数据序列化:从数组到字符串的旅程(附优化指南)
  • 爬虫:请求头,requests库基本使用
  • 《C++Linux编程进阶:从0实现muduo 》-第8讲.C++面试如何高效获取线程ID
  • nginx如何重启
  • 物联网时代,HMI 设计的创新机遇与挑战
  • 人工智能的三个主义(行为主义、连结主义、符号主义)的整体性关系(并非割裂)
  • MySQL注入中user-agent和cookie存在的注入
  • OpenCV 从入门到精通(day_03)
  • 化学方程式配平 第33次CCF-CSP计算机软件能力认证
  • WEB安全--文件上传漏洞--黑名单绕过
  • 《Linux运维总结:基于银河麒麟V10操作系统+ARM64架构CPU二进制部署单机ACL版consul v1.18.1》
  • 【linux】管理磁盘——RAID10(含备份)与逻辑卷管理
  • Java线程池详解
  • 用deepseek创建可运行的简单的php框架
  • 如何在k8s中对接s3存储
  • 多线程 - wait notify
  • Apache Commons Lang3 常用方法详解
  • 大数据(4.3)Hive基础查询完全指南:从SELECT到复杂查询的10大核心技巧
  • 【超分辨率】基于DDIM+SwinUnet实现超分辨率
  • 广药集团原董事长李楚源被“双开”:去年8月被查,曾多次发表争议言论
  • 上海公办小学验证今起开始,下周一和周二分区进行民办摇号
  • 国寿资产获批参与第三批保险资金长期投资改革试点
  • 国防部:菲方应停止一切侵权挑衅危险举动,否则只会自食苦果
  • “养胃骗局”大公开,真正有用的方法究竟是?
  • 杨文庄当选中国人口学会会长,曾任国家卫健委人口家庭司司长