微信小程式開發之MINA

MINA的目標是透過盡可能簡單，高效的方式讓開發者可以在微信中開發具有原生APP體驗的服務。運行MINA的專案必須要有微信web開發者工具和微信小程式的AppID，因為現在還處於內測階段的原因，因此大部分數人還沒有AppID,還好有大神已經破解了IDE，可以先體驗下。

MINA是微信開發小程式的框架：

MINA的目標是透過盡可能簡單，高效的方式讓開發者可以在微信中開發具有原生APP體驗的服務。

運行MINA的專案必須要有微信web開發者工具和微信小程式的AppID，因為現在還處於內測階段的原因，因此大部分數人還沒有AppID,還好有大神已經破解了IDE，可以先體驗下，詳情請參考微信小程式開發資料收集

MINA框架中有四種類型的文件:

• .js文件基於JavaScript的邏輯層框架

• .wjs 視圖層文件，是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":[  "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":"日志"   }] }

"networkTimeout": {     "request": 10000,     "connectSocket": 10000,     "uploadFile": 10000,     "downloadFile": 10000   }

:這裡設定了兩個tab頁:index和log，效果如下:

• networkTimeout設定網路請求的超時時間,小程式有四種類型的網路請求

1. w..conquest wx.connect stock連結,配置為connectSocket

2. wx.uploadFile上傳檔案,配置為uploadFile

3. wx.downloadFile下載檔案,配置為downloadFilem,秒

wx.downloadFile下載檔案,配置為downloadFile
4. 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> </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": "日志文件" }

更多微信小程式開發之MINA相关文章请关注PHP中文网！