【WePY小程序框架实战二】-页面结构

【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

        

          
        
        
        

          

          AI 代码解读
        
      
      

小程序的三个实例

• 小程序实例 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 {
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

各个实例页面详解

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访问
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

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 = {};  // 声明组件之间的事件处理函数
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

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>

        

          
        
        
        

          

          AI 代码解读