常大家對于軟件開發都是一行一行地敲代碼，程序員也被稱為 “碼農”，但實際上現在隨著程序開發技術的不斷發展，目前開始普及 "無代碼" 編程，不需要你懂任何代碼知識，只需要拖動組件，即可完成快速開發。

今天鋒哥要給大家推薦這個「Zion」低代碼開發平臺，通過可視化和組件化模塊就能實現制作小程序、網站。

Zion體驗

目前「Zion」支持微信小程序、Web頁面以及H5的無代碼開發，App端的開發，未來也會上線。由于鋒哥也是個網站前后端開發者，對于「Zion」的網頁低代碼開發比較感興趣。

新建立網頁開發，通過雙擊背景進入聚焦模式后，可以看到左邊有各種組件功能，你可以自由拖拉到頁面上，非常像原型設計工具。最貼心的是右邊會顯示移動端的響應兼容模式，你可以對手機端單獨設置樣式。

對于每個組件模塊都提供了豐富的樣式設置，如果前端開發都需要手動寫 CSS 代碼，通過這種 "無代碼" 編程方式的確要方便多了。

組件也提供了行為設置功能，包括可以設置功能請求、用戶事件、邏輯時間、刷新數據、設置數值、二維碼、圖片、視圖等。

對于下面這種布局，傳統前端開發折騰起來還是比較麻煩的，在「Zion」里面你可以自由拖動到你需要的位置，圖片還支持懸浮、垂直流、以及懸浮編輯。

到這里一些用戶可能會覺得「Zion」也只能做靜態頁面？實際上「Zion」還提供了數據模型構建功能，也就是數據庫，通過新建立表、字段以及數據關系，然后關聯到相關的組件上，就可以實現動態數據了。例如下面我給 Xbox 手柄創建了不同顏色的數據庫字段。

需要顯示不同顏色的手柄的剩余庫存，可以利用文本框，添加行為條件，選擇你剛才添加的數據庫字段，這樣就會關聯上了。這樣對比傳統的開發模式，要方便多了。

體驗下來通過「Zion」制作網頁的確很方便，例如下面這個頁面，如果用傳統開發需要前端/后端搭建、數據庫搭建以及最終的部署，是十分繁雜的，而用「Zion」的話，基本上 5 分鐘左右就完事，都是拖拉組件，所以效率要提高不少。

最后可以把制作好的項目通過「Zion」部署發布上線，實現從設計到交付的完全自動化，免去折騰服務器網站環境各種配置。

另外小程序無代碼開發基本和網頁一樣，都是通過拖拉組件來制作，需要注意的是你需要先注冊微信小程序之后才能發布程序。具體「Zion」官方有教程，這里就不多介紹了。

通過 API 接口你還可以快速制作查詢天氣快遞 / 星座運勢 / 天天雞湯 / 那年今日 /繁簡文字轉換 / 笑話大全 / 生成海報等小程序。

通過「Zion」開發小程序上手門檻低。快速實現應用的開發、建構和發布。提供穩定的開發環境、最優的發布路徑，最快的迭代速度，前端一站式集成開發，后端提供永久支持保障。

Zion 社群&社區

值得一提的是，「Zion」有著非常活躍的社群，每天都會有大量的新老用戶在社群進行交流、提問，除了官方人員幾乎24小時的積極答疑之外，也有很多正在使用的老用戶會幫助新用戶解決問題，你可以在登陸的「Zion」之后在編輯器的右下角看到進入社群的二維碼進群交流。

另外據官方透露，用「Zion」自己搭建的新社區也即將上線，里邊將會提供更加全面的幫助文檔以及小程序、網頁的搭建方案，幫助新用戶快速上手。

團隊

根據官方介紹「Zion」的創始成員來自于美國硅谷，畢業于劍橋、康奈爾、卡內基梅隆等世界名校，曾任職于 Google、Facebook、Dropbox、Groupon、Medallia 和 Yahoo 等硅谷一線大廠或獨角獸企業。

總結

體驗下來才知道低代碼開發原來可以這么 “爽” ，像傳統開發某個功能或者需要對網頁進行設計排版，整個過程非常折騰，而通過「Zion」可以快速完成從需求到應用，可以節約不少開發成本。

同時「Zion」也集成了數據模型、遠程數據、行為功能，降低大型系統研發的復雜性，降低搭建的難度，所以這種低代碼平臺會成為中小企業一種新選擇。

最后，感興趣的話，快用「Zion」制作你第一個小程序 / 網站吧！

對了「Zion」使用完全免費！完全免費！完全免費！

牌在建立自己的品牌網站時，都會有設計微信小程序的想法，但是許多品牌常常缺乏專業人員，不了解微信原生小程序和網頁版微信小程序的區別何在，接下來就由星凱網絡來對此稍作介紹。

第一點，微信原生小程序使用的是微信制定的標準，HTML語義有限，完成以后需要經過微信審核，審核通過方可發布。而微信網頁版小程序一經成功發布，事后可以隨時隨意修改小程序的內容，避免了每一次版本更新都要再提交審核的麻煩。因為網站源碼就在品牌自己的手中。

第二點，兩者運行環境不同

應用HTML5的網頁版微信小程序的運行環境即包括webview的瀏覽器本身。而微信小程序的運行環境則類似一個并不完整的瀏覽器，在此處將微信小程序的運行環境形容為“不完整的瀏覽器”有著以下幾個原因：

1、微信小程序在其開發過程中將會使用到部分與HTML5相關的技術。

2、微信小程序完成之后，需要將其提交給微信進行審核，而微信可以在微信本身版本不進行更新的情況下將小程序的更新實裝到微信之中。

3、微信小程序的運行環境是微信開發團隊基于瀏覽器內核完全重構的內置解析器，這個內置解析器專門針對微信小程序專了優化，通過與自己定義的開發語言標準配合，從而提升小程序的運行性能。

第三點，兩者開發成本不同

原生的微信小程序需要嚴格按照微信的開發文檔以及使用微信規定的語言來開發，為了聘請具有相應能力的人或是讓員工學會相關技術，成本將會相對來說有所提高。

但是微信的網頁版小程序則只需要開發一個手機網站，即可將其封裝成為一個基于瀏覽器運行的微信小程序，這就意味著任何一個品牌網站都能夠被打包成為一個手機網頁版微信小程序。

第四點，兩者可獲取的系統權限級別不同

微信小程序相比起HTML5的網頁版應用，可以取得更多的系統權限，并且能夠和微信小程序完美契合，微信官方也就此宣稱它具有native App的流暢性能，同時這也是微信小程序與網頁版小程序相比最大的優勢所在。網頁版的大多數功能被限定在業務邏輯簡單的功能之中的最大原因便是其無法獲取足夠的系統權限，無法實現較為高級的功能。微信小程序花費更多成本，搭載在更復雜的運行環境下，又被高標準要求所換取的便是優秀的質量和良好的口碑。

如今圍繞微信生態相關開發已經非常常見，本期帶來如何通過 qrcode.js 實現微信內置瀏覽器動態生成二維碼并能夠長按識別 以及 通過 html2canvas 生成圖片并長按保存

說幾個知識點

微信長按彈出識別選項的原理

• 微信客戶端檢測到用戶長按img標簽
• 微信主動進行截屏并識別圖片，二維碼識別采用的是截屏而不是通過img標簽
• 微信識別成功后執行相關操作

Base64

• Base64是網絡上最常見的用于傳輸8Bit字節碼的編碼方式之一，Base64就是一種基于64個可打印字符來表示二進制數據的方法

Blob

• HTML5中的Blob對象與MySQL中的BLOB對象有區別，HTML5中的Blob對象除了存放二進制數據外還可以設置這個數據的MINE類型，這相當于對文件的存儲，其它很多二進制對象也是從這個對象繼承的

canvas.toDataURL([type, encoderOptions])

• type : 指定圖片類型，默認值 image/png
• encoderOptions : 為 image/jpeg 或 image/webp 類型的圖片設置圖片質量，取值0-1，超出則以默認值0.92替代
• 作用: 通過canvas進行轉化圖片

準備工作

結合微信規范明確需求

• 微信img標簽通過src屬性可實現長按彈出選項(保存至手機，圖片為二維碼的情況下會出現識別二維碼)
• 二維碼圖片若為本地圖片或服務器圖片(即不需要進行動態生成)只需要正常編寫代碼即可實現
• 微信針對內置瀏覽器內的頁面圖片有著自己的一套適應邏輯與規范，canvas的圖片和base64編碼格式的圖片在安卓與ios手機上會出現不同的問題

確定實現方案

• 本例采用第三方js庫實現生成二維碼
• 針對生成的base64編碼的圖片微信無法長按識別需要在前端進行格式和image對象重新轉換
• 生成的圖片彈窗展示，避免出現其他元素影響微信識別率

開發環境

開發平臺

• MacOS

開發環境

• Vue + node

客戶端環境

• Google Chrome
• Wechat Webview

技術實現

本例的技術實現方案均在Vue項目環境下實現的

引入第三方js庫

提供兩種引入方式，兩種方式是不同的js庫，方便大家選擇和使用

// 第一種方式
// qrcode.js官方GitHub文檔: https://github.com/davidshimjs/qrcodejs
<script src="static/js/qrcode.js"></script>

// 第二種方式
npm install qrcodejs2
import qrCode from 'qrcodejs2'

組件中調用

HTML

<div class="qrcode-panel" id="qrcode"></div>

JS

// 簡單調用
new QRCode(document.getElementById('qrcode'), 'your content');
// new QRCode(element, option)
// element 顯示二維碼的元素或該元素的 ID
// option 參數配置

// 標準調用
var qrcode=new QRCode(document.getElementById("qrcode"), {
	text: "https://www.xxx.com?did=123456&id=123&userid=456",
	width: 160, //圖像寬度
	height: 160, // 圖像高度
	render: 'canvas', // 生成格式(table 和 canvas)
	colorDark : "#000000", //前景色
	colorLight : "#ffffff", //背景色
	correctLevel : QRCode.CorrectLevel.H // 容錯級別
});
// 容錯級別，可設置為：
QRCode.CorrectLevel.L（最大 7% 的錯誤能夠被糾正）
QRCode.CorrectLevel.M（最大 15% 的錯誤能夠被糾正）
QRCode.CorrectLevel.Q（最大 25% 的錯誤能夠被糾正）
QRCode.CorrectLevel.H（最大 30% 的錯誤能夠被糾正）

// 其他公共方法
QRCode.makeCode(text) // 設置二維碼內容
QRCode.clear() // 清除二維碼

重置 Image 對象

重置的原因是原JS生成的 image 和 canvas 對象無法在微信端長按識別

var canvas=document.getElementsByTagName('canvas')[0];
var img=this.convertCanvasToImage(canvas);
document.getElementById("qrcode").append(img);

convertCanvasToImage(canvas) {
	//新建Image對象
	var image=new Image();
	// canvas.toDataURL 返回的是一串Base64編碼的URL
	image.src=canvas.toDataURL("image/png");
	image.id='qrcodeImg';
	return image;
}

后續細節處理

至此，一個能夠滿足長按識別的動態二維碼已經生成，不繼續處理的話會有兩張二維碼，長按對比就能看出，qrcode.js 生成的二維碼長按無法識別，而經過重置之后的對象是可以實現此功能的。

我的處理方式是兩個二維碼都保留，將二維碼圖片進行重新定位，將重置的二維碼圖片置于不能識別二維碼上層，不去頻繁操作DOM節點的顯示隱藏。

生成的二維碼通過 append 的方式插入到dom節點中，在關閉操作時需要將之前生成的 canvas 和 image 去除

微信內置瀏覽器生成canvas圖片保存

上述教程可以實現動態生成二維碼進行保存和長按識別，但是如果需要將HTML內容生成canvas保存就存在問題了。

針對保存需要注意的幾個問題：

• canvas禁止跨域
• 安卓微信長按不能保存base64圖片
• 微信限制Blob類型圖片的保存
• 使用 canvas.toDataURL 繪制時的類型使用 image/jpeg 進行保存

技術選型

使用第三方JS庫 html2canvas 進行處理

識別和生成原理：

• 腳本直接在用戶瀏覽器上截取網頁或部分網頁的"屏幕截圖"
• "屏幕截圖"基于DOM，因此它可能不是真實表示的100％準確，因為它沒有制作實際的屏幕截圖，而是根據頁面上可用的信息構建屏幕截圖

存在的問題：

• 正是因為 html2canvas 不是基于真正的屏幕截圖去識別處理，所以脫離了文檔流，或者文檔流異常的元素會無法被截取下來
• html2canvas 只會截取到目標元素寬高范圍內的內容
• 對部分css樣式支持不好，兼容性差的屬性列表請 后臺留言獲取

一些可能需要的參數

• useCORS : 是否嘗試使用CORS從服務器加載圖像
• async : 是否異步解析和呈現元素
• scale : 用于渲染的比例。默認為瀏覽器設備像素比率window.devicePixelRatio
• allowTaint : 是否允許畫布被污染，被污染的canvas是沒法使用toDataURL()轉base64流的，部分細節請 后臺留言獲取
• 更多 html2canvas 參數請 后臺留言獲取

引入第三方JS庫

使用 html2canvas

import html2canvas from 'html2canvas'

組件中調用

HTML

<div class="html2canvas-conetent" ref="canvasContent">
	<img src="/static/images/canvas.jpg">
	<span>測試Title</span>
</div>
<button @click="showCanvas()">生成canvas圖片</button>

JS

• 使用 html2canvas 推薦的promise方法

showCanvas() {
	let self=this;
	html2canvas(self.$refs.canvasContent).then(function(canvas) {
        self.imgUrl=canvas.toDataURL();
        self.showCanvasImg=true;
	});
}
// 異步解析調用和呈現元素
showCanvas() {
	let self=this;
	html2canvas(self.$refs.canvasContent  {
		async: true
	}).then(canvas=> {
		self.imgUrl=canvas.toDataURL();
		self.showCanvasImg=true;
	});
}

實現效果

源碼地址

• Github地址(請點擊原文鏈接查看)