1. 前言

1.1 微信小程序

微信小程序近期可謂是動作頻出，僅最近新增的能力就有：

• 允許個人開發(fā)者申請注冊小程序蓝晒、
• 公眾號可以打開小程序腮出、
• 可以在 App 分享、
• 支持識別圖片二維碼打開小程序芝薇、
• 可以支持第三方平臺配置胚嘲、
• 新增數據分析接口、
• 代碼包大小從1M擴大到2M洛二、
• 推出小程序碼馋劈、
• 公眾號關聯小程序新規(guī)則、
• 公眾平臺新增快速創(chuàng)建小程序晾嘶、
• ……

種種跡象表明妓雾，微信對小程序的期望值是很大，所以在它推出的幾個月效果沒到達預期的情況下变擒，之前的很多『克制』也就逐漸變成『放肆』了 —— 不過不管小程序以后的發(fā)展到底怎樣君珠，對我們開發(fā)者來發(fā)，多了解一些總是沒有壞處的娇斑。

1.2 為什么要寫這篇文章

他山之石策添，可以攻玉。
對于是技術人來說毫缆，多了解一些不同的技術唯竹、不同的開發(fā)模式、不同的架構思想苦丁，提高技術『廣度』浸颓，對于自己的成長是十分必要的。
所以，本文就是從一個 Android 開發(fā)者的角度产上，從項目工程方便切入棵磷，來分析一下『微信小程序』跟『Android App』開發(fā)上的一些異同。
『微信小程序』開發(fā)是一個相對較新的技術晋涣，希望通過本文仪媒，能讓你對它多一些了解。

1.3 本文的目標讀者

因為內容是從Android開發(fā)的角度來談的谢鹊，所以我假設你已經對 Android 開發(fā)比較熟悉了算吩。并且對微信小程序的開發(fā)也比較感興趣，如果要是再能有些 javascript佃扼、css 的基礎的話那就更好了偎巢！

2. 開發(fā)語言的對比

2.1 Android 的開發(fā)語言

Android 開發(fā)我們已經比較熟悉——

• 主要開發(fā)語言是 Java（當然還有 Kotlin/Scala/Groovy，暫時不在本文討論的范圍內）兼耀；
• 另外使用 xml 文件來描述界面压昼；
• 使用 AndroidManifest.xml + gradle 文件來配置項目；

2.2 小程序的開發(fā)語言

作為對比翠订，進行微信小程序開發(fā)所用的語言是這些——

• 主要開發(fā)語言是 javascript巢音；
• 使用 wxml + wxss 文件來描述界面遵倦；
• 使用 app.json + app.wxss 文件來配置項目尽超；

2.3 wxml、wxss 是什么梧躺？

wxml(WeiXin Markup Language) 基本約等于是 xml似谁。微信之所以沒有直接使用 xml ，可能是為了以后擴展方便一些（野心很大）掠哥。
同理巩踏，wxss(WeiXin Style Sheets) 基本約等于是 css。也是微信擴展了一些功能续搀，比如統(tǒng)一的尺寸單位 rpx塞琼。

2.3.1 小程序為什么要使用 wxml + wxss 來描述頁面？

對于 Android 來說禁舷，對于頁面的描述基本上在 xml 中定義的彪杉，比如：

<FrameLayout
  android:id="@+id/layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <TextView
    android:id="@+id/textViewHello"
    android:textSize="20sp"
    android:textColor="#f00"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Hello World!"/>
</FrameLayout>

這是一個簡單的典型的示例，這個文件就是描述了兩部分內容：

1. 頁面結構： 一個 id 為 layout 的 FrameLayout牵咙， 它的內部包含一個 id 為 textViewHello 的 TextView 派近。
2. 頁面樣式： FrameLayout 和 TextView 各自的屬性：width、height洁桌，TextView 還有字號渴丸、顏色、文字內容等。
   而微信小程序所使用的 wxml + wxss 方式：
   some.wxml:

<view class="userinfo">
  <image class="userinfo-avatar" />
  <text class="userinfo-nickname">張三</text>
</view>

some.wxss:

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-nickname {
  width: 128rpx;
  color: #aaa;
}

很明顯可以看出：wxml 是負責了頁面結構的展示谱轨；而 wxss 則負責了對頁面樣式的定義戒幔。
這種把結構和樣式分離的做法，其實是延續(xù)了網頁開發(fā)中的習慣（html + css）土童。
這樣做的好處起碼有兩個：

• 一是使代碼的職責劃分更加明確溪食，結構清晰。
• 二是可以避免許多重復的代碼娜扇。（你在寫 Android 的 xml 文件時错沃，有沒有經常碰到有許多重復的屬性，需要抽離成一個 style 出去的雀瓢？這就是基本是樣式表的思想了）

3. 工程結構對比

3.1 小程序的工程結構

小程序的工程結構

——看起來還是挺簡單的結構:

• pages
  • index
    • index.js
    • index.wxml
  • logs
• utils 文件夾
• 三個以app命名的文件： app.js 枢析、 app.json 、 app.wxss
  我們來梳理下文件功能:

3.2 app 相關： app.js 刃麸、 app.json 醒叁、 app.wxss

這三個文件用以描述小程序 app 相關的內容，他們的命名是固定這樣的泊业，位置也固定是在根目錄下把沼。

3.2.1 app.js

app.js 基本相當于 Android 中的 Application 類，文件中主要是有一個 App()函數吁伺，來進行小程序的初始化操作饮睬。

• 它提供了一些關于整個小程序生命周期的回調函數： onLaunch、onShow篮奄、onHide捆愁、onError 等。 比如如果開發(fā)者有一些需要在小程序啟動時執(zhí)行的操作窟却，就可以在 onLaunch 函數中執(zhí)行昼丑。

【對比 Android】我們在 Application 的 onCreate 函數中的初始化操作。

• 它提供了一個 globalData夸赫，用以存儲整個小程序使用期間的公共數據菩帝。

【對比 Android】有時候我們也會在自定義的 Application 放一些數據，供不同的頁面來使用茬腿。

• 小程序提供了一個全局的 getApp() 方法用以獲取小程序的 App 實例呼奢。

【對比 Android 】想一下 getApplication() 方法~ :-D

3.2.2 app.json

app.json 的作用跟 Android 中的 AndroidMainifest.xml 文件很相似 —— 都是靜態(tài)化的配置文件。

• 聲明滓彰、設置各個頁面的路徑：頁面必須要先在這里聲明之后才能使用控妻。
• 配置頁面的樣式（導航欄顏色、文字字體等）
• 配置底部的Tab欄
• 設置通用的TimeOut時間揭绑、是否是debug模式等

【對比 Android 】Activity 也是同樣需要在 AndroidMainifest.xml 文件中進行聲明弓候，另外 App 的主題也可以在這里設置郎哭。

3.2.3 app.wxss

app.wxss 定義全局的樣式 —— 其定義的樣式會作用于每個頁面。比如在 app.wxss 中加入：

text {
  padding:5px;
}

就可以給所有的 text 控件添加 5px 的 padding 菇存。
當然夸研，頁面本身的 xxPage.wxss 可以定義局部樣式來覆蓋全局樣式。

【對比 Android 】Android 中暫時沒有類似 app.wxss 的全局設定依鸥，我們需要在每個 layout.xml 中定義每個控件的屬性亥至，即使可以用 style 文件來抽離一些統(tǒng)一的樣式，但還是需要在每個 View 的屬性上去設置使用這個 style —— 從這方面看贱迟，使用 wxss 更有優(yōu)勢一些姐扮。

3.3 utils 文件夾

根目錄下的 utils 文件夾中有一個 util.js 文件，這個故名思意衣吠，是類似于 Java 中的一些工具類的存在茶敏。
utils 文件夾其實是一個非必須的結構，而它之所以出現在官方的 HelloWorld 工程中缚俏，是作為一個代表惊搏，表明了開發(fā)者在這里是可以自定義新的文件夾和結構的。微信小程序作為一個使用 js 來開發(fā)的平臺忧换，是可以使用許多第三方的 js 庫的恬惯，對于這些第三方庫，以及其他的圖片資源等亚茬，都可以放到自定義的文件夾中酪耳。

3.4 pages 文件夾

pages 文件夾下包含兩個子目錄：index 和 logs ，兩個目錄的結構都是基本一樣的才写，都是包含四個相同主名稱的文件： xx.js葡兑、xx.wxml奖蔓、xx.json赞草、xx.wxss 這幾個文件。
這樣的一個典型結構表明它是一個小程序的頁面吆鹤，四個文件的作用分別是：

• xx.js ： 頁面的主要邏輯 【相當于 Android 的 xx.Activity 】
• wxml ：頁面的結構 【相當于 Android 的 布局文件 activity_xx.xml 的結構部分】
• wxss ：頁面的樣式 【相當于 Android 的 布局文件 activity_xx.xml 的樣式部分】
• json ：頁面的配置厨疙，作用跟上文講的 app.json 作用差不多，但只能配置 window 相關的屬性疑务，會覆蓋 app.json 中的同名配置沾凄。
  在 Android 中 ，xx.Activity 和布局文件 activity_xx.xml是在不在同一個目錄下的知允，需要使用 setContentView 來把他們相關聯撒蟀。
  但是在微信小程序中，這個工作不需要手動去做温鸽，微信強制要求需要一頁面相關的四個文件需要命名一致保屯，并且要放在同一個文件夾下手负。

4. 視圖更新方式對比

在視圖的動態(tài)顯示上，微信小程序使用了數據綁定（data-binding）的方式姑尺。
如果你之前使用過 AngularJS 或者 Vue.js 等這些流行的 js 框架竟终，那么你肯定對數據綁定并不陌生。它是一種把一個控件的屬性綁定到某個數據對象（view-model）的屬性的方法切蟋，這樣在改變數據對象屬性的時候统捶，所對應的控件屬性也就會相應變化 —— 在開發(fā)中，這種方式會使得對 View 層的顯示控制變得十分簡單柄粹、自然喘鸟。
基于此，軟件工程的流行架構方式也在之前的 MVC驻右、MVP 之外迷守，又多了一個 —— MVVM（Model-View-ViewModel）。
數據綁定這種方式現在是如此的流行旺入，以致于 Android 官方都出了一個 [Data Binding Library] (https://developer.android.com/topic/libraries/data-binding/index.html) 來支持數據綁定兑凿，但是由于成熟度等原因，目前還并沒有成為主流茵瘾，Android 中的主流視圖顯示方式礼华，還是通過開發(fā)者手動給每個控件 set 數據。
—— 單從這一點上看拗秘，微信小程序的開發(fā)模式是比原生 Andorid 要『先進』一些的~ ??

5. 頁面的生命周期對比

小程序雖然是和前端 H5 頁面一樣是用 js 來開發(fā)圣絮，但是由于它最終運行的平臺不再是瀏覽器，而是和 App 的表現幾無二致雕旨，所以頁面的生命周期也是和 App 差不多的扮匠。

一個小程序頁面的典型生命周期如下：

• onLoad ：頁面加載
• onReady ：初次渲染完成
• onShow ：頁面顯示
• onHide ：頁面隱藏
• onUnload ：頁面卸載

對比一下 Android 的 Activity 生命周期 ：

• onCreate ：創(chuàng)建
• onStart ：開始（到前臺）
• onResume ：顯示
• onPause ：暫停（不再在前臺）
• onStop ：隱藏
• onDestory ：銷毀

微信小程序的頁面生命周期稍微簡單一些，但主要的思想跟 Activity 生命周期基本是一致的凡涩。

6. Debug對比

小程序的官方 IDE 是微信自己出品微信Web開發(fā)者工具棒搜，它內置了一個小程序的運行環(huán)境，本質上是基于 Chrome 內核的一個瀏覽器框架活箕，算是一個模擬器了力麸。
——它雖然跟 Android 的各種高大上的模擬器相比起來略顯簡陋，但是基本該有的功能也基本都有（斷點育韩、Log克蚂、網絡監(jiān)控等），而且由于是基于瀏覽器內核的頁面 DOM 解析筋讨，所以運行的速度也是像瀏覽器打開網頁一樣流暢埃叭，不會像 Android 模擬器那樣對系統(tǒng)資源要求很高。
另外悉罕，在綁定了開發(fā)者賬號之后赤屋，也可以用手機進行真機調試來調試小程序误墓，所以也能在上線前用不同的機器來進行充分的兼容性測試。

7. 總結

總體來說益缎，小程序作為一個新的形態(tài)谜慌，從開發(fā)的角度，它可以算作是一個【Native開發(fā)】和【H5開發(fā)】的結合莺奔，它吸收了原生開發(fā)和 H5 開發(fā)的優(yōu)點欣范。對于前端開發(fā)人員和原生開發(fā)人員來說，都可以在微信小程序中找到許多熟悉的東西令哟。再細節(jié)的許多點這里就不在贅述了恼琼，大家如果有興趣，可以自己上手去體驗一下屏富。

綜上晴竞，自然也就有兩種人特別適合去做小程序的開發(fā)——H5的前端開發(fā)人員，以及之前的 Android/iOS 原生 App 開發(fā)者狠半。

微信小程序的開發(fā)總體來說是很簡單的噩死。
—— 對于前端開發(fā)者來說，了解一下原生 App 的一些相關思想即可神年，這些工作其實只要讀一遍小程序的開發(fā)者指南基本就差不多了已维。
—— 而對于原生開發(fā)者來說，只要稍微補一下 js 的相關知識（html/css）已日，也基本就差不多可以上手去做了垛耳。如果你之前恰好已經有過一些 js 的使用經驗，那就不用多說了飘千，花半個小時看一下小程序的文檔堂鲜，直接上！

關于作者 :
http://www.barryzhang.com
https://github.com/barryhappy
http://www.reibang.com/users/e4607fd59d0d