摘要：小程序微信把這個(gè)小程序框架稱為，并聲稱是在微信中開發(fā)小程序的框架。在小程序里面，對(duì)應(yīng)的是和，注意雖然模式和很像，但是在形式上算是微信自己開發(fā)的一套所以你需要使用他們自己的標(biāo)簽。

這篇文章將圍繞下面幾個(gè)方面：

從開發(fā)模式（過程）上對(duì)比Android和小程序，比較兩種”模式”的異同

從實(shí)現(xiàn)功能上對(duì)比，主要是看看微信小程序的局限

自己的一些看法，微信的優(yōu)勢(shì)

開發(fā)過程上的對(duì)比

在我看來,開發(fā)一款app，需要做的主要是界面布局以及交互處理,然后是后面的業(yè)務(wù)邏輯處理。雖然平臺(tái)不同，但是任務(wù)都是趨同的。下面從這兩個(gè)大的方面進(jìn)行對(duì)比一下。

小程序

微信把這個(gè)小程序框架稱為“MINA”，并聲稱：

MINA(MINA IS NOT APP) 是在微信中開發(fā)小程序的框架。

MINA的目標(biāo)是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生APP體驗(yàn)的服務(wù)。

MINA提供了自己的視圖層描述語言WXML和WXSS，以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
個(gè)人覺得第三點(diǎn)說得特別好。大概說清楚了開發(fā)者要干什么。大概就是以寫Web的方式寫好前端，然后通過雙向數(shù)據(jù)綁定技術(shù)和業(yè)務(wù)端交互,業(yè)務(wù)端通過javascript代碼實(shí)現(xiàn)業(yè)務(wù)處理,必要時(shí)調(diào)用微信接口完成一些處理。

一些生命周期函數(shù)

這里所說的生命周期函數(shù)是指的整個(gè)應(yīng)用以及每個(gè)頁面的聲明周期函數(shù),在Android中，對(duì)應(yīng)著App、Activity類，而在小程序中,對(duì)應(yīng)著App和Page兩個(gè)函數(shù)對(duì)象（注意,javascript是基于原型和構(gòu)造器的，而java是基于類的，所以這里就造成了一些寫法的不同）。以App為例,下面是一個(gè)代碼實(shí)例:

App({
  onLaunch: function () {
    console.log("App Launch")
  },
  onShow: function () {
    console.log("App Show")
  },
  onHide: function () {
    console.log("App Hide")
  }
})

每個(gè)小程序起起來時(shí)就會(huì)有一個(gè)App實(shí)例，同理每個(gè)頁面打開也會(huì)有一個(gè)Page實(shí)例（這個(gè)鏈接打開往下滑還有生命周期函數(shù)的圖解），我們只需要在這個(gè)實(shí)例中添加自己的邏輯即可,唯一不同的是這是在javascript這種語言上寫的（java和javascript的區(qū)別就像是雷鋒和雷峰塔，所以這里形式上的不同還是蠻大的）。

視圖層代碼

前面說了，寫視圖層的體驗(yàn)有點(diǎn)像Web前端，主要是寫多了Android，習(xí)慣性地會(huì)把界面的樣式以及交互放在一塊兒寫（事實(shí)上就是你在xml上做的工作），而在Web端，需要html和css文件來共同完成。在小程序里面，對(duì)應(yīng)的是WXML(WeiXin Markup Language)和WXSS(WeiXin Style Sheets)，注意雖然模式和web很像，但是在形式上算是微信自己開發(fā)的一套（所以你需要使用他們自己的標(biāo)簽）。具體來講，你需要做兩件事：

在WXML中通過組件（微信所提供的標(biāo)簽）構(gòu)建頁面結(jié)構(gòu)，并且在其中完成數(shù)據(jù)綁定和事件綁定

在WXSS中完成樣式的定義，用以控制WXML中組件的樣式。WXSS具有CSS大部分特性,同時(shí)也有部分?jǐn)U充。

基本上，視圖層很像在寫Web端。不過你也看到了，和Android比起來，限制因素在于微信給你提供了組件，然后你最多改改樣式，更多的像自定義組件什么的就不可能了。

邏輯層代碼

不同于Android有一堆的組件（Activity、Service..）來支撐邏輯層，小程序就一個(gè)Page()函數(shù)(類似與App()函數(shù)，在框架里面填邏輯)，所以顯得很簡單。基本上，數(shù)據(jù)通過雙向綁定進(jìn)行傳遞和刷新的，然后在page內(nèi)可以完成一些交互處理，更多的能力(訪問網(wǎng)絡(luò)、存儲(chǔ))是通過微信的API完成的，這些api以wx.開頭，目前來看，不是太多，所以可以很快看完，當(dāng)然也意味著其實(shí)可以完成的工作還著實(shí)有限，這個(gè)后面說。

工程組織

整體來說,小程序的工程組織還是蠻清晰的,MINA程序包含一個(gè)描述整體程序的app和多個(gè)描述各自頁面的page，一個(gè)MINA程序主體部分由三個(gè)文件組成，必須放在項(xiàng)目的根目錄，是app.js,app.json,app.wxss，分別用作生命周期函數(shù)、配置文件和樣式文件，一個(gè)MINA頁面由四個(gè)文件組成，是.js,.wxml,.json,.wxss，分別用作生命周期函數(shù)、布局文件、配置文件和樣式文件，他們需要通過同名且放在同名文件夾下（方便框架通過名字路由）。比起Android來，套路應(yīng)該是固定而簡單得多。

Android

再回頭看看Android開發(fā)，突然覺得可以玩的簡直是太多了…下面簡單描述一下，肯定是不全的。

一些生命周期函數(shù)

App、Activity是肯定的，其實(shí)套路和小程序還是差不多的。只不過組織形式是類而不是函數(shù)對(duì)象。之前說了，這是因?yàn)镴s和Java語言特性造成的。

視圖層代碼

通常來講，Android的界面在.xml文件中定義，其實(shí)仔細(xì)想想就會(huì)發(fā)現(xiàn)，在文件中，我們是同時(shí)定義了布局，和交互邏輯的，這是因?yàn)楸举|(zhì)上這些.xml聲明都是View類的子類，我們通過重寫View的聲明周期方法來完成了對(duì)齊的樣式(onDraw以及LaoutParams)、以及交互的定義（各種on..listener）。所以在.xml中更像是對(duì)這些對(duì)象進(jìn)行一系列實(shí)例化。至于雙向數(shù)據(jù)綁定,Android也開始支持了

邏輯層代碼

這一層還是要復(fù)雜得多..放到后面對(duì)比來說吧。

工程組織

…..不想說了，一方面寫法多，一方面相對(duì)于小程序也蠻復(fù)雜的。

下篇內(nèi)容（待續(xù)）

從實(shí)現(xiàn)功能上對(duì)比，主要是看看微信小程序的局限

自己的一些看法，微信的優(yōu)勢(shì)

「H5程序俱樂部」是一個(gè)專注微信小程序?qū)W習(xí)交流的微信公眾號(hào)
每天發(fā)布微信小程序設(shè)計(jì)/開發(fā)/運(yùn)維知識(shí)，小程序最新資訊

「H5程序俱樂部」微信號(hào)：wxappclub 或者 微信掃一掃關(guān)注