微信小程序即將推出，還沒(méi)推出就火的不行了?；谖⑿胚@個(gè)巨大平臺(tái)，小程序必然能有巨大成功。不過(guò)它并不能完全取代App，該開(kāi)發(fā)App還得開(kāi)發(fā)。如果我們自己想實(shí)現(xiàn)一個(gè)基于自己的APP包含類(lèi)似微信的小程序功能，該如何實(shí)現(xiàn)了？我們先來(lái)看看小程序的技術(shù)特點(diǎn)。

小程序的特點(diǎn)

1. 跨平臺(tái)，微信就像JRE，在不同操作系統(tǒng)上都有實(shí)現(xiàn)，所以微信上的小程序就像運(yùn)行在JRE上的java程序，從而實(shí)現(xiàn)跨平臺(tái)。另外解決了多平臺(tái)多機(jī)型的適配問(wèn)題。

2. 體驗(yàn)好，webview加載html是最容易的跨平臺(tái)方式，但是在手機(jī)上的體驗(yàn)太差。小程序和web開(kāi)發(fā)，以及h5其實(shí)沒(méi)有關(guān)系了，其ui和運(yùn)行機(jī)制完全是原生，所以體驗(yàn)比公眾號(hào)強(qiáng)多了。

3. 無(wú)需安裝，只需掃描二維碼。其實(shí)還是會(huì)有下載了，只不過(guò)下載的數(shù)據(jù)很小，用戶(hù)根本察覺(jué)不到。比如你開(kāi)發(fā)的小程序有10個(gè)頁(yè)面，用戶(hù)掃描的時(shí)候只會(huì)下載首頁(yè)的幾個(gè)文件，可能1k都不到，而且下載完就緩存在本地和內(nèi)存了。

其實(shí)還有一個(gè)最大的優(yōu)點(diǎn)是微信是巨量用戶(hù)的粘度最高的應(yīng)用了，基于這上面的小程序便于推廣，這里我們暫時(shí)不談。

我們?cè)賮?lái)看看缺點(diǎn)：

1. 只能基于微信入口，這是顯然的，目前得到的消息是不可能在桌面上有小程序的入口方式，不知道以后是否支持。

2. 只能使用微信應(yīng)用帶的功能，不能使用其它第三方比如地圖，支付，統(tǒng)計(jì)等功能。微信這些功能都有而且做的也很好，但是多元化更有利用長(zhǎng)遠(yuǎn)的技術(shù)發(fā)展。

3. 小程序的能力有限，有限的ui和有限的功能不能應(yīng)付復(fù)雜的交互和業(yè)務(wù)要求。另外開(kāi)發(fā)者也無(wú)法擴(kuò)展其基礎(chǔ)功能。

DeviceOne能做到既具備以上優(yōu)點(diǎn)，也能避免以上缺點(diǎn)，對(duì)此大家肯定會(huì)有所質(zhì)疑。我們先簡(jiǎn)單介紹一下DeviceOne針對(duì)以上幾點(diǎn)對(duì)應(yīng)的說(shuō)明，再看看一個(gè)示例。

DeviceOne的特點(diǎn)

1. 跨平臺(tái)，以js或lua為開(kāi)發(fā)語(yǔ)言，一次編寫(xiě)，發(fā)布到android，ios和windows平臺(tái)。而且也是自動(dòng)適配各種機(jī)型。

2. 體驗(yàn)好，從ui到功能，deviceone完全是原生實(shí)現(xiàn)，和html沒(méi)有任何關(guān)系。所以是原生的體驗(yàn)效果。

3. 無(wú)需安裝，這個(gè)我們可以從下面的例子再仔細(xì)分析。

4. 不是基于一個(gè)固定的框架App，也就是說(shuō)你可以做一個(gè)你自己的微信程序，我們暫且稱(chēng)之為主程序，可以有自己的圖標(biāo)，自己的入口，然后加載你自己定義的小程序。包括主程序都是完全可以熱升級(jí)，就像更新小程序一樣的方便。

5. deviceone把a(bǔ)pp開(kāi)發(fā)完全跨平臺(tái)組件化了，把開(kāi)發(fā)人員分二部分，開(kāi)發(fā)app的業(yè)務(wù)開(kāi)發(fā)人員和開(kāi)發(fā)原生組件的原生開(kāi)發(fā)人員。

5.1 開(kāi)發(fā)app的人員不需要懂a(chǎn)ndroid和ios，不需要有android和ios開(kāi)發(fā)環(huán)境，只需要js就能開(kāi)發(fā)app

5.2 開(kāi)發(fā)組件的人員不需要理解和了解具體app的業(yè)務(wù)需求，只需要開(kāi)發(fā)可以復(fù)用的跨平臺(tái)的ui和功能組件。所以可以集成任何第三方組件，比如可以集成百度地圖，也可以集成高德地圖，可以集成alipay也可以集成微信支付。

6. deviceone的組件具有擴(kuò)展功能，目前官方提供了100多個(gè)組件，其它開(kāi)發(fā)者提供了30多個(gè)組件，基于deviceone平臺(tái)，其它原生開(kāi)發(fā)者可以不斷的擴(kuò)展組件商店。

類(lèi)似小程序的示例

先看運(yùn)行效果圖

這是deviceone動(dòng)態(tài)加載組件API示例的一個(gè)應(yīng)用。我們稱(chēng)之為主程序，本身就是用deviceone開(kāi)發(fā)的。列表中列出的do_App, do_Global之類(lèi)的都是deviceone的組件，每個(gè)組件對(duì)應(yīng)一個(gè)新的程序，是示范這個(gè)組件功能的一個(gè)小例子，我們稱(chēng)之為小程序，但是本質(zhì)上和主程序沒(méi)有區(qū)別。

運(yùn)行機(jī)制很簡(jiǎn)單：

1. 程序啟動(dòng)從一個(gè)web服務(wù)獲取到一個(gè)json，里面包含多個(gè)組件的信息，包括名稱(chēng)，文件大小，下載小程序的url，文件md5值

2. 比較本地的舊的md5是否和新的md5是否一樣，如果不一樣，提示有更新，可以通過(guò)點(diǎn)擊更新按鈕下載最新的小程序，這里沒(méi)有使用二維碼掃描下載小程序的首頁(yè)，簡(jiǎn)單改造就能做到那樣。

3. 點(diǎn)擊一行，打開(kāi)新頁(yè)面，加載小程序，退出頁(yè)面，關(guān)閉小程序。

基本代碼如下：

var http = mm("do_Http");
// 顯示等待窗口
var waittingLayer = require("source://modules/waittingLayer/call");
waittingLayer.invoke({
 hint : "請(qǐng)稍后"
});
var src = "data://" + data.id + ".zip";
http.url = data.url;
http.on("result", function(d) {
 sm("do_Storage").unzip(src, "data://temp/" + data.id, function(_d, e) {
  var updatesrc = "data://temp/" + data.id + "/source/view";
  sm("do_App").update([ updatesrc ], "source://view", function() {
   sm("do_Page").fire("installed", data.id);
   // 隱藏等待窗口
   var waittingLayer = require("source://modules/waittingLayer/call");
   waittingLayer.invoke({
    close : true
   });
  })
 })
 
})
http.download(src);

總結(jié)

感覺(jué)是不是很簡(jiǎn)單，但是意義很重大，除了小程序更新很容易以外，主程序也很容易更新，原理完全一致。這能用于2個(gè)基本用途。

1. 實(shí)現(xiàn)程序的熱更新，deviceone的業(yè)務(wù)所有邏輯和頁(yè)面都是文本文件，包括js代碼和ui文件（json描述），天然更新非常容易。

2. 對(duì)應(yīng)大一點(diǎn)的應(yīng)用或企業(yè)，完全可以把業(yè)務(wù)讓不同的開(kāi)發(fā)團(tuán)隊(duì)和部門(mén)獨(dú)立完成，然后由一個(gè)總個(gè)框架App來(lái)管理，做到應(yīng)用開(kāi)發(fā)和管理標(biāo)準(zhǔn)化。而且deviceone有強(qiáng)大的云打包能力，編譯打包也可以標(biāo)準(zhǔn)管理。

最后要說(shuō)的是deviceone并不是只是一個(gè)想法和實(shí)踐，它已經(jīng)是正式運(yùn)營(yíng)一年多的產(chǎn)品，已經(jīng)為互聯(lián)網(wǎng)很多個(gè)人和公司提供了很多服務(wù)，上線(xiàn)了很多面向個(gè)人和企業(yè)的應(yīng)用。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論