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

<template>
 <!--渲染模板 对应wxml -->
</template>
<script>
 // 脚本 对应 .js
</script>
<style>
 /*样式 对应 wxss*/
</style>

<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>

<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>

<script>
  import wepy from 'wepy'

  export default class com extends wepy.component {
    customData = {}  // 自定义数据

    props = {} // 父组件传入的参数

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

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

    config = {};  //只在Page实例中存在的配置数据，对应于原生的page.json文件

    data = {};  // 页面所需数据均需在这里声明，可用于模板数据绑定

    components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件

    mixins = [];  // 声明页面所引用的Mixin实例

    computed = {};  // 声明计算属性（详见后文介绍）

    watch = {};  // 声明数据watcher（详见后文介绍）

    methods = {};  // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明

    events = {};  // 声明组件之间的事件处理函数
}
</script>

components = { 
 pro: PropData
};

<template>
  <view>
    <pro :valueText.sync="valueText" @confirm.user="confirm"></pro>
  </view>
</template>

<script>
  import wepy from 'wepy'
  //   引入组件
  import PropData from '@/components/propData'
  export default class mo extends wepy.page {
    components = { 
      pro: PropData
    };
    data = {
      valueText: '这是父组件传入子组件的值'
    };
    methods = {
      confirm(data) {
        console.log('子组件调用父组件的方法');
        console.log(data);
      }
    };

    onLoad() {
    }
  }
</script>

<template>
  <view>
    <text @tap="confirm">{{valueText}}</text>
  </view>
</template>

<script>
  import wepy from 'wepy'

  export default class mo extends wepy.component {
    props = {
      valueText: String
    };
    data = {
    };
    methods = {
      confirm() {
        // 调用父组件的confirm方法，并传入data参数
        let data = {
          a: 1
        }
        this.$emit('confirm', data)
      }
    };
    onLoad() {
    }
  }
</script>