使用JavaScript生成二維碼教程-附qrcodejs中文文檔

oneasp 發(fā)布于2019-08-21 17:45 / 3705人閱讀

摘要：使用生成二維碼依賴需要使用到的庫至此一個簡單的二維碼就生成了接下來我們就詳細(xì)了解一下這個庫到底為我們提供了哪些參數(shù)配置和方法配置名稱默認(rèn)值類型說明顯示二維碼的元素或該元素的參數(shù)配置名稱默認(rèn)值類型說明需要生成的二維碼內(nèi)容圖像寬度圖像高度前

使用javascript生成二維碼依賴jquery

需要使用到的庫

https://github.com/davidshimj...

DIV

javascript

 var qrcode = new QRCode("qrcode");
 
  qrcode.makeCode("http://www.fengkaichang.com");

至此一個簡單的二維碼就生成了

接下來我們就詳細(xì)了解一下這個庫到底為我們提供了哪些參數(shù)配置和方法

配置

new  QRCode(element,option)

名稱	默認(rèn)值	類型	說明
element	-	string	顯示二維碼的元素或該元素的 ID
option		objec	參數(shù)配置

名稱	默認(rèn)值	類型	說明
text	-	string	需要生成的二維碼內(nèi)容
width	256	number	圖像寬度
height	256	number	圖像高度
colorDark	"#000000"	string	前景色
colorLight	"#ffffff"	string	背景色
correctLevel	QRCode.CorrectLevel.L		容錯級別

容錯級別有

QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H

var qrcode = new  QRCode(element), {
    text: "www,fengkaichang.com",
    width: 150,
    height: 150,
    colorDark : "#000000",
    colorLight : "#ffffff",
    typeNumber:4,
    correctLevel : QRCode.CorrectLevel.H
});

API方法

qrcode.makeCode(text)    //設(shè)置二維碼內(nèi)容
qrcode.clear() //清除二維碼。

相關(guān)信息 GitHub 中文文檔

更多內(nèi)容請訪問我的個人博客www.fengkaichang.com

GPU云服務(wù)器云服務(wù)器教程文檔javascript javascript文檔教程 javascript教程文檔 javascript中文教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/89964.html

相關(guān)文章

vue 2.x項目 vue-qriously 生成二維碼并下載、cliploard復(fù)制粘貼

摘要：近日，重構(gòu)項目某一老模塊時，有一個功能是生成二維碼并下載，還可以復(fù)制鏈接。先想著新模塊中是否有生成二維碼的插件，看了下。項目中封裝了一個指令。一份用來顯示的。順帶說一下，復(fù)制粘貼復(fù)制粘貼老模塊中是用的倉庫。近日，重構(gòu)項目某一老模塊時，有一個功能是生成二維碼并下載，還可以復(fù)制鏈接。列表每項都有二維碼、下載二維碼和復(fù)制鏈接和列表上方總的二維碼。老模塊是用的qrocode中文文檔，qrco...

littlelightss 2019-08-22 17:16 評論0 收藏0
使用 qrcodejs 生成二維碼的幾個問題

摘要：在這里的用法如下微信中多個二維碼在一起識別錯誤這個問題，我也遇到了，根據(jù)網(wǎng)友的提示，微信是截屏識別的，所以會出現(xiàn)這種問題。示例代碼這里代碼跟前面脫節(jié)了，是另外的結(jié)構(gòu)，僅作為示例代碼是類似的一些的匯總對象微信中有兩個挨著二維碼長按識別的問題博客地址 Preface 產(chǎn)品希望我這邊下載頁面加個二維碼，可以掃描下載 APP，并且希望二維碼中有公司的 logo，很合理的需求，不過實現(xiàn)的時候依...

Lyux 2019-08-23 13:39 評論0 收藏0
分享AI有道干貨 | 126 篇 AI 原創(chuàng)文章精選（ML、DL、資源、教程）

摘要：值得一提的是每篇文章都是我用心整理的，編者一貫堅持使用通俗形象的語言給我的讀者朋友們講解機(jī)器學(xué)習(xí)深度學(xué)習(xí)的各個知識點(diǎn)。今天，紅色石頭特此將以前所有的原創(chuàng)文章整理出來，組成一個比較合理完整的機(jī)器學(xué)習(xí)深度學(xué)習(xí)的學(xué)習(xí)路線圖，希望能夠幫助到大家。一年多來，公眾號【AI有道】已經(jīng)發(fā)布了 140+ 的原創(chuàng)文章了。內(nèi)容涉及林軒田機(jī)器學(xué)習(xí)課程筆記、吳恩達(dá) deeplearning.ai 課程筆記、機(jī)...

jimhs 2019-06-26 18:57 評論0 收藏0
關(guān)于 webpack 你可能忽略的細(xì)節(jié)（附源碼分析）

摘要：本篇的主要目標(biāo)是通過實際問題來介紹中容易被人忽略的細(xì)節(jié)以及源碼分析以最新發(fā)布的版本的源碼為例并且提供幾種解決方案。探究原因及源碼分析這里以最新發(fā)布的版本的源碼作為分析。解決方案加參數(shù)基于上面簡要的分析，我們來嘗試下參數(shù)的作用。注：本篇不是入門教程，入門請直接查看官方文檔。本篇的主要目標(biāo)是通過實際問題來介紹 webpack 中容易被人忽略的細(xì)節(jié), 以及源碼分析(以最新發(fā)布的 relea...

mtunique 2019-08-21 11:23 評論0 收藏0
優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實驗室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 評論0 收藏0