根据官方提供的demo我们可以看到工程的目录结构，很清晰,在根目录下我们可以看到文件夹page、util、image以及app.json、app.js、app.wxss,下边我们来介绍下他们：
1.page根据意思我们就知道这是页面相当于ViewController、Activity，我们通常把index作为首页，一般我们会看到index.wxml是页面可以说是html，index.js是带页面的处理逻辑代码(也就是脚本代码)，index.wxss就是对index.wxml里的空间进行布局处理的css。
2.util跟其他一样就是工具文件夹，里边是我们所需要的工具js。
function formatTime(time) {
if (typeof time !== 'number' || time < 0) {
return time
}
var hour = parseInt(time / 3600)
time = time % 3600
var minute = parseInt(time / 60)
time = time % 60
var second = time
return ([hour, minute, second]).map(function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}).join(':')
}
module.exports = {
formatTime: formatTime
}
3.app.json是工程的一些配置，页面的路径、图片的路径、window、tabbar等的配置
{
"pages": [
"page/component/index",
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#fbf9fe",
"backgroundColor": "#fbf9fe"
},
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "page/component/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "page/API/index/index",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "接口"
}]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": true
}
4.app.js 是全局的通用的小方法
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
5.app.wxss是全局公共的css布局
page {
background-color: #fbf9fe;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
}
.page-header {
display: flex;
font-size: 32rpx;
color: #aaa;
margin-top: 50rpx;
flex-direction: column;
align-items: center;
}
.gray{
color: #C9C9C9;
}
整个工程目录：
目录.png
