網頁端&小程式的前端note:字串生成二維碼
注意最後的draw方法改為:
不保證一定能用,若企鵝大佬修改了方法,js檔案也要跟著改,若不理解其中的方法,參考微信官網
要點:
ctx = wx.createCanvasContext(canvas, $this),
ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
ctx.setFillStyle('#000000');//黑色
ctx.fill();
ctx.draw();
draw: function (str, canvas, cavW, cavH, $this, ecc) {
var that = this ;
ecclevel = ecc || ecclevel;
canvas = canvas || _canvas;
if (!canvas) {
console.warn('No canvas provided to draw QR code in!')
return;
}
var size = Math.min(cavW, cavH);
str = that.utf16to8(str);//增加中文顯示
var frame = that.getFrame(str),
// 元件中生成qrcode需要繫結this
ctx = wx.createCanvasContext(canvas, $this),
px = Math.round(size / (width + 8));
var roundedSize = px * (width + 8),
offset = Math.floor((size - roundedSize) / 2);
size = roundedSize;
ctx.clearRect(0, 0, cavW, cavW);
ctx.setFillStyle('#000000');
for (var i = 0; i < width; i++) {
for (var j = 0; j < width; j++) {
if (frame[j * width + i]) {
ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);//原是fillRect()
}
}
}
ctx.fill();//曾經因為沒有fill方法耽誤了一個小時
ctx.draw();
}
}
var QRCode = require('../../../utils/weapp-qrcode.js');
QRCode.api.draw(qrcodeStr, 'my-qrcode', 200, 200);
<view>我的二維碼</view>
<view class="qrcode-view">
<canvas style="width: 200px; height: 200px;" canvas-id="my-qrcode"></canvas>
</view>
<view class="scan-qrcode">掃一掃上面的二維碼</view>
網頁端:
$('#my-qrcode').html('');
if(data){
$('#my-qrcode').qrcode({
render: 'canvas',
width: 200,
height: 200,
text: data
});
}
var myQrCodeInterval;
$(function(){
changeQrCode();
myQrCodeInterval = setInterval(function(){
changeQrCode();
}, 60*1000)
});
相關推薦
網頁端&小程式的前端note:字串生成二維碼
注意最後的draw方法改為: 不保證一定能用,若企鵝大佬修改了方法,js檔案也要跟著改,若不理解其中的方法,參考微信官網 要點: ctx = wx.createCanvasContext(canvas, $this), ctx.rect(px *
微信小程式將字串生成二維碼圖片
最近接到這樣一個需求,需要在小程式裡將十幾位隨機字串轉換為二維碼的形式展示。公眾號中(另一終端)呼叫JSSDK掃一掃功能,去掃描小程式生成的二維碼。得到字串,然後進行接下來的邏輯處理。 下面記錄的是小程式中生成二維碼圖片這一操作,用的是原文作者改版後的生成
微信小程式例項詳解,掃描二維碼獲取資訊
1.最簡單的掃二維碼獲得資訊。 首先,在網上找一個二維碼生成網站,生成一個二維碼,我用的是草料二維碼,隨便生成了一個二維碼做測試。 就這個。 我搭建的介面如下: 如圖可見,點選1中的“點我掃一掃”,可以掃二維碼,掃錯了如2所示,掃對了如3所示。“你傻不傻啊?”就是上圖的二
支付寶小程式開發練習,顯示自定義二維碼(四)
之前用了幾種方式 1.後端生成二維碼需要加密的字元竄,小程式前端利用二維碼元件渲染canvas畫出二維碼,由於支付寶小程式沒有這樣的元件,於是去找微信小程式的解決方案,把微信小程式的二維碼前端元件搬過來用,除錯到不報錯了,結果二維碼顯示不出來,原因很難找,宣告失敗! 2.
QRCode.js:js生成二維碼
http://www.runoob.com/w3cnote/javascript-qrcodejs-library.html 參考菜鳥教程 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
Android 地址或字串生成二維碼
首先新增jar包生成bitmap方法,直接賦值即可public static Bitmap createQRImage(String url, final int width, final int he
移植qrencode到ARM-Linux,實現字串生成二維碼圖片
系統環境:Ubuntu 12.04.3 LTS 交叉編譯器:arm-none-linux-gnueabi-gcc(v4.5.2) 1、交叉編譯zlib庫 tar -xzvf zlib-1.2.3.tar.gz export CC=arm-none-l
網頁端&小程式的前端note:form的button去掉圓角
form裡面的button按鈕是預設帶圓角,相信很多人都會在釋出版本後被上級或測試要求去掉圓角,出於form自帶的提交按鈕使用效果非常滿意,很多人仍會保留該提交button,樣式的修改下圖有 至於form的提交事件,官網非常詳細 注意:form是不會攜帶vi
微信小程式 - 生成二維碼
生成二維碼有兩種方式: 前端生成(僅展示用) 1 onShow: function() { 2 3 $.setTitle('推廣二維碼'); 4 5 let _this = this; 6 wx.request({ 7
微信小程式---生成二維碼工具weapp-qrcode.js的使用
在小程式中引入weapp-qrcode.js,然後在需要轉化的頁面引入這個js, var QRCode=require("../../utils/weapp-qrcode.js") 頁面wxml <canvas class='canvas' canvas-id='
基於base64微信小程式生成二維碼外掛-weapp-qrcode.js
weapp-qrcode PS: 主要在node-yaqrcode專案基礎上進行改造適應微信小程式 說明 只需要在 wxml 檔案中增加個image標籤動態引用base64編碼即可 <image src="{{qrcodeURL}"> </image> JS呼叫例子: c
微信小程式生成二維碼外掛基於base64-weapp-qrcode.js
# weapp-qrcode 微信小程式生成二維碼的外掛,基於base64編碼輸出二維碼,不依賴canvas 詳情demo可以去github上預覽-**[weapp-qrcode.js](https://github.com/Pudon/hello-pixi)** https
微信小程式-生成二維碼-如何在本地js中除錯呼叫
官方連結 let appId = 'wxbf338********361'; let secret = 'ce5e6c73*********************8a'; let getUrl = 'https://api
Java生成二維碼小程式
(原始碼地址:連結: https://pan.baidu.com/s/16SGJ5h9KLjsbwuRgqVl_TA 提取碼: 96mr ,如果失效請在下方留言,我重新分享。) 用Java寫的生成二維碼得桌面小程式: 生成的二維碼如下:
微信小程式生成二維碼、生成圖片、儲存圖片到本地相簿
<!--畫布遮罩--> <!--生成二維碼的畫布--> <canvas canvas-id="myCanvas" style='width:{{ercode_canvasWidth}}px;height:{{ercode_canvasHeight
微信小程式動態生成二維碼
預覽效果如下 思路 1.先引用qrcode.js(自己從網上下載) 2.設定二維碼大小 3. 繪製二維碼 4. 提交按鈕重新整理獲取二維碼 wxml wxss js樣式就引入onLoad裡的內容,其他的和上部分思路里的一樣,直接加入裡面就好了
微信小程式生成二維碼介面呼叫
小程式生成二維碼這個介面可以在小程式裡面做, 也可以在java後臺做, 此篇部落格記錄的是在java後臺請求微信的介面生成; 場景: 如果要生成帶引數二維碼拿出去做裂變推廣, 生成的二維碼數量多. 此時不可能一個個通過草料或者阿拉丁來做, 只能請求官方的介面生成; 準備工作: a
微信小程式java生成二維碼-帶引數
/** * 生成小程式二維碼 -並儲存到本地-返回二維碼地址 * * @param request * @param access_token * @param path * @param width * @param scene * @return */public st
小程式生成二維碼分享朋友圈的功能
一、如何生成小程式分享頁面的二維碼?通過後臺介面可以獲取小程式任意頁面的二維碼,具體可以參考https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html可以選擇你所需要的小程式碼,給到後臺相應的引數生成即可。
微信小程式生成二維碼,並且進行傳參。
微信小程式生成二維碼第一步.首先我們需要去拿到Token值 第一步是一個比較常規的操作,未遇到大的問題。第二步.拿著Token進行換取二維碼 這一不是很關鍵的地方,騰訊用token換取二維碼的方法有三組介面A,B,C 我們推薦生成並使用小程式碼,它具有更好的辨識度