一、框架
小程序整个系统分为两层:逻辑层和视图层。通过数据绑定机制,实现逻辑层和视图层的数据同步。当用户在视图层发出一个请求,逻辑层找到相关的请求事件处理函数做相关的数据处理,在视图层更新、展示给用户。
二、目录结构
一个小程序包含一个主体部分(app)和多个页面部分(page)。
* APP:主体部分用来描述整体程序,它有三个文件组成:
1. app.js:小程序逻辑。用来注册一个小程序,通过一个参数指定小程序的生命周期函数。
2. app.json:小程序的公共设置。配置小程序的所有页面。对小程序进行全局配置,设置小程序的文件路径、窗口表现、等。
3. app.wxss:公共样式表。用于描述WXML的组件样式。
* 页面部分:每个页面有四个文件组成,其中.js和.wxml是必须有的。
1. .js:页面逻辑部分
2. .wxml:页面结构部分
3. .wxss:页面样式表
4. .json:页面配置
* 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.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == “function” && cb(that.globalData.userInfo)
}
})
}
})
}
},
//全局的属性
globalData:{
userInfo:null
}
* app.json //小程序全局的配置
{
//注册页面
“pages”:[
“pages/index/index”,
“pages/logs/logs”,
“pages/test/test”,
“pages/module/module”
],
//窗口的全局配置
“window”:{
“backgroundTextStyle”:”light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “WeChat”,
“navigationBarTextStyle”:”black”
},
//设置下面的菜单条
“tabBar”: {
“list”: [{
“pagePath”: “pages/index/index”,
“text”: “首页”
},{
“pagePath”: “pages/module/module”,
“text”: “测试”
},{
“pagePath”: “pages/logs/logs”,
“text”: “日志”
}]
},
“debug”:”true”
}
* app.wxss //设置全局的样式
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
* index
index.js
//获取应用实例
var app = getApp()
Page({
//定义数据变量
data: {
motto: ‘Hello World’,
userInfo: {},
b:true
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: ‘../logs/logs’
})
},
//页面加载好之后调用
onLoad: function (options) {
//页面初始化 options为页面跳转所带来的参数,参数是可选
},
onReady: function () {
//页面渲染
},
onShow: function () {
//页面显示
},
onHide: function () {
//页面隐藏
},
onUnload: function () {
//页面关闭
},
})
Index.wxml
可以直接调用index.js里面定义的数据变量,以{{变量名}}的形式调用。