From fe97f78b9a343ee9fa45a3531d03d73dcd1df31b Mon Sep 17 00:00:00 2001 From: qx <1084500556@qq.com> Date: 星期三, 06 八月 2025 10:15:12 +0800 Subject: [PATCH] :测试提交“ --- uni_modules/Sansnn-uQRCode/README.md | 392 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 392 insertions(+), 0 deletions(-) diff --git a/uni_modules/Sansnn-uQRCode/README.md b/uni_modules/Sansnn-uQRCode/README.md new file mode 100644 index 0000000..77d7925 --- /dev/null +++ b/uni_modules/Sansnn-uQRCode/README.md @@ -0,0 +1,392 @@ +# 浠嬬粛 + +`uQRCode`鏄竴娆惧熀浜巂Javascript`鐜寮�鍙戠殑浜岀淮鐮佺敓鎴愭彃浠讹紝閫傜敤鎵�鏈塦Javascript`杩愯鐜鐨勫墠绔簲鐢ㄥ拰`Node.js`搴旂敤銆� + +`uQRCode`鍙墿灞曟�ч珮锛屽畠鏀寔鑷畾涔夋覆鏌撲簩缁寸爜锛屽彲閫氳繃`uQRCode API`寰楀埌浜岀淮鐮佺粯鍒跺叧閿俊鎭悗锛屼娇鐢╜canvas`銆乣svg`鎴朻js`鎿嶄綔`dom`鐨勬柟寮忕粯鍒朵簩缁寸爜鍥炬銆傝繕鍙嚜瀹氫箟浜岀淮鐮佹牱寮忥紝濡傞殢鏈洪鑹层�佸渾鐐广�佹柟鍧椼�佸潡涓庡潡涔嬮棿鐨勯棿璺濈瓑銆� + +娆㈣繋鍔犲叆缇よ亰銆恥QRCode浜ゆ祦缇ゃ�戯細[695070434](https://jq.qq.com/?_wv=1027&k=JRjzDqiw)銆� + +# 璁捐鍣� + +uQRCode鍙戝竷浜嗛厤濂楃殑鍙鍖栬璁″櫒锛屽彲鏍规嵁鑷繁鍠滃ソ鍦ㄨ璁″櫒涓璁′簩缁寸爜鏍峰紡锛屼竴閿敓鎴愰厤缃唬鐮佸鍒跺埌椤圭洰涓紝璇︽儏璇峰湪寰俊灏忕▼搴忔悳绱⑩�滄煔瀛愪簩缁寸爜鈥濓紝鎴栨壂鎻忎笅鏂瑰皬绋嬪簭鐮佷綋楠屻�� + +銆� + +github鍦板潃锛歔https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode)銆� + +npm鍦板潃锛歔https://www.npmjs.com/package/uqrcodejs](https://www.npmjs.com/package/uqrcodejs)銆� + +uni-app鎻掍欢甯傚満鍦板潃锛歔https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)銆� + +## 鍘熺敓鏂瑰紡 + +鍘熺敓鏂瑰紡浠呴渶瑕佽幏鍙朻uqrcode.js`鏂囦欢渚垮彲浣跨敤銆傝缁嗛厤缃绉绘鍒帮細鏂囨。 > [鍘熺敓](https://uqrcode.cn/doc/document/native.html)銆� + +### 瀹夎 + +1. 閫氳繃`npm`瀹夎锛屾垚鍔熷悗鍗冲彲浣跨敤`import`鎴朻require`杩涜寮曠敤銆� +``` bash +# npm瀹夎 +npm install uqrcodejs +# 鎴栬�� +npm install @uqrcode/js +``` + +2. 閫氳繃椤圭洰寮�婧愬湴鍧�鑾峰彇`uqrcode.js`锛屼笅杞絗uqrcode.js`鍚庯紝灏嗗叾澶嶅埗鍒版偍椤圭洰鎸囧畾鐩綍锛屽湪椤甸潰涓紩鍏uqrcode.js`鏂囦欢鍗冲彲寮�濮嬩娇鐢ㄣ�� + +### 寮曞叆 + +- 閫氳繃`import`寮曞叆銆� +``` javascript +// npm瀹夎 +import UQRCode from 'uqrcodejs'; // npm install uqrcodejs +// 鎴栬�� +import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js +``` + +- `Node.js`閫氳繃`require`寮曞叆銆� +``` javascript +// npm瀹夎 +const UQRCode = require('uqrcodejs'); // npm install uqrcodejs +// 鎴栬�� +const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js +``` + +- 鍘熺敓娴忚鍣ㄧ幆澧冿紝鍦╦s鑴氭湰鍔犺浇鏃舵坊鍔犲埌`window`銆� +``` html +<script type="text/javascript" src="uqrcode.js"></script> +<script> + var UQRCode = window.UQRCode; +</script> +``` + +### 绠�鍗曠敤娉� + +`uQRCode`鍩轰簬`Canvas API`灏佽浜嗕竴濂楁柟娉曪紝寤鸿寮�鍙戣�呬娇鐢╜canvas`鐢熸垚锛屼竴閿皟鐢紝闈炲父鏂逛究銆備互涓嬫槸绀轰緥锛� + +- HTML绀轰緥 + - DOM閮ㄥ垎 + ``` html + <canvas id="qrcode" width="200" height="200"></canvas> + ``` + + - JS閮ㄥ垎 + ``` javascript + // 鑾峰彇uQRCode瀹炰緥 + var qr = new UQRCode(); + // 璁剧疆浜岀淮鐮佸唴瀹� + qr.data = "https://uqrcode.cn/doc"; + // 璁剧疆浜岀淮鐮佸ぇ灏忥紝蹇呴』涓巆anvas璁剧疆鐨勫楂樹竴鑷� + qr.size = 200; + // 璋冪敤鍒朵綔浜岀淮鐮佹柟娉� + qr.make(); + // 鑾峰彇canvas鍏冪礌 + var canvas = document.getElementById("qrcode"); + // 鑾峰彇canvas涓婁笅鏂� + var canvasContext = canvas.getContext("2d"); + // 璁剧疆uQRCode瀹炰緥鐨刢anvas涓婁笅鏂� + qr.canvasContext = canvasContext; + // 璋冪敤缁樺埗鏂规硶灏嗕簩缁寸爜鍥炬缁樺埗鍒癱anvas涓� + qr.drawCanvas(); + ``` + +- uni-app绀轰緥 + - Template閮ㄥ垎 + ``` html + <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas> + ``` + + - JS閮ㄥ垎 + ``` javascript + onReady() { + // 鑾峰彇uQRCode瀹炰緥 + var qr = new UQRCode(); + // 璁剧疆浜岀淮鐮佸唴瀹� + qr.data = "https://uqrcode.cn/doc"; + // 璁剧疆浜岀淮鐮佸ぇ灏忥紝蹇呴』涓巆anvas璁剧疆鐨勫楂樹竴鑷� + qr.size = 200; + // 璋冪敤鍒朵綔浜岀淮鐮佹柟娉� + qr.make(); + // 鑾峰彇canvas涓婁笅鏂� + var canvasContext = uni.createCanvasContext('qrcode', this); // 濡傛灉鏄粍浠讹紝this蹇呴』浼犲叆 + // 璁剧疆uQRCode瀹炰緥鐨刢anvas涓婁笅鏂� + qr.canvasContext = canvasContext; + // 璋冪敤缁樺埗鏂规硶灏嗕簩缁寸爜鍥炬缁樺埗鍒癱anvas涓� + qr.drawCanvas(); + } + ``` + +- 寰俊灏忕▼搴忥紝鎺ㄨ崘浣跨敤Canvas 2D锛屽叧浜嶤anvas 2D鐨勪娇鐢ㄨ鍙傝�冨井淇″紑鏀炬枃妗c�� + +### 楂樼骇鐢ㄦ硶 + +鑰冭檻鍒伴儴鍒嗗钩鍙板彲鑳戒笉鏀寔`canvas`锛屾墍浠uQRCode`骞舵病鏈夊己鍒惰姹傚拰`canvas`涓�璧蜂娇鐢紝鎮ㄨ繕鍙互閫夋嫨鍏朵粬鏂瑰紡鏉ョ敓鎴愪簩缁寸爜锛屼緥濡備娇鐢╜js`鎿嶄綔`dom`杩涜缁樺埗鎴栨槸浣跨敤`svg`缁樺埗绛夈�備互涓嬫槸绀轰緥锛� + +- uni-app v-for+view + +```html +<template> + <view> + <view class="qrcode"> + <view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;"> + <view v-for="(col, colI) in row" :key="colI"> + <view v-if="col.isBlack" style="width: 10px;height: 10px;background-color: black;"> + <!-- 榛戣壊鐮佺偣 --> + </view> + <view v-else style="width: 10px;height: 10px;background-color: white;"> + <!-- 鐧借壊鐮佺偣 --> + </view> + </view> + </view> + </view> + </view> +</template> + +<script> + import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'; + + export default { + data() { + return { + modules: [] + } + }, + onLoad() { + const qr = new UQRCode(); + qr.data = 'uQRCode'; + qr.make(); + this.modules = qr.modules; + }, + methods: { + + } + } +</script> +``` + +- js鎿嶄綔dom + +``` html +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>uQRCode浜岀淮鐮佺敓鎴�</title> +</head> +<body> + <div id="qrcode" style="position: relative;"></div> + <script type="text/javascript" src="uqrcode.js"></script> + <script> + // 寮曞叆uQRCode + var UQRCode = window.UQRCode; + // 鑾峰彇uQRCode瀹炰緥 + var qr = new UQRCode(); + // 璁剧疆浜岀淮鐮佸唴瀹� + qr.data = "https://uqrcode.cn/doc"; + // 璁剧疆浜岀淮鐮佸ぇ灏忥紝蹇呴』涓巆anvas璁剧疆鐨勫楂樹竴鑷� + qr.size = 200; + // 璁剧疆浜岀淮鐮佸墠鏅浘锛屽彲浠ユ槸璺緞 + qr.foregroundImageSrc = + 'data:image/png;base64,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'; + // 璋冪敤鍒朵綔浜岀淮鐮佹柟娉� + qr.make(); + + var drawModules = qr.getDrawModules(); + // 閬嶅巻drawModules鍒涘缓dom鍏冪礌 + var qrHtml = ''; + for (var i = 0; i < drawModules.length; i++) { + var drawModule = drawModules[i]; + switch (drawModule.type) { + case 'tile': + /* 缁樺埗灏忓潡 */ + qrHtml += `<div style="position: absolute;left: ${drawModule.x}px;top: ${drawModule.y}px;width: ${drawModule.width}px;height: ${drawModule.height}px;background: ${drawModule.color};"></div>`; + break; + case 'image': + /* 缁樺埗鍥惧儚 */ + qrHtml += `<img style="position: absolute;left: ${drawModule.x}px;top: ${drawModule.y}px;width: ${drawModule.width}px;height: ${drawModule.height}px;" src="${drawModule.imageSrc}" />`; + break; + } + } + document.getElementById('qrcode').innerHTML = qrHtml; + </script> +</body> +</html> +``` + +- svg +``` html +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>uQRCode浜岀淮鐮佺敓鎴�</title> +</head> +<body> + <svg id="qrcode" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg> + <script type="text/javascript" src="uqrcode.js"></script> + <script> + // 寮曞叆uQRCode + var UQRCode = window.UQRCode; + // 鑾峰彇uQRCode瀹炰緥 + var qr = new UQRCode(); + // 璁剧疆浜岀淮鐮佸唴瀹� + qr.data = "https://uqrcode.cn/doc"; + // 璁剧疆浜岀淮鐮佸ぇ灏忥紝蹇呴』涓巆anvas璁剧疆鐨勫楂樹竴鑷� + qr.size = 200; + // 璁剧疆浜岀淮鐮佸墠鏅浘锛屽彲浠ユ槸璺緞 + qr.foregroundImageSrc = + 'data:image/png;base64,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'; + // 璋冪敤鍒朵綔浜岀淮鐮佹柟娉� + qr.make(); + + var drawModules = qr.getDrawModules(); + // 閬嶅巻drawModules鍒涘缓svg鍏冪礌 + var qrHtml = ''; + for (var i = 0; i < drawModules.length; i++) { + var drawModule = drawModules[i]; + switch (drawModule.type) { + case 'tile': + /* 缁樺埗灏忓潡 */ + qrHtml += `<rect x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" style="fill: ${drawModule.color};" />`; + break; + case 'image': + /* 缁樺埗鍥惧儚 */ + qrHtml += `<image href="${drawModule.imageSrc}" x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" />`; + break; + } + } + document.getElementById('qrcode').innerHTML = qrHtml; + </script> +</body> +</html> +``` + +> 鏇村鐢ㄦ硶澶у鑷鎺㈢储鍜紝鏈熷緟鍒嗕韩鍝焴 + +### 瀵煎嚭涓存椂鏂囦欢璺緞 + +鍘熺敓鏂瑰紡鍩轰簬`Canvas`鐨勶紝璇疯嚜琛屽弬闃呭悇骞冲彴`Canvas`鐨勫鍑烘柟寮忋�備互涓嬫槸閮ㄥ垎绀轰緥锛� + +- uni-app +```javascript +// 閫氳繃uni.createCanvasContext鏂瑰紡鍒涘缓缁樺埗涓婁笅鏂囩殑锛屽搴斿鍑篈PI涓簎ni.canvasToTempFilePath +// 璋冪敤瀹宑tx.draw()鏂规硶鍚庝笉鑳界涓�鏃堕棿瀵煎嚭锛屽惁鍒欎細寮傚父锛岄渶瑕佹湁涓�瀹氱殑寤舵椂 +setTimeout(() => { + uni.canvasToTempFilePath( + { + canvasId: this.canvasId, + fileType: this.fileType, + width: this.canvasWidth, + height: this.canvasHeight, + success: res => { + console.log(res); + }, + fail: err => { + console.log(err); + } + }, + // this // 缁勪欢鍐呬娇鐢ㄥ繀浼犲綋鍓嶅疄渚� + ); +}, 300); +``` + +- Canvas2D +```javascript +// 寰楀埌base64 +console.log(canvas.toDataURL()); +// 寰楀埌buffer +console.log(canvas.toBuffer()); +``` + +### 淇濆瓨浜岀淮鐮佸埌鏈湴鐩稿唽 + +蹇呴』鍦ㄥ鍑轰复鏃舵枃浠惰矾寰勬垚鍔熷悗鍐嶆墽琛屼繚瀛樸�倁ni-app閫氱敤淇濆瓨鏂瑰紡锛圚5闄ゅ锛夛細 +```javascript +uni.saveImageToPhotosAlbum({ + filePath: tempFilePath, + success: res => { + console.log(res); + }, + fail: err => { + console.log(err); + } +}); +``` + +H5鍙互閫氳繃璁剧疆`<a>`鏍囩`href`灞炴�х殑鏂瑰紡杩涜淇濆瓨锛� +```javascript +const aEle = document.createElement('a'); +aEle.download = 'uQRCode'; // 璁剧疆涓嬭浇鐨勬枃浠跺悕锛岄粯璁ゆ槸'涓嬭浇' +aEle.href = tempFilePath; +document.body.appendChild(aEle); +aEle.click(); +aEle.remove(); // 涓嬭浇涔嬪悗鎶婂垱寤虹殑鍏冪礌鍒犻櫎 +``` +缁忚繃娴嬭瘯锛孭C绔祻瑙堝櫒鍙互涓嬭浇锛岄儴鍒嗗畨鍗撹嚜甯︽垨绗笁鏂规祻瑙堝櫒鍙互涓嬭浇锛屽畨鍗撳井淇℃祻瑙堝櫒涓嶉�傜敤锛岀Щ鍔ㄧiOS鎵�鏈夋祻瑙堝櫒鍧囦笉閫傜敤锛屽樊寮傝緝澶э紝杩樻槸鎺ㄨ崘鍚勪綅瀵煎嚭鏂囦欢缁欏浘鐗囩粍浠舵樉绀猴紝鐒跺悗鎻愮ず鐢ㄦ埛閫氳繃闀挎寜鍥剧墖杩涜淇濆瓨杩欑鏂瑰紡銆� + +## uni-app缁勪欢鏂瑰紡 + +### 瀹夎 + +閫氳繃uni-app鎻掍欢甯傚満鍦板潃瀹夎锛歔https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)銆傝缁嗛厤缃绉绘鍒帮細鏂囨。 > [uni-app缁勪欢](https://uqrcode.cn/doc/document/uni-app.html)銆� + +### 寮曞叆 + +uni-app榛樿涓篹asycom妯″紡锛屽彲鐩存帴閿叆`<uqrcode>`鏍囩銆� + +### 绠�鍗曠敤娉� + +瀹夎`uqrcode`缁勪欢鍚庯紝鍦╜template`涓敭鍏<uqrcode/>`銆傝缃甡ref`灞炴�у彲浣跨敤缁勪欢鍐呴儴鏂规硶锛宍canvas-id`灞炴�т负缁勪欢鍐呴儴鐨刢anvas缁勪欢鏍囪瘑锛宍value`灞炴�т负浜岀淮鐮佺敓鎴愬搴斿唴瀹癸紝`options`涓洪厤缃�夐」锛屽彲閰嶇疆浜岀淮鐮佹牱寮忥紝缁樺埗Logo绛夛紝璇﹁锛歔options](https://uqrcode.cn/doc/document/uni-app.html#options) 銆� + +``` html +<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode> +``` + +### 瀵煎嚭涓存椂鏂囦欢璺緞 + +涓轰簡淇濊瘉鏂规硶璋冪敤鎴愬姛锛岃鍦� [complete](https://uqrcode.cn/doc/document/uni-app.html#complete) 浜嬩欢杩斿洖`success=true`鍚庤皟鐢ㄣ�� + +```javascript +// uqrcode涓虹粍浠剁殑ref鍚嶇О +this.$refs.uqrcode.toTempFilePath({ + success: res => { + console.log(res); + } +}); +``` + +### 淇濆瓨浜岀淮鐮佸埌鏈湴鐩稿唽 + +涓轰簡淇濊瘉鏂规硶璋冪敤鎴愬姛锛岃鍦� [complete](https://uqrcode.cn/doc/document/uni-app.html#complete) 浜嬩欢杩斿洖`success=true`鍚庤皟鐢ㄣ�� + +```javascript +// uqrcode涓虹粍浠剁殑ref鍚嶇О +this.$refs.uqrcode.save({ + success: () => { + uni.showToast({ + icon: 'success', + title: '淇濆瓨鎴愬姛' + }); + } +}); +``` + +## 鏇村浣跨敤璇存槑璇峰墠寰�瀹樻柟鏂囨。鏌ョ湅锛歔https://uqrcode.cn/doc](https://uqrcode.cn/doc)銆� \ No newline at end of file -- Gitblit v1.8.0