微信小程序组件化开发框架wepy 学习（二）

< >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',     navigationBar Text: 'WeChat',     navigationBarTextStyle: 'black'   } }//   全局数据对象 globalData = {   userInfo: null }//   构造器  使用了 requestfix 优化   不用可以忽略 constructor () {   super()   this.use('requestfix') }//   生命周期函数  自定义函数    onLaunch() {}}</ >

• 声明为page 页面 页面为 无组件页面或者 组件页面 声明类继承 ==wepy.page==

< >   import wepy from 'wepy'   export default class Test extends wepy.page {    customData = {}  // 自定义数据    customFunction ()　{}  //自定义方法      () {}  // 在Page和Component共用的生命周期函数    onShow () {}  // 只在Page中存在的页面生命周期函数    config = {};  // 只在Page实例中存在的配置数据，对应于原生的page.json文件    data = {};  // 页面所需数据均需在这里声明，可用于模板数据绑定    components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件    mixins = [];  // 声明页面所引用的Mixin实例    computed = {};  // 声明计算属性（详见后文介绍）    watch = {};  // 声明数据watcher（详见后文介绍）    methods = {};  // 声明页面w 中标签的事件处理函数。注意，此处只用于声明页面w 中标签的bind、catch事件，自定义方法需以自定义方法的方式声明    events = {};  // 声明组件之间的事件处理函数}</ >

• 声明为组件 页面 页面为 无组件页面或者 组件页面 声明类继承 ==wepy.page==

< >   import wepy from 'wepy'   export default class com extends wepy.component {    customData = {}  // 自定义数据    customFunction ()　{}  //自定义方法      () {}  // 在Page和Component共用的生命周期函数    config = {};  //只在Page实例中存在的配置数据，对应于原生的page.json文件    data = {};  // 页面所需数据均需在这里声明，可用于模板数据绑定    components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件    mixins = [];  // 声明页面所引用的Mixin实例    computed = {};  // 声明计算属性（详见后文介绍）    watch = {};  // 声明数据watcher（详见后文介绍）    methods = {};  // 声明页面w 中标签的事件处理函数。注意，此处只用于声明页面w 中标签的bind、catch事件，自定义方法需以自定义方法的方式声明    events = {};  // 声明组件之间的事件处理函数}</ >

组件

一个组件可以引用零到多个组件被引用的组件需要在宿主组件注册 组件的引用是静态类型的 也就是一个组件如果对另一个组件多次引用 如果需要隔离必须对每次的引用进行唯一标识

组件 mo.wpy

<template>  <view>    <text @tap="clickMe">{{text}}</text>    <text class="sub-text">{{domain. }}</text>  </view></template>< >  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 '      }    };     () {      console.log('mo is loading now ')      console.log(this.d)    }  }</ ><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>< >  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,  : '第一'}, {id: 2,  : '第二'}, {id: 3,  : '第三'}],      valueText: '',      viewClass: 'view-class',      customData: {customText: '父组件参数'}    };     () {      let { } = this.list[1]      console.table(this.list)      console.log(meths.sub( ))      meths.concatStr('hello', 'world', 'wepy')    };    methods = {      inputChange(e) {        this.valueText = e.detail.value      }    };    watch = {      valueText(newValue, oldValue) {        console.log(`num value: ${oldValue} -> ${newValue}`)      }    }  };</ ><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>

原文发布时间为：2018年06月20日
原文作者：NotFound403

本文来源：开源中国 如需转载请联系原作者