核心
一个响应式数据绑定系统
- View 视图
- App Service 逻辑
文件结构
根目录：
- app.js 小程序逻辑(require)
- app.json 小程序公共设置(require)
- app.wxss 小程序公共样式
小程序页面组成
- js 页面逻辑(require)
- wxml 页面结构(require)
- wxss 页面样式
- json 页面配置
为减少配置，描述页面4个文件必须具有相同的路径和文件名
配置
app.json为小程序全局配置
{
//小程序页面路径
pages: [],
//小程序状态栏，导航，标题，窗口背景色
window: {},
tabBar: {},
networkTimeout: {},
debug: true
}
page.json为小程序页面配置，只能设置window配置项内容
{
navigationBarBackgroundColor: '#000',
navigationBarTextStyle: 'white',
navigationBarTitleText: 'title',
backgroundColor: '#fff',
backgroundTextStyle: 'dark',
enablePullDownRefresh: false,
disableScroll: false,
onReachBottomDistance: 50
}
App Service逻辑
- 注册程序
App({
//当小程序初始化完成
onLaunch() {},
//当小程序启动，或从后台进入前台显示
onShow() {},
//当小程序从前台进入后台
onHide() {},
//当小程序出错
onError(err) {},
//可以添加自定义函数或数据，使用this访问
66sData:{}
});
//全局getApp()可获取小程序实例
//不要在App()内调用，App()内使用this可以拿到实例
var appInstance = getApp();
appInstance.66sData;
App()必须在app.js中注册，且只能注册一个
场景值
可在App的onLaunch和onShow中获取注册页面
Page({
//页面初始数据
data: { num: 0 },
//监听页面加载
onLoad() {},
//监听页面初次渲染完成
onReady() {},
//监听页面显示
onShow() {},
//监听页面隐藏
onHide() {},
//监听页面卸载
onUnload() {},
//监听用户下拉刷新
onPullDownRefresh() {},
//监听用户上拉触底
onReachBottom() {},
//监听用户点分享
onShareAppMessage() {},
//监听页面滚动
onPageScroll() {},
//可以添加自定义函数或数据，使用this访问
66sData:{},
changeNum: function(){
let route = this.route;
this.setData({num: route});
}
});
//获取当前页面路径
Page.prototype.route;
//变更data值并同步视图
Page.prototype.setDate({})
- 路由
小程序路由由框架管理，框架以页面栈的形式维护所有页面
| 路由方式 | 页面栈行为 |
|---|---|
| 初始化，打开新页 | 新页入栈 |
| 页重定向 | 当前页出栈，新页入栈 |
| 页返回 | 页出栈，直到目标返回页，新页入栈 |
| Tab切换 | 页全部出栈，只留新Tab页 |
| 重加载 | 页全部出栈，只留新页 |
//获取当前页栈数组实例，第一个为首页，最后一个为当前页
getCurrentPages();
wx.navigateTo
<navigator open-type="navigateTo" />
wx.redirectTo
<navigator open-type="redirectTo" />
wx.navigateBack
<navigator open-type="navigateBack" />
wx.switchTab
<navigator open-type="switchTab" />
wx.reLaunch
<navigator open-type="reLaunch" />
- 模块化
//comme.js
//通过module.export和export导出
module.export.sayHello = () => {};
export.sayGoodbye = () => {};
//通过require导入
const common = require('comm.js');
