微信小程序開發:MINA
MINA是微信開發小程序的框架：
MINA的目標是通過盡可能簡單，高效的方式讓開發者可以在微信中開發具有原生APP體驗的服務。
運行MINA的項目必須要有 微信web開發者工具 和 微信小程序的AppID ，因為現在還處于內測階段的原因，因此大部分數人還沒有 AppID ,還好有大神已經破解了IDE。
MINA框架中有四種類型的文件:
-
.js 文件 基于JavaScript的邏輯層框架
-
.wxml 視圖層文件，是MINA設計的一套標簽語言
-
.wxss 樣式文件，用于描述WXML的組件樣式
-
.json 文件，配置文件，用于單個頁面的配置和整個項目的配置
目錄結構
為了減少配置項，小程序中一個頁面中的四個文件必須要有相同的路徑和文件名,使用 微信web開發者工具 新建一個項目,可以看到他的目錄結構是這樣的：
其中 app.js 是程序的入口， app.json 是項目的配置文件, app.wxss 是全局配置的樣式文件, logs 和 index 文件夾是是單個頁面的文件， utils 用來存放常用的工具類文件夾。
app.js
app.js 使用 App() 函數注冊一個小程序，可以指定小程序的生命周期
小程序的 App() 生命周期中三個事件可以監聽: onLaunch ， onShow ， onHide 。
-
onLaunch ：小程序加載完成之后調用,全局只觸發一次
-
onShow ： 小程序啟動，或者從后臺到前臺會觸發一次
-
onHide ：小程序從前臺到后臺會觸發一次
例如:
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
其中 app.js 的 globalData 可以設置全局的變量,在一個頁面中可以通過 getApp() 函數獲取小程序的實例，使用App的 getCurrentPage() 可以獲取到當前頁面的實例。
app.json
app.json 是小程序的全局配置包括:頁面的路徑，窗口表現，設置網絡超時,開發模式等...
-
頁面配置 pages :設置頁面的路徑
"pages":[
"pages/index/index",
"pages/logs/logs"
]
配置的 index 和 logs 兩個頁面的路徑,在這里使用相對路徑配置頁面路徑。
-
窗口配置 windows ：用來配置狀態欄的顏色，導航條的樣式和顏色，標題，已經窗口的背景色:
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
使用的Color為十六進制的顏色值,比如"#ffffff"
注意:
其中 navigationBarTextStyle ，導航欄的顏色僅支持 black/white 。
而 backgroundTextStyle ，下拉背景的樣式僅支持 dark/light 。
-
tabBar : 設置tab應用， tabBar 是一個數組，最少需要配置2個，最多能配置5個tab，tab按照數據的順序排序：
"tabBar":{
"color":"#dddddd",
"selectdColor":"#3cc51f",
"borderStyle":"black",
"backgroundColor":"#ffffff"
,"list":[
{
"pagePath":"pages/index/index",
"iconPath":"image/wechat.png",
"selectedIconPath":"image/wechatHL.png",
"text":"主頁"
},{
"pagePath":"pages/logs/logs",
"iconPath":"image/wechat.png",
"selectedIconPath":"image/wechatHL.png",
"text":"日志"
}]
}
這里設置了兩個tab頁: index 和 log ，效果如下:
-
networkTimeout 設置網絡請求的超時時間,小程序有四種類型的網絡請求
-
wx.request 普通的http請求，配置為 request
-
wx.connect stock鏈接,配置為 connectSocket
-
wx.uploadFile 上傳文件,配置為 uploadFile
-
wx.downloadFile 下載文件,配置為 downloadFile
配置單位為毫秒,例如：
-
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
}
-
debug :開發工具中開啟debug模式，在控制臺面板上可以看到調試信息,我們也可以使用 console.log('onLoad') 輸入log幫助我們調試程序。
"debug": true
app.wxss
app.wxss 中定義的的樣式為全局樣式，作用在每一個頁面，在page中定義的 .wxss 文件為局部樣式，只作用在局部，局部樣式中的定義會覆蓋 app.wxss 中定義的樣式。
樣式的定義:
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
其中 200rpx 中的 rpx 是 reponslve pixel ，可以根據屏幕的寬度進行自適應，在 iPhone6 上 1rpx=0.5px=1 物理像素。微信小程序建議設計以 iPhone6 為準
樣式的使用：
<view class="container">
</view>
page
使用Page()函數來注冊一個頁面，為其指定頁面的初始數據，生命周期函數，事件處理等。
-
data 頁面的初始數據，可以使用setData更新定義的數據
-
onLoad 頁面加載事件
-
onReady 頁面渲染完成
-
onShow 頁面顯示
-
onHide 頁面隱藏
-
onUnload 頁面卸載
例如:
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
page另外使用的文件 .wxml 是頁面文件，使用定義好一套標簽語言， .wxss 是局部樣式文件， .json 局部配置文件比如需要在一個單獨的頁面中設置他的 navigationBarTitleText ,可以在 .json 文件中設置:
{
"navigationBarTitleText": "日志文件"
}
來自：https://segmentfault.com/a/1190000007000249