1.配置文件
page.json來(lái)決定
初始化項(xiàng)目的時(shí)候,文件自動(dòng)生成app.json來(lái)對(duì)小程序進(jìn)行全局配置。
2.邏輯層(App Server)
小程序開(kāi)發(fā)框架的邏輯層是由JavaScript編寫(xiě)。
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層,同時(shí)接受視圖層的事件反饋。 在 JavaScript的基礎(chǔ)上,做了一些修改,以方便地開(kāi)發(fā)小程序。
1)增加 App 和 Page方法,進(jìn)行程序和頁(yè)面的注冊(cè)。
App()函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù),其指定小程序的生命周期函數(shù)等。
App.prototype.getCurrentPage()
getCurrentPage() 函數(shù)用戶獲取當(dāng)前頁(yè)面的實(shí)例。
var appInstance = getApp() console.log(appInstance.globalData) // I am global data
2)App()叫做注冊(cè)程序,Page()叫做注冊(cè)頁(yè)面
Page()接受一個(gè) object參數(shù),
指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等
3)初始化數(shù)據(jù)
初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。
data將會(huì)以 JSON 的形式由邏輯層傳至渲染層,所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式:字符串,數(shù)字,布爾值,對(duì)象,數(shù)組。
渲染層可以通過(guò)WXML 對(duì)數(shù)據(jù)進(jìn)行綁定。
eg:下面這個(gè)是一段wxml的代碼
<view>{{text}}</view> <view>{{array[0].msg}}</view>
下面這個(gè)是一段.js代碼,data是初始化頁(yè)面數(shù)據(jù)
Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] } })
4)頁(yè)面的生命周期函數(shù)
a)onLoad: 頁(yè)面加載
一個(gè)頁(yè)面只會(huì)調(diào)用一次。
參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。這個(gè)是什么意思呢?
onLoad:function(options){ // options 就是參數(shù) // options.redirect }
b)onShow: 頁(yè)面顯示
每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。
c)onReady: 頁(yè)面初次渲染完成
一個(gè)頁(yè)面只會(huì)調(diào)用一次,代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng),可以和視圖層進(jìn)行交互
對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置
d)onHide: 頁(yè)面隱藏
當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。
e)onUnload: 頁(yè)面卸載
當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。
5)頁(yè)面相關(guān)事件處理函數(shù)
onPullDownRefresh: 下拉刷新
監(jiān)聽(tīng)用戶下拉刷新事件。
需要在config的window選項(xiàng)中開(kāi)啟enablePullDownRefresh。
6)事件處理函數(shù)
除了初始化數(shù)據(jù)和生命周期函數(shù),Page 中還可以定義一些特殊的函數(shù):事件處理函數(shù)。在渲染層可以在組件中加入事件綁定,當(dāng)達(dá)到觸發(fā)事件時(shí),就會(huì)執(zhí)行Page 中定義的事件處理函數(shù)。
eg: // .wxml <view bindtap="tap_view"> click me!</view> // .js Page({ tap_view:function(){ console.log('view taped!'); } })
7)Page.prototype.setData()
setData函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層,同時(shí)改變對(duì)應(yīng)的this.data的值。
注意:
1.直接修改 this.data無(wú)效,無(wú)法改變頁(yè)面的狀態(tài),還會(huì)造成數(shù)據(jù)不一致。
2.單次設(shè)置的數(shù)據(jù)不能超過(guò)1024kB,請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)。
<!--index.wxml--> <view>{{text}}</view> <button bindtap="changeText"> Change normal data </button> <view>{{array[0].text}}</view> <button bindtap="changeItemInArray"> Change Array data </button> <view>{{obj.text}}</view> <button bindtap="changeItemInObject"> Change Object data </button> <view>{{newField.text}}</view> <button bindtap="addNewField"> Add new data </button> //index.js Page({ data: { text: 'init data', array: [{text: 'init data'}], object: { text: 'init data' } }, changeText: function() { // this.data.text = 'changed data' // bad, it can not work this.setData({ text: 'changed data' }) }, changeItemInArray: function() { // you can use this way to modify a danamic data path this.setData({ 'array[0].text':'changed data' }) }, changeItemInObject: function(){ this.setData({ 'object.text': 'changed data' }); }, addNewField: function() { this.setData({ 'newField.text': 'new data' }) } })
這里的this指的是.js文件
8).頁(yè)面的路由
小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理
路由方式:
a.初始化
打開(kāi)新頁(yè)面:調(diào)用 API wx.navigateTo 或使用組件<navigator />(節(jié)點(diǎn)方式)
b.打開(kāi)新頁(yè)面,相當(dāng)于iOS中的nav的push
調(diào)用 API wx.navigateTo 或使用組件 <navigator />,調(diào)用后路由前頁(yè)面函數(shù):onHide
c.頁(yè)面重定向
調(diào)用 API wx.redirectTo 或使用組件 <navigator />,調(diào)用后路由前頁(yè)面函數(shù):onUnload
d.頁(yè)面返回
調(diào)用 API wx.navigateBack或用戶按左上角返回按鈕
e.Tab切換
多Tab模式下用戶切換Tab
9)文件作用域
在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效;不同的文件中可以聲明相同名字的變量和函數(shù),不會(huì)互相影響。
通過(guò)全局函數(shù) getApp() 可以獲取全局的應(yīng)用實(shí)例,如果需要全局的數(shù)據(jù)可以在 App() 中設(shè)置
10)模塊化
我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的js 文件,作為一個(gè)模塊。模塊只有通過(guò) module.exports
才能對(duì)外暴露接口。
module.exports = { sayHello: sayHello } function sayHello(name){ console.log('Hello' + name + '!'); }
// 使用
var common = require('common.js'); Page({ helloMaer:function(){ common.sayHello('Maer'); } })
11)API
小程序開(kāi)發(fā)框架提供許多原生api,可以方便的掉漆微信提供的功能,eg:獲取用戶信息,本地存儲(chǔ),微信支付等.
wx.on開(kāi)頭的API是監(jiān)聽(tīng)某個(gè)時(shí)間發(fā)生的API接口,接受一個(gè)CALLBACK函數(shù)作為參數(shù)。當(dāng)該時(shí)間觸發(fā)的時(shí)候,會(huì)調(diào)用callback函數(shù)。
如果沒(méi)有特殊約定,其他的api接口都接受一個(gè)object作為參數(shù)。
object中可以指定success, fail, complete來(lái)接收接口調(diào)用結(jié)果。
success Function 接口調(diào)用成功的回調(diào)函數(shù) fail Function 接口調(diào)用失敗的回調(diào)函數(shù) complete Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行)
這里舉例幾個(gè)常用的api接口:
wx.request 發(fā)起的是https請(qǐng)求。**一個(gè)微信小程序,同時(shí)只能有5個(gè)網(wǎng)絡(luò)請(qǐng)求連接。**
數(shù)據(jù) API 列表:
wx.getStorage // 獲取本地?cái)?shù)據(jù)緩存 wx.setStorage // 設(shè)置本地?cái)?shù)據(jù)緩存 wx.clearStorage // 清除本地?cái)?shù)據(jù)緩存
獲取網(wǎng)絡(luò)類(lèi)型
wx.getNetworkType(OBJECT)
eg:
wx.getNetworkType({ success:function(res){ var networkType = res.networkType; // 返回網(wǎng)絡(luò)類(lèi)型2g,3g,4g,wifi } })
界面 API 列表:
參考:https://mp.weixin.qq.com/debug/wxadoc/dev/api/
3.視圖層
框架的視圖層由WXML 與 WXSS編寫(xiě),由組件來(lái)進(jìn)行展示。
將邏輯層的數(shù)據(jù)反應(yīng)成視圖,同時(shí)將視圖層的事件發(fā)送給邏輯層。
組件(Component)是視圖的基本組成單元。
1)WXML
WXML(WeiXin Markup Language)是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言,結(jié)合基礎(chǔ)組件、事件系統(tǒng),可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。
wxml作用主要有:數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件、引用
數(shù)據(jù)綁定:
// wxml <view>{{message}}</view> // page.js
Page({
data:{
message: 'Hello world'!
}
})
列表渲染
// wxml <view wx:for="{{array}}">{{item}}</view> // page.js Page({ data:{ array:[0, 1, 2, 3, 4] } })
條件渲染
<!--wxml--><view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view> // page.js Page({ data: { view: 'MINA' } })
<block/>并不是一個(gè)組件,它僅僅是一個(gè)包裝元素,不會(huì)在頁(yè)面中做任何渲染,只接受控制屬性
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
模板
總結(jié):在屬性中的值都要加“”.<template is="staffName" data="{{...staffA}}"></template>
擴(kuò)展運(yùn)算符...來(lái)將一個(gè)對(duì)象展開(kāi)
Page({ data:{ staffA:{firstname:'a', lastname:'b'} } })
注意: 如果js:Page({
data:{
foo:'a',
bar:'b'
}
})`
<template data={{foo, bar}}> data組合對(duì)象為:{foo:'a', bar:'b'}
<template data={{'A':foo, 'B':bar}}> data組合對(duì)象為:{'A':'a', 'B':'b'}
模板擁有自己的作用域,只能使用data傳入的數(shù)據(jù)。
事件
eg:
<view bindtap="add">{{count}}</view> Page({ data:{ count:1 } add: function(e){ this.setData({ count:this.data.count + 1 }) } })
2)wxml
為了適應(yīng)廣大的前端開(kāi)發(fā)者,WXSS具有 CSS 大部分特性。 同時(shí)為了更適合開(kāi)發(fā)微信小程序,對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。
尺寸單位
rpx(responsive pixel) 規(guī)定屏幕寬為750rpx
樣式導(dǎo)入
使用@import
語(yǔ)句可以導(dǎo)入外聯(lián)樣式表,@import
后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑,用;
表示語(yǔ)句結(jié)束。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)