1，文件分布结构：
│ app.wxss
│ app.js
│ app.json
│
├─pages
│ ├─index
│ │ index.js
│ │ index.wxml
│ │ input.wxml
│ │ index.wxss
│ │
│ ├─main
│ │ main.wxss
│ │ main.js
│ │ main.wxml
│ │
│ └─logs
│ logs.js
│ logs.json
│ logs.wxss
│ logs.wxml
│
└─utils
util.js
2，业务逻辑部分
对于不同的项目，根据其具体的业务逻辑表现，文件有不同的组织方式，但基本元素(页面Page)的结构不变。
在helloworld项目中，如上图绿色所示为：pages/utils。
pages：该文件夹下存放不同的业务逻辑页面，在这里为index文件夹(主页面)，logs文件夹(log页面)。
utils：该文件夹下存放工具类函数，并通过module.exports导出formatTime来供其他文件调用。
3,程序主体部分
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#BF0000",
"navigationBarTitleText": "Hello Word",
"navigationBarTextStyle":"#FFFFFF"
},
"debug": true
}
|
4.页面代码说明：
1.index.js
//index.js
//获取应用实例
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs' //转到logs页面
})
},
viewTap: function() {
console.log('view top');
//设置一个memberName的值
this.setData({
memberName: {
value: 'ylong52'
}
})
//转到navigateTo页面
wx.navigateTo({
url: '../index/input'
})
},
onLoad: function(options) {
console.log(options)
var that = this
this.setData({
title: options.title
})
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
that.update()
})
}
})
|
注：有一些事件是我做测试放进去的。如：bindViewTap，app.getUserInfo。学习使用，无其它意议
2. index.wxml和index.wxss 是对index页面html结构和css样式的控制。略 |
