文件基本結構:
先看入口app.js,app(obj)註冊一個小程序。接受一個 object 參數,其指定小程序的生命週期函數等。其他文件可以通過全局方法getApp()獲取app實例,進而直接調用它的屬性或方法,例如(getApp().globalData)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
App({
onLaunch: function ()
{
var logs
= wx.getStorageSync( 'logs' )
|| []
logs.unshift( Date .now())
wx.setStorageSync( 'logs' ,
logs)
},
getUserInfo: function (cb){
var that
= this
if (this.globalData.userInfo){
typeof
cb == "function" &&
cb(this.globalData.userInfo)
} else {
wx.login({
success: function ()
{
wx.getUserInfo({
success: function (res)
{
that.globalData.userInfo
= res.userInfo
typeof
cb == "function" &&
cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
|
我理解app.js爲入口初始化文件,也是提供全局API拓展的地方。下邊分析下自帶的幾個方法和屬性
onLaunch鉤子函數會在小程序初始化完成後會自動執行一次,然後在小程序生命週期裏如果你不主動調用onLaunch,它就不會在執行。
var logs = wx.getStorageSync('logs') || []獲取本地緩存中的logs屬性,如果值爲空,那麼設置logs=[] 與HTML5中的localStorage作用相似
logs.unshift(Date.now()) 當前登錄時間添加到數組中
wx.setStorageSync('logs', logs) 將數據存入本地緩存,因爲wx爲全局對象,所以可以在其他文件中直接調用wx.getStorageSync('logs')獲取本地緩存數據
getUserInfo函數,顧名思義就是獲取登錄用戶信息,相當於此函數提供了獲取用戶信息的接口,其他頁面不調用自然不會執行。其他頁面通過getApp().getUserInfo(function(userinfo){console.log(userinfo);})這種方式調用該方法,獲取用戶信息。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
getUserInfo: function (cb){
var that
= this
if (this.globalData.userInfo){
typeof
cb == "function" &&
cb(this.globalData.userInfo)
} else {
wx.login({
success: function ()
{
wx.getUserInfo({
success: function (res)
{
console.log(res)
that.globalData.userInfo
= res.userInfo
typeof
cb == "function" &&
cb(that.globalData.userInfo)
}
})
}
})
}
}
|
globalData對象用來存儲全局數據,在其他地方調用
然後簡要分析下app.json文件,該文件作用是對微信小程序進行全局配置,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等、
最重要的是pages屬性,必填,爲數組,數組內的元素爲字符串性文件路徑,指定小程序由哪些頁面組成,第一項必須是小程序初始頁面。
1
2
3
4
5
6
7
8
9
10
11
12
|
{
"pages" :[
"pages/index/index" ,
"pages/logs/logs"
],
"window" :{
"backgroundTextStyle" : "light" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "WeChat" ,
"navigationBarTextStyle" : "black"
}
}
|
然後來看下項目index和logs文件夾。微信小程序初始項目把每個頁面相關的js、wxss、wxml放在各自的文件,這樣看起來結構清晰明朗很多。
先來看index文件夾,即小程序初始頁面。index文件夾下爲index.js、index.wxml、index.wxss三個小文件。小程序把js、css、html代碼分離開來,放在獨自的文件裏,各司其職。js和樣式表文件名必須與當前文件夾的wxml文件名保持一致,這樣才能保證js和樣式表的效果能夠在頁面中顯現出來。我很欣賞這樣的設計理念,整齊劃一,職責明確,減輕代碼設計複雜度。
index.wxml,這就是常見的模板文件,數據驅動,有過前端mvc、mvvm項目開發的對這個一定不會陌生,畢竟這是基於react開發的。
1
2
3
4
5
6
7
8
9
10
|
<!--index.wxml-->
<view class = "container" >
<view
bindtap= "bindViewTap" class = "userinfo" >
<image class = "userinfo-avatar" src= "{{userInfo.avatarUrl}}" background-size= "cover" ></image>
<text class = "userinfo-nickname" >{{userInfo.nickName}}</text>
</view>
<view class = "usermotto" >
<text class = "user-motto" >{{motto}}</text>
</view>
</view>
|
index.js,與reaact用法幾無二異,換湯不換藥。page()來註冊一個頁面。接受一個 OBJECT 參數,其指定頁面的初始數據、生命週期函數、事件處理函數等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var app
= getApp()
Page({
data:
{
motto: 'Hello
World' ,
userInfo:
{}
},
bindViewTap: function ()
{
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function ()
{
console.log( 'onLoad' )
var that
= this
app.getUserInfo( function (userInfo){
that.setData({
userInfo:userInfo
})
})
}
})
|
index.wxss文件只渲染當前所屬頁面,會覆蓋全局app.wxss同一樣式。
再分析下logs日誌文件夾,logs文件夾下爲logs.wxml、logs.js、logs.wxss、logs.json,同理保證同名,才能完成效果渲染。
logs.wxml文件
1
2
3
4
5
6
|
< view class = "container
log-list" >
< block wx:for = "{{logs}}" wx:for-item = "log" >//block容器作用,無其他實際含義。wx:for作用:遍歷logs數組,遍歷多少次,block塊就會複製多少次,for-item等同於爲< br >遍歷元素起一個變量名,方便引用。< br >
< text class = "log-item" >{{index
+ 1}}. {{log}}</ text >
</ block >
</ view >
|
logs.js 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var util
= require( '../../utils/util.js' )
Page({
data:
{
logs:
[]
},
onLoad: function ()
{
this .setData({
logs:
(wx.getStorageSync( 'logs' )
|| []).map( function (log)
{
return util.formatTime( new Date(log))
})
})
}
})
|
logs.json文件
1
2
3
|
{
"navigationBarTitleText" : "查看啓動日誌"
}
|