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样式的控制。略