小程序生成二维码(使用weapp-qrcode)以及相应的bug汇总
效果展示
github 地址
github 地址 https://github.com/MrITzhongzi/small_routine_components/tree/master/6.create_qr_code
下载weapp-qrcode
可以通过小程序的npm功能下载：
npm i weapp-qrcode -S
小程序引入
方法一
import drawQrcode from 'weapp-qrcode';方法二 把npm下载的程序包中dist文件夹中的文件引入（任意引入一个都可以）
需要把这个js文件复制到自己的项目，然后
import xxx from 'xxxxx';
使用方法
- 核心代码展示
// 页面被展示console.log(typeof drawQrcode)const ctx = wx.createCanvasContext('myQrcode', this);let that = this;// 在组件实例进入页面节点树时执行drawQrcode({width: 200,height: 200,ctx: ctx,text: that.data.showData,callback(){}})
小程序 组件封装好
- createQrCode.json
{"component": true,"usingComponents": {}
}
- createQrCode.wxml
<view class="qrcode-box" style="width: 200px; height: 200px;margin: 0 auto;"><canvas style="width: 200px; height: 200px;background: white;" canvas-id="myQrcode"></canvas>
</view>
- createQrCode.js
import drawQrcode from 'weapp-qrcode';
Component({/*** 组件的属性列表*/properties: {showData: {type: String,value: ''}},/*** 组件的初始数据*/data: {},lifetimes: {attached: function() {// 页面被展示console.log(typeof drawQrcode)const ctx = wx.createCanvasContext('myQrcode', this);let that = this;// 在组件实例进入页面节点树时执行drawQrcode({width: 200,height: 200,ctx: ctx,text: that.data.showData,callback(){}})},detached: function() {// 在组件实例被从页面节点树移除时执行},},pageLifetimes:{show: function() {}},/*** 组件的方法列表*/methods: {}
})使用封装好的组件
- 第一步 配置
{"usingComponents": {"qr_code": "/component/create_qr_code/createQrCode"},"navigationBarTitleText": "升级公告"
}
- 第二部使用
<qr_code showData="hahha"></qr_code>
其中showData是我们传入要展示的内容。
注意事项
const ctx = wx.createCanvasContext('myQrcode', this);
在组件中，小程序生成canvas对象时，如果不穿入 this，小程序就会去页面的上下文中寻找canvas对象，这样就会导致canvas找不到，二维码显示不出来。所以一定传入this，让程序在组件内部寻找canvas对象。
～～～～被这个问题坑哭了，警示后来者……
小程序生成二维码(使用weapp-qrcode)以及相应的bug汇总相关推荐
- 微信小程序生成二维码带参海报
微信小程序生成二维码带参海报 没错,就是用 canvas 来实现 文章目录 微信小程序生成二维码带参海报 获取屏幕分辨率比 生成二维码 获取网络图片并转为本地临时文件 绘制背景图片以及二维码 代码片段 ...
- 微信小程序生成二维码的两种方式
微信小程序生成二维码的两种方式 2020/11/10 第一种,利用网络api自动生成 <image class="xin-erma" src="{{'https:/ ...
- 微信小程序生成二维码js
微信小程序生成二维码js 参考:https://github.com/tomfriwel/weapp-qrcode 最新的二维码工具:https://github.com/KeeeX/qrcodejs ...
- 微信小程序生成二维码可文字，链接，图片（支持中文）
功能简介 : 微信小程序生成二维码,支持文本和网址,支持中英文,输入框可清空,可单击保存二维码...... 核心代码 : createQrCode:function(url,canvasId,cavW ...
- 【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid
场景 调用微信小程序生成二维码接口,提示报错 错误内容 array(2) {["errcode"] => int(41030)["errmsg"] =&g ...
- 小程序生成二维码海报
在小程序开发完成之后,我们会时常遇到这样的一个问题,小程序该怎么推广,增加曝光量,让更多的人看到?我们都知道,小程序推广一般是给小程序增加一个分享的功能,可以分享到群里面. 但是不能发朋友圈,若是想发 ...
- 一个很好用的小程序生成二维码海报的组件库
在小程序开发完成之后,我们会时常遇到这样的一个问题,小程序该怎么推广,增加曝光量,让更多的人看到?我们都知道,小程序推广一般是给小程序增加一个分享的功能,可以分享到群里面. 但是不能发朋友圈,若是想发 ...
- 【微信小程序生成二维码并下载，分享】
微信小程序生成二维码并保存,分享,下载 依赖工具 使用weapp-qrcode-base64库生成二维码的base64编码 链接:weapp-qrcode-base64 安装 npm install ...
- 微信小程序生成二维码，接口C接收值
微信小程序生成二维码,接口C接收值 深坑 解决 接口C替代方案 深坑 当我们用微信二维码生成接口c类型的二维码时,需要传入参数,而根据文档 我们填写 path时 传入参数例如 pah: page/in ...
- 微信小程序生成二维码工具类附带完整示例和源码
小程序二维码生成 源码地址 使用 复制src/qrcode.js到小程序目录下,直接引入即可使用 方法说明 // 通过RenderingContext绘制 function draw(ctx: any ...
最新文章
- 北大青鸟广州天河:高中生做技术经理！
- PAT (Basic Level) 1039 到底买不买(模拟)
- ubuntu 如何在任意终端不填加./就可以执行文件类似ls cd cp
- variable 'xxx' unsafe in 'case'的处理
- （翻译）开始iOS 7中自动布局教程(二)
- [USACO13NOV]Farmer John has no Large Brown Cow【状压 / 模拟】
- 猫叫了，老鼠跑了！(复习委托和事件)
- Confluence 6 SQL Server 数据库驱动修改
- 产品经理岗位职责说明_11份公司高层管理人员的岗位职责说明书，改改就能用，拿去参考...
- 爬取百度迁徙2021年春运迁徙数据（仅省份级别）
- 女生学计算机和遥感哪个好就业,遥感专业女生就业方向 遥感专业毕业生可以从事哪些工作...
- Apache JMeter使用教程
- 模电笔记3 三极管 光电三极管
- 聚观早报 | ChatGPT 停止 Plus 付费；李子柒油管广告收益登顶热搜
- Be An Effective Engineer
- html做旋转的五角星,Flash AS3代码制作旋转彩色五角星动画
- PHP输出中文乱码的解决方法（适合初学者）
- VCS和Verdi学习
- 计算机网络 概述重点（全）
- 银河麒麟桌面操作系统V10创建热点