一篇文章徹底瞭解小程式
阿新 • • 發佈:2018-12-26
小程式
基礎知識
小程式實現原理
- 微信
iOS 執行在 webkit(蘋果開源的瀏覽器核心),Android 執行在 X5(QQ瀏覽器核心)。
支付寶
小程式呼叫系統的 API
- 小程式的架構
小程式與 Android & iOS 對比
- 生命週期
- 資料儲存
Android:SQLite、Realm、SharedPreferences、File
iOS:SQLite、Realm、plist、歸檔、NSUserDefaults、File
微信小程式:localStorage、File
支付寶小程式:localStorage
- 網路
Android:OkHttp、Volley
iOS:Alamofire
微信小程式:wx.request()
支付寶小程式:my.httpRequest()
專案結構
|-ProjectName
|-component//template,元件
|-common-button
|-config
|-images
|-pages//頁面
|-home
|-home.acss/wxss
|-home.axml/wxml
|-home.js
|-home.json
|-utils
|-app.acss/wxss
|-app.js
|-app.json
- App
微信小程式
App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
支付寶小程式
App({
onLaunch(options) {
// 小程式初始化
},
onShow(options) {
// 小程式顯示
},
onHide() {
// 小程式隱藏
},
onError(msg) {
console.log(msg)
},
globalData: {
foo: true,
}
})
- Page
微信小程式
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
支付寶小程式
Page({
data: {
title: "Alipay"
},
onLoad(query) {
// 頁面載入
},
onReady() {
// 頁面載入完成
},
onShow() {
// 頁面顯示
},
onHide() {
// 頁面隱藏
},
onUnload() {
// 頁面被關閉
},
viewTap() {
// 事件處理
this.setData({
text: 'Set data for updat.'
})
},
go() {
// 帶引數的跳轉,從 page/index 的 onLoad 函式的 query 中讀取 xx
my.navigateTo('/page/index?xx=1')
},
customData: {
hi: 'alipay'
}
})
- localStorage
微信小程式
//同步儲存資料
wx.setStorageSync({
key:"key",
data:"value"
})
wx.getStorageSync({key: 'key'})//同步讀取資料
wx.removeStorageSync('key')//同步刪除資料
支付寶小程式:my.httpRequest()
//同步儲存資料
my.setStorageSync({
key:"key",
data:"value"
})
my.getStorageSync({key: 'key'})//同步讀取資料
my.removeStorageSync('key')//同步刪除資料
- 網路請求
微信小程式:wx.request()
wx.request({
url: 'http://xxx.xx',
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
},
fail: function(res) {
console.log(res.data)
},
complete: function(res) {
console.log(res.data)
}
})
支付寶小程式:my.httpRequest()
my.httpRequest({
url: 'http://xxx.xx',
method: 'POST',
data: {
x: '' ,
y: ''
},
dataType: 'json',
success: function(res) {
my.alert({content: 'success'});
},
fail: function(res) {
my.alert({content: 'fail'});
},
complete: function(res) {
my.alert({content: 'complete'});
}
});
小程式的特點
- 提前新建 WebView,準備新頁面渲染。
- View 層和邏輯層分離,通過資料驅動,不直接操作 DOM。
- 使用 Virtual DOM,進行區域性更新。
- 全部使用 https,確保傳輸中安全。
- 前端元件化開發。
- 加入 rpx 單位,隔離裝置尺寸,方便開發。
小程式的不足
- 小程式仍然使用 WebView 渲染,並非原生渲染
- 需要獨立開發,不能在非微信/支付寶環境執行。
- 開發者不可以擴充套件新元件。
- 服務端介面返回的頭無法執行,比如:Set-Cookie。
- 依賴瀏覽器環境的 js 庫不能使用,因為是 JSCore 執行的,沒有 window、document 物件。
- WXSS/ASS 中無法使用本地(圖片、字型等),ASS 可以使用本地圖片。
- WXSS/ASS 轉化成 js 而不是 css,為了相容 rpx。
- WXSS/ASS 不支援級聯選擇器。
- 小程式無法開啟頁面,無法拉起 APP。