小程序框架wepy学习笔记（1）

入口文件app.wpy看起

export default class extends wepy.app {
  config = {
    pages: [
      'pages/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  globalData = {
    userInfo: null
  }
}

入口文件继承自wepy.app，即原生小程序的App()，用于注册整个小程序。
config部分用于配置路由、样式等信息，即原生小程序中的app.json。

index.wpy

<style lang="less">
/** less **/
</style>
<template lang="wxml">
    <view>
    </view>
    <counter1></counter1>
</template>
<script>
import wepy from 'wepy';
import Counter from '../components/counter';
export default class Index extends wepy.page {

    config = {
     navigationBarTitleText: 'test'
    };
    components = {counter1: Counter};

    data = {};
    methods = {};

    events = {};
    onLoad() {};
    // Other properties
}
</script>

页面继承自wepy.page，即原生小程序的Page()，用于注册页面。
config部分和app中有一定区别，只能配置window选项。
components部分用于注册该页面引用的组件。需要注意的是，wepy中的组件是静态的，这意味着同一个组件共享一个实例以及数据，所以当一个页面需要引用多个同一组件时，需要为每个组件分配不同的id。
另外，在页面内可以通过this.$parent访问到入口文件app实例。

组件

<style lang="less">
/** less **/
</style>
<template lang="wxml">
    <view>  </view>
</template>
<script>
import wepy from 'wepy';
export default class Com extends wepy.component {

    components = {};

    data = {};
    methods = {};

    events = {};
    // Other properties
}
</script>

组件继承自wepy.component，和页面类似，除了没有配置项及部分事件。另需要注意的是，组件及页面中的methods属性只能声明模板中绑定的事件，自定义事件需要作为属性声明。例如

<template lang="wxml">
    <button @tap="tapItem"></button>
</template>
<script>
  import wepy from 'wepy';
  export defaut class Com extends wepy.component {
    methods: {
      tapItem() {
        console.log('this is tapItem')
        this.print()
      }
    }
    print(){
      console.log('this is print')
    }
  }
</script>