tomfriwel / Weapp Qrcode
Licence: mit
Wechat miniapp generate qrcode image
Stars: ✭ 339
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Weapp Qrcode
Weapp Qrcode
weapp.qrcode.js 在 微信小程序 中,快速生成二维码
Stars: ✭ 1,194 (+252.21%)
Mutual labels: qrcode, wechat, weapp
Weapp Qrcode Base64
微信小程序生成二维码的插件,基于base64编码输出二维码,不依赖canvas
Stars: ✭ 100 (-70.5%)
Mutual labels: qrcode, wechat, weapp
Weapp
🐧 微信小程序组件和功能封装,基于微信Component自定义组件开发
Stars: ✭ 235 (-30.68%)
Mutual labels: wechat-app, wechat, weapp
Masterwechatapp
『微信小程序』优秀教程、轮子、开源项目 资源汇总
Stars: ✭ 826 (+143.66%)
Mutual labels: wechat-app, wechat, weapp
Wechat Weapp Grouputils
微信小程序群应用,包括群通知、群接龙、群投票、群通讯录4大功能
Stars: ✭ 222 (-34.51%)
Mutual labels: wechat-app, wechat
wxapp-boilerplate
微信小程序开发脚手架 (ES6, Redux, Immutable-js, Async/await, Promise, Reselect, Babel, ESLint, Stylelint, Gulp ... )
Stars: ✭ 35 (-89.68%)
Mutual labels: weapp, wechat-app
Swiftscan
A barcode and qr code scanner( 二维码/条形码扫描、生成,仿微信、支付宝)
Stars: ✭ 293 (-13.57%)
Mutual labels: qrcode, wechat
Wepy Mall
微信小程序--基于wepy 商城(微店)微信小程序 欢迎学习交流
Stars: ✭ 3,224 (+851.03%)
Mutual labels: wechat-app, wechat
weapp-qrcode
微信小程序生成二维码工具
生成二维码数据的主要代码来自davidshimjs/qrcodejs,因为它这个里面生成二维码图片的功能在微信小程序里不能使用,我将这个功能改写成可以在微信小程序中使用。
截图
pages/test/test
)
背景图测试中...(页面
rpx
为单位)
使用(自适应版本,使用完整代码请参考pages/responsive/responsive
,设置width
和height
的时候稍微所有不同。
canvas
的长宽通过计算获得
const QRCode = require('../../utils/weapp-qrcode.js')
import rpx2px from '../../utils/rpx2px.js'
let qrcode;
// 300rpx 在6s上为 150px
const qrcodeWidth = rpx2px(300)
Page({
data: {
...
qrcodeWidth: qrcodeWidth,
...
},
onLoad: function (options) {
qrcode = new QRCode('canvas', {
// usingIn: this,
text: "https://github.com/tomfriwel/weapp-qrcode",
image: '/images/bg.jpg',
width: qrcodeWidth,
height: qrcodeWidth,
colorDark: "#1CA4FC",
colorLight: "white",
correctLevel: QRCode.CorrectLevel.H,
});
},
...
})
wxml
页面中:
<canvas class='canvas' style="width:{{qrcodeWidth}}px; height:{{qrcodeWidth}}px;" canvas-id='canvas' bindlongtap='save'></canvas>
wxss
中的canvas
样式不再设置长宽。这样后就达到了自适应的效果,可以在不同设备上进行查看。
使用(非自适应)
完整代码请参考pages/index/index
页面wxml
中放置绘制二维码的canvas
:
<canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>
页面js
中引入:
var QRCode = require('../../utils/weapp-qrcode.js')
页面加载好后:
//传入wxml中二维码canvas的canvas-id
//单位为px
var qrcode = new QRCode('canvas', {
// usingIn: this,
text: "https://github.com/tomfriwel/weapp-qrcode",
width: 150,
height: 150,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
usingIn
为可选参数,详情清查卡在自定义组件使用时失效及解决思路 #1
text
为需要转化为二维码的字符串;
width
和height
为绘制出的二维码长宽,这里设置为跟canvas
同样的长宽;
colorDark
和colorLight
为二维码交替的两种颜色;
correctLevel
没有细看源码,命名上看应该是准确度;
如果需要再次生成二维码,调用qrcode.makeCode('text you want convert')
。
wxss
里需要设置同等的长宽,比如上面初始化时的长宽为150
,那么:
.canvas {
//...
width: 150px;
height: 150px;
}
主要流程
TODO
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].