1.什么是小程序框架襟己?
我們先看看官方給的解釋:
小程序開發(fā)框架的目標是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗的服務牍陌。
框架提供了自己的視圖層描述語言 WXML 和 WXSS擎浴,以及基于 JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數(shù)據(jù)
傳輸和事件系統(tǒng)毒涧,可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上贮预。
2.全局配置(app.json的文件)
代碼如下:
app全局配置.png
官方給出的配置項列表:
(pages(Array), window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean))個配置項.
(1)pages
它的作用是配置小程序的頁面,這個配置項是必填的,它接受一個數(shù)組,里面的每一項都是字符串,從上面給出的代碼:
代碼如下:
"pages": [
"pages/index/index",
"pages/logs/index"
]
可以看出,每一項分別對應的都是實現(xiàn)文件的路徑以及他的文件名.
注意:這個配置里面的第一行配置是它的初始頁面,例如上面代碼的初始頁面就是index;另外,如果在調(diào)試的時候哪個放在pages的第一個,就默認顯示哪個頁面仿吞。
(2)window
代碼如下:
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#e22f21",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
官方給的window的配置屬性如下:
window配置屬性.png
(3)networkTimeout
它是用來設置各種網(wǎng)絡請求的超時時間的,單位是毫秒,官方給出了四個屬性(request, connectSocket, uploadFile, downloadFile)這四個屬性分別定義的是wx.request, wx.connectSocket, wx.uploadFile, downloadFile 這四個API的超時時間.
(4) tabBar
如果小程序是一個多 tab 應用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面)滑频,可以通過 tabBar 配置項指定 tab 欄的表現(xiàn),以及 tab 切換時顯示的對應頁面唤冈。
如圖所示:
tabbar.png
注意:
當設置 position 為 top 時峡迷,將不會顯示 icon
tabBar 中的 list 是一個數(shù)組,只能配置最少2個你虹、最多5個 tab绘搞,tab 按數(shù)組的順序排序。
(5)debug
如果在app.json將debug配置為true,那么在開發(fā)者工具的控制臺面板中可以輸出詳細的調(diào)試信息.
3.每一個文件下包含自己的文件傅物。
eg:
文件.png
其中在.js 主要寫的為腳本文件夯辖。
.wxss 主要寫樣式文件。一般用rpx
.wxml 寫的是布局代碼(頁面文件)
eg:
js文件.png
wxml文件.png
wxss.png
4.小DEMO(用法)
(1.)簡單綁定
在布局文件中寫
<view> {{ message }} </view>
在js文件中寫
Page({
data: {
message: 'Hello MINA!'
}
})
簡單綁定.png
寫法給上面類似蒿褂,都是頁面中寫布局,css中寫樣式啄栓,js中寫腳本文件。
直接給結果圖:
控制屬性.png
運算.png
字符串運算.png
組件屬性.png
好了谴供,今天就先分享這么多基礎的東西和一些簡單的例子,以后會持續(xù)更新,也希望大家多多交流数焊。