主要布局文件
- XX.wxml 布局文件
- XX.wxss 样式文件 通过wxml文件中控件的class值来进行关联
- XX.js 功能实现文件，主要界面操作逻辑，数据展示都在这里面实现
- XX.json app.json是对整个项目的窗口，界面，连接时间的设置，单个界面的json文件是对单个界面的设置
其中app.js，app.json，app.wxss 文件是项目的全局文件
- app.js中主要实现项目的全局功能，具体实现视情况而定，代码示例如下：
App({
onLaunch: function() {
//调用API从本地缓存中获取数据
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.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;
}
