微信小程序第一个HELLO WORD程序

摘要: 微信小程序第一个HELLO WORD程序

微信小程序第一个HELLO WORD程序

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,程序主体部分

由三个文件组成，必须放在项目的根目录,就是app.wxss、app.js、app.json
1. app.json 是微信小程序的全局配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#BF0000",
"navigationBarTitleText": "Hello Word",
"navigationBarTextStyle":"#FFFFFF"
},
"debug": true
}

说明：
*  pages：pages接受一个字符串数组，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。
小程序中新增/减少页面，都需要对pages数组进行修改。pages中的路径为相对路径。文件名不需要写文件后缀，因为MINA会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

*  window：用于设置小程序的状态栏、导航条、标题、窗口背景色。
*  debug：是输出调试信息

2.app.wxss
WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言，用于描述WXML的组件样式，也用来决定WXML的组件的显示方式。从定位上讲WXSS相当于css
/**app.wxss**/

.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

.mui-bar-tab {
bottom: 0;
display: table;
width: 100%;
height: 50px;
padding: 0;
table-layout: fixed;
border-top: 0;
border-bottom: 0;

}

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