微信小程式元件化開發架構wepy 學習（二）

檔案

1.檔案結構 檔案結構類似

VUE

檔案 擴充名為 

.wpy

<template>
  <!--渲染模闆 對應wxml -->
</template>

<script>
  // 腳本 對應 .js
</script>

<style>
  /*樣式 對應 wxss*/
</style>                

2.檔案類型 檔案類型聲明與

<script>

有關

• 聲明為app 入口 即 原生 

  app.js

   隻能聲明一個 聲明類繼承 ==wepy.app==

<script>
import wepy from 'wepy'
import 'wepy-async-function'

export default class extends wepy.app {
   //config app.json  你新增一個頁面 都要配置pages
 config = {
   pages: [
     'pages/test'
   ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black'
   }
 }
//   全局資料對象
 globalData = {
   userInfo: null
 }
//   構造器  使用了 requestfix 優化   不用可以忽略
 constructor () {
   super()
   this.use('requestfix')
 }
//   生命周期函數  自定義函數
    onLaunch() {}
}
</script>           

• 聲明為page 頁面 頁面為 無元件頁面或者 元件頁面 聲明類繼承 ==wepy.page==

<script>
 
  import wepy from 'wepy'
 

  export default class Test 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 = {};  // 聲明元件之間的事件處理函數
}
</script>           

• 聲明為元件 頁面 頁面為 無元件頁面或者 元件頁面 聲明類繼承 ==wepy.page==

<script>
 
  import wepy from 'wepy'
 

  export default class com extends wepy.component {
    customData = {}  // 自定義資料

    customFunction ()　{}  //自定義方法

    onLoad () {}  // 在Page和Component共用的生命周期函數

    config = {};  //隻在Page執行個體中存在的配置資料，對應于原生的page.json檔案

    data = {};  // 頁面所需資料均需在這裡聲明，可用于模闆資料綁定

    components = {};  // 聲明頁面中所引用的元件，或聲明元件中所引用的子元件

    mixins = [];  // 聲明頁面所引用的Mixin執行個體

    computed = {};  // 聲明計算屬性（詳見後文介紹）

    watch = {};  // 聲明資料watcher（詳見後文介紹）

    methods = {};  // 聲明頁面wxml中标簽的事件處理函數。注意，此處隻用于聲明頁面wxml中标簽的bind、catch事件，自定義方法需以自定義方法的方式聲明

    events = {};  // 聲明元件之間的事件處理函數
}
</script>           

總結： 編譯後上述三種類型對應生成各自的原生類型 

json、 wxss、 js、 wxml

 生成檔案的檔案名與

wpy

檔案類名無關。類名僅對引用有關 例如類型為 

Page

的檔案 

index.wpy

編譯後會生成

index.json、 index.wxss、 index.js、 index.wxml

 類名可自行定義 約定 ==不要以$ _== 開頭 類型聲明與聲明類的繼承類型有關 app類 每個應用隻能有一個 其他細節可閱讀官方文檔

元件

一個元件可以引用零到多個元件被引用的元件需要在宿主元件注冊 元件的引用是靜态類型的 也就是一個元件如果對另一個元件多次引用 如果需要隔離必須對每次的引用進行唯一辨別

元件 mo.wpy

<template>
  <view>
    <text @tap="clickMe">{{text}}</text>
    <text class="sub-text">{{domain.title}}</text>
  </view>
</template>

<script>
  import wepy from 'wepy'
  //   引入元件
  import PropData from '@/components/propData'
  export default class mo extends wepy.component {
         // 元件引用元件  如果PropData多次被引用而且希望互相隔離 key 要保持唯一  
    components = { pro: PropData};
    props = {
      d: String
    };
    data = {
      text: 'this is demo'
    };
    methods = {
      clickMe() {
        this.text = ' click it '
      }
    };

    onLoad() {
      console.log('mo is loading now ')
      console.log(this.d)
    }
  }
</script>

<style>
  text {
    color: brown;
  }

  .sub-text {
    color: darkmagenta;
    font-size: larger;
  }
</style>

頁面 test.wpy

<style>
  view {
    margin: 0 auto;
  }

  .view-class {
    color: darkmagenta;
    font-family: "Fira Code Retina";
    text-align: -webkit-center;
    text-transform: capitalize;
    font-weight: bolder;
  }
</style>

<script>
  import meths from '@/js/charts.js'
  import wepy from 'wepy'
//   元件引入
  import Mo from '@/components/mo'
  import PropData from '@/components/propData'

  export default class Test extends wepy.page {
    config = {};
    // 元件注冊  如果Mo多次被引用而且希望互相隔離 key 要保持唯一  
    components = {mo: Mo, pro: PropData};
    data = {
      list: [{id: 1, title: '第一'}, {id: 2, title: '第二'}, {id: 3, title: '第三'}],
      valueText: '',
      viewClass: 'view-class',
      customData: {customText: '父元件參數'}
    };

    onLoad() {
      let {title} = this.list[1]
      console.table(this.list)
      console.log(meths.sub(title))
      meths.concatStr('hello', 'world', 'wepy')
    };

    methods = {
      inputChange(e) {
        this.valueText = e.detail.value
      }
    };
    watch = {
      valueText(newValue, oldValue) {
        console.log(`num value: ${oldValue} -> ${newValue}`)
      }
    }
  };

</script>

<template>
  <view><input type="text" value="{{valueText}}" @input="inputChange"></view>
  <view>{{valueText}}</view>
  <repeat for="{{list}}" item="item">
    <mo d="ssssssss" :domain="item"/>
  </repeat>
  <pro :n="viewClass" :valueText.sync="valueText"></pro>
</template>

           

總結 其實非常類似于VUE 生命周期函數 類似于vue 的鈎子函數 如果熟悉VUE的方式 這個應該很容易上手 當然與VUE還有一些不同 可對官方文檔進行學習 第三章将對 資料綁定互動進行研究和簡單的分析

原文釋出時間為：2018年06月20日

原文作者：

NotFound403

本文來源：

開源中國

如需轉載請聯系原作者