框架：逻辑层

核心

一个响应式数据绑定系统

• 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');