uniapp 微信小程序生成二维码
uniapp生成二维码
uniapp生成二维码`
最近在写需求的时候遇到了展示二维码入口,扫码后申请获取微信头像数据、微信名称上传至服务器作为待审核员工信息的需求
提示:以下是本篇文章正文内容,下面案例可供参考
一、二维码实习图
参考了https://blog.csdn.net/lemontealin/article/details/104437584
这篇文章并做了修改,要想实现二维码的生成的话是需要引用相应插件的,
这个插件的作者是echo,echo写了整个Thor UI组件,我个人很佩服他,喜欢他的可以去Thor UI网站看看,学习一下。
1)首先下载你需要下载weapp-qrcode.js(百度网盘下载链接:链接:https://pan.baidu.com/s/1VXhq3ZjxmDcH1tFujKg75Q
提取码:vj2y)
(2)在你的uni-app项目中需要的地方引入下载的weapp-qrcode.js文件。在标签中引入,如下
const qrCode = require(‘@/common/weapp-qrcode.js’)
二、使用步骤
1.引入库
代码如下(示例):
<template><view class="pages"><view class="ame-1">邀请员工扫码</view><view class="ame-2"><view class="ame-3"><view><view class="qrcode"><canvas style="width: 200upx;height: 200upx;" canvas-id="couponQrcode"></canvas></view><view class="title">{{ame1.name}}</view></view></view></view><!-- <canvas ref="canvas" canvas-id="qrcode" style="width: 180px;height:180px;" class="canvas" id="qrcode"></canvas>--></view>
</template><script>/* import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/u-qrcode/u-qrcode.js' */const qrCode = require('@/weapp-qrcode.js')export default {data() {return {}},onLoad() {setTimeout(() => {this.couponQrCode()}, 50)},methods: {ame1: {name: "刘勇发",},couponQrCode() {new qrCode('couponQrcode', {text: "https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=csdn",// http://192.168.1.98:8080/pages/Index/Employeegl/noshenhe/noshenhe// /* http://192.168.1.98:8080/pages/Index/Employeegl/noshenhe/Addemployee/Addemployee */width: 100,height: 100,colorDark: "#333333",colorLight: "#FFFFFF",correctLevel: qrCode.CorrectLevel.H})},/* async make() {// 可以在这加一个loading状态await uQRCode.make({canvasId: 'qrcode',componentInstance: this,text: this.userInfo.useradd, // 这里是你二维码生成的url 替换即可size: 180,margin: 5,backgroundColor: '#ffffff',foregroundColor: '#000000'})// loading状态在二维码生成后关闭},*//* onLoad() {//请求轮播图数据var me = this;//#ifdef APP-PLUS || MP-WEIXIN//在页面创建的时候,创建一个临时动画对象this.animation = uni.createAnimation();//#endifvar serverUrl = me.serverUrl;uni.request({url: 'http://127.0.0.1:4523/m1/1021833-0-default/api/v1/merchant/1',method: "GET",success: (res) => { //这是一个箭头函数console.log("res--->", res) //看网络那里预览res下的参数//debugger;//获取真实数据之前,务必判断状态是否为200// if (res.data.sattus == 200) {\var Details = res.data.data;this.Details = Details; //data里面定义的detail,则是this.detilconsole.log('Details', me.Details);// }this.text = 'request success';}});}, */}}
</script><style>.ame-1 {display: flex;justify-content: center;align-items: center;font-size: 30upx;padding: 70upx;}.ame-3 {display: flex;justify-content: center;align-items: center; }.qrcode {padding: 50upx 0 20upx 0;display: flex;align-items: center;justify-content: center;}.title {text-align: center;}
</style>
总结
要引用相对于的组件,才能实现。
uniapp 微信小程序生成二维码相关推荐
- 【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid
场景 调用微信小程序生成二维码接口,提示报错 错误内容 array(2) {["errcode"] => int(41030)["errmsg"] =&g ...
- 微信小程序生成二维码的两种方式
微信小程序生成二维码的两种方式 2020/11/10 第一种,利用网络api自动生成 <image class="xin-erma" src="{{'https:/ ...
- 微信小程序生成二维码js
微信小程序生成二维码js 参考:https://github.com/tomfriwel/weapp-qrcode 最新的二维码工具:https://github.com/KeeeX/qrcodejs ...
- 【微信小程序生成二维码并下载,分享】
微信小程序生成二维码并保存,分享,下载 依赖工具 使用weapp-qrcode-base64库生成二维码的base64编码 链接:weapp-qrcode-base64 安装 npm install ...
- 微信小程序生成二维码带参海报
微信小程序生成二维码带参海报 没错,就是用 canvas 来实现 文章目录 微信小程序生成二维码带参海报 获取屏幕分辨率比 生成二维码 获取网络图片并转为本地临时文件 绘制背景图片以及二维码 代码片段 ...
- 微信小程序生成二维码,接口C接收值
微信小程序生成二维码,接口C接收值 深坑 解决 接口C替代方案 深坑 当我们用微信二维码生成接口c类型的二维码时,需要传入参数,而根据文档 我们填写 path时 传入参数例如 pah: page/in ...
- 微信小程序生成二维码可文字,链接,图片(支持中文)
功能简介 : 微信小程序生成二维码,支持文本和网址,支持中英文,输入框可清空,可单击保存二维码...... 核心代码 : createQrCode:function(url,canvasId,cavW ...
- 微信小程序生成二维码工具类附带完整示例和源码
小程序二维码生成 源码地址 使用 复制src/qrcode.js到小程序目录下,直接引入即可使用 方法说明 // 通过RenderingContext绘制 function draw(ctx: any ...
- 微信小程序生成二维码scene过长解决方法
小程序二维码scene参数限定长度为32位字符,但是实际开发中可能有很多的参数需要传递,怎么办呢? 对于目前32位长度的限制,解决方案: 方案一.中间页 + 短参数新建一个中间空白跳转页面,每次生成的 ...
- 【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
最新文章
- 【iOS】快速集成轮播控件
- 钢铁飞龙每个人的机器人_让人震撼的特斯拉超级工厂全自动生产线
- 开发日记-20190911 关键词 C代码实现shell ftw命令
- 推荐两个非常实用的,Python装饰器
- 2014东师计算机应用基础离线作业,2014秋东师《计算机应用基础》离线作业及答案...
- pytorch Tensor
- 火星首座NFT虚拟房屋以超过50万美元价格售出
- LoadRunner - 实战,转发
- 面试必掌握之计算机网络
- 《深入浅出统计学》总结
- Windows无法启动MapGIS DataStorage Service服务
- ShaderForge - 纹理旋转
- IDEA初学者 常用注解意思
- 【012】SylixOS嵌入式实时操作系统助力中国航天事业
- 关键词推广怎么做比较好?抖音宣传做关键词推广有哪些好的方法
- 数学对计算机的重要性
- android 键盘开发demo,Android自定义键盘之中文键盘demo
- 2018/12/19 oracle-sql练习
- 购买安防监控摄像头时如何省钱
- 松下服务器型号,WEA-ASC970/CH 松下综合型系统管理服务器