微信小程序生成二維碼工具

Rocture 發布于2019-08-21 18:35 / 1496人閱讀

摘要：微信小程序生成二維碼工具生成二維碼數據的主要代碼來自，因為它這個里面生成二維碼圖片的功能在微信小程序里不能使用，我將這個功能改寫成可以在微信小程序中使用。

weapp-qrcode

微信小程序生成二維碼工具

生成二維碼數據的主要代碼來自davidshimjs/qrcodejs，因為它這個里面生成二維碼圖片的功能在微信小程序里不能使用，我將這個功能改寫成可以在微信小程序中使用。

截圖

使用（自適應版本）

完整代碼請參考pages/responsive/responsive，設置width和height的時候稍微所有不同。

canvas的長寬通過計算獲得

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樣式不再設置長寬。這樣后就達到了自適應的效果，可以在不同設備上進行查看。

使用（非自適應）

完整代碼請參考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為可選參數，詳情清查卡在自定義組件使用時失效及解決思路 #1

text為需要轉化為二維碼的字符串；

width和height為繪制出的二維碼長寬，這里設置為跟canvas同樣的長寬；

colorDark和colorLight為二維碼交替的兩種顏色；

correctLevel沒有細看源碼，命名上看應該是準確度；

如果需要再次生成二維碼，調用qrcode.makeCode("text you want convert")。

wxss里需要設置同等的長寬，比如上面初始化時的長寬為150，那么：

.canvas {
    //...
    width: 150px;
    height: 150px;
}

主要流程

源代碼

tomfriwel/weapp-qrcode

GPU云服務器云服務器微信小程序生成免費生成微信小程序工具類微信小程序怎么制作微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90624.html

微信小程序開發系列二：微信小程序的視圖設計

摘要：安裝完畢后啟動微信開發者工具，會要求我們指定一個本地項目目錄和填寫微信小程序的。我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885); 這是第一篇，從零開始學習微信小程序開發。主要是小程序的注冊和開發環境的搭建。首先我們要在下列網址申請一個...

Ryan_Li 2019-08-23 12:29 評論0 收藏0
微信小程序開發系列一：微信小程序的申請和開發環境的搭建

摘要：我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。這是第一篇，從零開始學習微信小程序開發。安裝完畢后啟動微信開發者工具，會要求我們指定一個本地項目目錄和填寫微信小程序的。我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885...

jeffrey_up 2019-08-23 12:29 評論0 收藏0
微信小程序集成 Jenkins

摘要：總結本文以微信小程序常規的發布流程為切入點，循序漸進地介紹了如何集成實現微信小程序預覽上傳功能。 showImg(https://raw.githubusercontent.com/yingye/Blog/master/images/wechat-jenkins.png); 本文首發于 https://github.com/yingye/Blo... ，歡迎各位關注我的Blog，正文以...

young.li 2019-08-23 11:41 評論0 收藏0
微信小程序碼生成及可能存在的坑

摘要：換句話說，同一用戶，對同一個微信開放平臺下的不同應用，是相同的對于，微信程序碼在同一時間用來掉用小程序碼生成接口使用以及調用生成一個應用只有一個秘鑰，只有一個有效，且有效期是分鐘。小程序二維碼的生成有三個不同的接口，針對不同的場景需求下文介紹的是第二種，也是用的最多的一種：適用于需要的碼數量極多，或僅臨時使用的業務場景接口地址：https://api.weixin.qq.com/wx...

546669204 2019-08-19 10:17 評論0 收藏0
微信小程序中生成二維碼工具：weapp.qrcode.js

摘要：前言在近期的小程序開發中，有一個離線生成二維碼的需求。所以，針對微信小程序的特點，封裝了，用于在小程序中快速生成二維碼。由于小程序沒有動態創建標簽的，所以這一步不能省略。調用繪制方法由于微信小程序不支持引入包，可以將目錄下，拷貝至項目中。前言在近期的小程序開發中，有一個離線生成二維碼的需求。當時想到了一些優秀的前端開源庫 jquery-qrcode 和 node-qrcode，由于...

MarvinZhang 2019-08-26 11:35 評論0 收藏0