【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

小程序的三個實例

• 小程序實例 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>