项目结构 |-- dist |-- node_modules |-- src | |-- components |-- a.wpy |-- b.wpy |-- ... |-- pages |-- index.wpy |-- about.wpy |-- ... |-- store |-- actions |-- reducers |-- types |-- utils |-- http.js |-- ... |-- app.wpy |-- package.json 小程序的三个实例
小程序实例 App （编译后的app.js）
页面实例 Page（编译后为xx.wxml、xx.json、xx.wxss、xx.js）
组件实例 Componets
import wepy from 'wepy'; // 声明一个App小程序实例 export default class MyAPP extends wepy.app { } // 声明一个Page页面实例 export default class IndexPage extends wepy.page { } // 声明一个Component组件实例 export default class MyComponent extends wepy.component { } 各个实例页面详解 App页面实例 app.wpy import wepy from 'wepy'; export default class MyAPP extends wepy.app { customData = {}; //自定义数据 声明 a=1,使用 this.a customFunction () { } //自定义方法 onLaunch () {} //生命周期函数 onShow () {} config = {} // 配置文件 对应 app.json 文件 globalData = {} //全局data数据 可以通过wepy.$instance.globalData访问 } Page页面实例 （src） import wepy from 'wepy'; export default class MyPage extends wepy.page { customData = {} // 自定义数据 customFunction () {} //自定义方法 onLoad () {} // 在Page和Component共用的生命周期函数 onShow () {} // 只在Page中存在的页面生命周期函数 config = {}; // 只在Page实例中存在的配置数据，对应于原生的page.json文件 data = {}; // 页面所需数据均需在这里声明，可用于模板数据绑定 components = {}; // 声明页面中所引用的组件，或声明组件中所引用的子组件 mixins = []; // 声明页面所引用的Mixin实例 computed = {}; // 声明计算属性 watch = {}; // 声明数据watcher methods = {}; // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明 events = {}; // 声明组件之间的事件处理函数 } Component组件实例大部分同Page 不同如下
没有 config
没有 onShow
页面组成每个实例页面都由三个部分组成 ，同vue
style
template
script
x.wpy <style lang="less"> .container { } </style> <template> <view> <Child></Child> </view> </template> <script> import wepy from 'wepy' </script>