小程序

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

前言

通过前面的一篇文章,微信小程序组件化开发框架wepy 学习(一),大家搭建wepy环境应该没有问题了,可以自己去尝试一下,很简单的。
下面来具体讲讲wepy页面与组件直接有哪些东西。

文件

文件结构 文件结构类似 Vue 文件 扩展名为 .wpy

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

文件类型 文件类型声明与<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.component即可。如下:

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

组件

定义父页面,引入组件propData,并装载

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>

公告

以后每月5、15、25号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

(157)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注