二維碼生成 · tpAdmin 文檔

二維碼生成使用的是 `QRCode.js` ##在線體驗 [http://tpadmin.demo.tianpian.net.cn](http://tpadmin.demo.tianpian.net.cn) 默認管理員帳號：admin，默認管理員密碼：123456 打開 `示例 - 二維碼生成` 進行在線體驗 ##使用示例 ###HTML 部分 ``` <div class="form form-horizontal"> <div class="row cl"> <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>Url 地址：</label> <div class="formControls col-xs-6 col-sm-6"> <input type="text" class="input-text" placeholder="請填寫鏈接，包含 http 等協議前綴，支持 URL Scheme" name="url" id="qrcode-input"> </div> <div class="col-xs-3 col-sm-3"></div> </div> <div class="row cl"> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3"> <button type="button" class="btn btn-primary radius generate">  生成  </button> </div> </div> <div class="row cl mt-50"> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3"> <div id="qrcode"></div> <p class="mt-10 c-red" id="qrcode-url"></p> </div> </div> </div> ``` ###JavaScript 部分 ``` // 引入文件 <script type="text/javascript" src="__LIB__/qrcode/qrcode.min.js"></script> var url = '{:\\think\\Request::instance()->url(true)}'; var qrcode = new QRCode(document.getElementById("qrcode"), { text: url, width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H }); $("#qrcode-url").html(url); $(".generate").click(function () { url = $("#qrcode-input").val(); if (!url || !/^[\w]*:\/\//i.test(url)) { layer.alert('請輸入正確的鏈接，支持 URL Scheme'); return ; } qrcode.makeCode(url); $("#qrcode-url").html(url); }); ``` >[info] 詳細使用方法見官方的 `README.md` 文件： **** # QRCode.js QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM. QRCode.js has no dependencies. ## Basic Usages ``` <div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie"); </script> ``` or with some options ``` <div id="qrcode"></div> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "http://jindo.dev.naver.com/collie", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H }); </script> ``` and you can use some methods ``` qrcode.clear(); // clear the code. qrcode.makeCode("http://naver.com"); // make another code. ``` ## Browser Compatibility IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC. ## License MIT License ## Contact twitter @davidshimjs