資訊專欄INFORMATION COLUMN
摘要：微信小程序生成二維碼工具生成二維碼數(shù)據(jù)的主要代碼來自，因?yàn)樗@個(gè)里面生成二維碼圖片的功能在微信小程序里不能使用，我將這個(gè)功能改寫成可以在微信小程序中使用。
weapp-qrcode
微信小程序生成二維碼工具
生成二維碼數(shù)據(jù)的主要代碼來自davidshimjs/qrcodejs，因?yàn)樗@個(gè)里面生成二維碼圖片的功能在微信小程序里不能使用，我將這個(gè)功能改寫成可以在微信小程序中使用。截圖
完整代碼請參考pages/responsive/responsive，設(shè)置width和height的時(shí)候稍微所有不同。
canvas的長寬通過計(jì)算獲得
const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;
// 300rpx 在6s上為 150px
const qrcode_w = 300 / rate;
Page({
data: {
...
qrcode_w: qrcode_w,
...
},
onLoad: function (options) {
qrcode = new QRCode("canvas", {
// usingIn: this,
text: "https://github.com/tomfriwel/weapp-qrcode",
image: "/images/bg.jpg",
width: qrcode_w,
height: qrcode_w,
colorDark: "#1CA4FC",
colorLight: "white",
correctLevel: QRCode.CorrectLevel.H,
});
},
...
})
wxml頁面中：
wxss中的canvas樣式不再設(shè)置長寬。這樣后就達(dá)到了自適應(yīng)的效果，可以在不同設(shè)備上進(jìn)行查看。
使用（非自適應(yīng)）完整代碼請參考pages/index/index
頁面wxml中放置繪制二維碼的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為可選參數(shù)，詳情清查卡在自定義組件使用時(shí)失效及解決思路 #1
text為需要轉(zhuǎn)化為二維碼的字符串；
width和height為繪制出的二維碼長寬，這里設(shè)置為跟canvas同樣的長寬；
colorDark和colorLight為二維碼交替的兩種顏色；
correctLevel沒有細(xì)看源碼，命名上看應(yīng)該是準(zhǔn)確度；
如果需要再次生成二維碼，調(diào)用qrcode.makeCode("text you want convert")。
wxss里需要設(shè)置同等的長寬，比如上面初始化時(shí)的長寬為150，那么：
.canvas {
//...
width: 150px;
height: 150px;
}
主要流程
源代碼
tomfriwel/weapp-qrcode
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/90624.html
摘要：安裝完畢后啟動(dòng)微信開發(fā)者工具，會(huì)要求我們指定一個(gè)本地項(xiàng)目目錄和填寫微信小程序的。 我最近也剛剛開始微信小程序的開發(fā)，想把我自學(xué)的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885); 這是第一篇，從零開始學(xué)習(xí)微信小程序開發(fā)。主要是小程序的注冊和開發(fā)環(huán)境的搭建。 首先我們要在下列網(wǎng)址申請一個(gè)...
摘要：我最近也剛剛開始微信小程序的開發(fā)，想把我自學(xué)的一些心得寫出來分享給大家。這是第一篇，從零開始學(xué)習(xí)微信小程序開發(fā)。安裝完畢后啟動(dòng)微信開發(fā)者工具，會(huì)要求我們指定一個(gè)本地項(xiàng)目目錄和填寫微信小程序的。 我最近也剛剛開始微信小程序的開發(fā)，想把我自學(xué)的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885...
摘要：總結(jié)本文以微信小程序常規(guī)的發(fā)布流程為切入點(diǎn)，循序漸進(jìn)地介紹了如何集成實(shí)現(xiàn)微信小程序預(yù)覽上傳功能。 showImg(https://raw.githubusercontent.com/yingye/Blog/master/images/wechat-jenkins.png); 本文首發(fā)于 https://github.com/yingye/Blo... ，歡迎各位關(guān)注我的Blog，正文以...
摘要：換句話說，同一用戶，對同一個(gè)微信開放平臺(tái)下的不同應(yīng)用，是相同的對于，微信程序碼在同一時(shí)間用來掉用小程序碼生成接口使用以及調(diào)用生成一個(gè)應(yīng)用只有一個(gè)秘鑰，只有一個(gè)有效，且有效期是分鐘。 小程序二維碼的生成有三個(gè)不同的接口，針對不同的場景需求下文介紹的是第二種，也是用的最多的一種：適用于需要的碼數(shù)量極多，或僅臨時(shí)使用的業(yè)務(wù)場景接口地址：https://api.weixin.qq.com/wx...
摘要：前言在近期的小程序開發(fā)中，有一個(gè)離線生成二維碼的需求。所以，針對微信小程序的特點(diǎn)，封裝了，用于在小程序中快速生成二維碼。由于小程序沒有動(dòng)態(tài)創(chuàng)建標(biāo)簽的，所以這一步不能省略。調(diào)用繪制方法由于微信小程序不支持引入包，可以將目錄下，拷貝至項(xiàng)目中。 前言 在近期的小程序開發(fā)中，有一個(gè)離線生成二維碼的需求。當(dāng)時(shí)想到了一些優(yōu)秀的前端開源庫 jquery-qrcode 和 node-qrcode，由于...
閱讀 1258·2023-04-26 00:34
閱讀 3416·2023-04-25 16:47
閱讀 2209·2021-11-24 11:14
閱讀 3183·2021-09-26 09:55
閱讀 3898·2019-08-30 15:56
閱讀 3275·2019-08-29 16:57
閱讀 1975·2019-08-26 13:38
閱讀 2724·2019-08-26 12:22
