主要布局文件
- XX.wxml 布局文件
- XX.wxss 樣式文件 通過wxml文件中控件的class值來進行關聯(lián)
- XX.js 功能實現(xiàn)文件榴啸,主要界面操作邏輯集嵌,數(shù)據(jù)展示都在這里面實現(xiàn)
- XX.json app.json是對整個項目的窗口串述,界面震鹉,連接時間的設置迹栓,單個界面的json文件是對單個界面的設置
其中app.js顷啼,app.json贷掖,app.wxss 文件是項目的全局文件
- app.js中主要實現(xiàn)項目的全局功能,具體實現(xiàn)視情況而定孽糖,代碼示例如下:
App({
onLaunch: function() {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
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 {
//調(diào)用登錄接口
wx.getUserInfo({
withCredentials: false,
success: function(res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
},
globalData: {
userInfo: null
}
})
- app.json中枯冈,主要定義窗口整體樣式,以及存放相應的界面办悟,代碼示例如下:
//相應的界面需再次進行添加
"pages":[
"pages/index/main", //默認第一行為啟動界面
"pages/logs/logs",
"pages/index/index"
],
//界面的展示樣式
"window":{
"backgroundTextStyle":"light", //背景文字風格
"navigationBarBackgroundColor": "#000", //導航欄的背景顏色
"navigationBarTitleText": "Talisa", //導航欄標題值
"navigationBarTextStyle":"white" //導航欄的字體顏色
}
- app.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;
}