小程序和Android开发,微信小程序和Android开发的对比
1、開發語言
微信小程序主要開發語言是 javascript；
使用 wxml + wxss 文件來描述界面；
使用 app.json + app.wxss 文件來配置項目；
2、wxml、wxss 是什么？
對于 Android 來說，對于頁面的描述基本上在 xml 中定義的，比如：
頁面結構： 一個 id 為 layout 的 FrameLayout， 它的內部包含一個 id 為 textViewHello 的 TextView 。
頁面樣式： FrameLayout 和 TextView 各自的屬性：width、height，TextView 還有字號、顏色、文字內容等。
而微信小程序所使用的 wxml + wxss 方式：
some.wxml:
張三
some.wxss:
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-nickname {
width: 128rpx;
color: #aaa;
}
很明顯可以看出：wxml 是負責了頁面結構的展示；而 wxss 則負責了對頁面樣式的定義。
這種把結構和樣式分離的做法，其實是延續了網頁開發中的習慣(html + css)。
這樣做的好處起碼有兩個：
一是使代碼的職責劃分更加明確，結構清晰。
二是可以避免許多重復的代碼。(你在寫 Android 的 xml 文件時，有沒有經常碰到有許多重復的屬性，需要抽離成一個 style 出去的？這就是基本是樣式表的思想了)
3、app.js
app.js 基本相當于 Android 中的 Application 類，文件中主要是有一個 App()函數，來進行小程序的初始化操作。
它提供了一些關于整個小程序生命周期的回調函數： onLaunch、onShow、onHide、onError 等。 比如如果開發者有一些需要在小程序啟動時執行的操作，就可以在 onLaunch 函數中執行。
【對比 Android】我們在 Application 的 onCreate 函數中的初始化操作。
它提供了一個 globalData，用以存儲整個小程序使用期間的公共數據。
【對比 Android】有時候我們也會在自定義的 Application 放一些數據，供不同的頁面來使用。
小程序提供了一個全局的 getApp() 方法用以獲取小程序的 App 實例。
【對比 Android 】想一下 getApplication() 方法~ :-D
4、app.json
app.json 的作用跟 Android 中的 AndroidMainifest.xml 文件很相似 —— 都是靜態化的配置文件。
聲明、設置各個頁面的路徑：頁面必須要先在這里聲明之后才能使用。
配置頁面的樣式(導航欄顏色、文字字體等)
配置底部的Tab欄
設置通用的TimeOut時間、是否是debug模式等
【對比 Android 】Activity 也是同樣需要在 AndroidMainifest.xml 文件中進行聲明，另外 App 的主題也可以在這里設置。
5、app.wxss
app.wxss 定義全局的樣式 —— 其定義的樣式會作用于每個頁面。比如在 app.wxss 中加入：
text {
padding:5px;
}
就可以給所有的 text 控件添加 5px 的 padding 。
當然，頁面本身的 xxPage.wxss 可以定義局部樣式來覆蓋全局樣式。
【對比 Android 】Android 中暫時沒有類似 app.wxss 的全局設定，我們需要在每個 layout.xml 中定義每個控件的屬性，即使可以用 style 文件來抽離一些統一的樣式，但還是需要在每個 View 的屬性上去設置使用這個 style —— 從這方面看，使用 wxss 更有優勢一些。
6、util文件夾
根目錄下的 utils 文件夾中有一個 util.js 文件，這個故名思意，是類似于 Java 中的一些工具類的存在。
utils 文件夾其實是一個非必須的結構，而它之所以出現在官方的 HelloWorld 工程中，是作為一個代表，表明了開發者在這里是可以自定義新的文件夾和結構的。微信小程序作為一個使用 js 來開發的平臺，是可以使用許多第三方的 js 庫的，對于這些第三方庫，以及其他的圖片資源等，都可以放到自定義的文件夾中。
7、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 來把他們相關聯。
但是在微信小程序中，這個工作不需要手動去做，微信強制要求需要一頁面相關的四個文件需要命名一致，并且要放在同一個文件夾下。
8、Android的業務邏輯都是寫在Java文件里面，小程序里面都是寫在js里面；同樣的類似Android的頁面生命周期，小程序也有生命周期：
onLoad: function(options) {
// 頁面初始化
},
onReady: function() {
// 頁面渲染完成
},
onShow: function() {
// 頁面顯示
},
onHide: function() {
// 頁面推到后臺
},
onUnload: function() {
// 頁面關閉
},
小程序不像Android里面可以監聽頁面的返回鍵，所以要在頁面返回時處理業務可以在onUnload中處理。
9、與Android中Application類相似，小程序中app.js相當于全局入口，如果開發者有需要在小程序啟動時執行的操作，就可以在 onLaunch 方法中執行。
app.js還提供了一個 globalData，用來存儲整個小程序使用期間的公共數據。
在其他頁面可以通過 getApp() 方法用以獲取小程序的 App 實例，來使用全局公共數據。
10、如果有些需要存儲的簡單數據，類似Android中的SharedPreferences，小程序可以使用wx.setStorageSync("key", value); 存儲；wx.getStorageSync("key"); 取出；
11、頁面之間的數據傳遞在小程序里面只能通過路由的方式，就是在跳轉鏈接拼接上要傳遞的數據：
傳數據：
//let obj = JSON.stringify(obj);
wx.navigateTo({
url: '/pages/index/index?id=' + id,
})
接受：
onLoad: function(options) {
// let obj = JSON.parse(options.obj);
let id = options.id；
}
如果要傳遞對象，則可以在傳遞前使用JSON.stringify(obj); 將數據轉成字符串，在接受時使用JSON.parse(obj); 轉換回對象;
12、數據刷新；在處理完數據后我們會用this.setData({...}) 來更新數據源，但是很多初學者都會犯一個錯誤，看如下錯誤代碼：
wx.request({
url: "request_url",
success: function (res) {
this.setData({...})
}
});
按照上面寫程序就會報錯，再看正確代碼：
let that = this;
wx.request({
url: "request_url",
success: function (res) {
that.setData({...})
}
});
兩者區別在于多了一個變量 that，并且在 onLoad() 方法里面對它進行了賦值，使它等于 this。其實說白了就是一個作用域的問題；其實在Android里面我們也遇到過，就是在點擊事件里面跳轉設置this的時候，我們都會寫上類名，類似：Intent intent =new Intent(MainActivity.this,TestActivity.class); 。
13：事件攔截：在Android里面會有很多事件攔截處理；小程序里面也不例外。看如下小程序布局：
如上我給子父view都設置了bindtap點擊事件，這個時候點擊下去會發現兩個事件都執行了，這在小程序里面稱為事件冒泡；要想image被點擊，view不被點擊則得使用catchtap 屬性；修改如下：
總結了網上的一些資料，希望對大家有幫助！
總結
以上是生活随笔為你收集整理的小程序和Android开发,微信小程序和Android开发的对比的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React开发（104）:models文
- 下一篇： android sina oauth2.