【WePY小程序框架实战二】-页面结构
项目结构
|-- 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 class="child">
<Child></Child>
</view>
</template>
<script>
import wepy from 'wepy'
</script>