1. 程式人生 > >網頁端&小程式的前端note:字串生成二維碼

網頁端&小程式的前端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.jsjs生成

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

網頁&程式前端noteform的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    我們推薦生成並使用小程式碼,它具有更好的辨識度