前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序组件化开发框架wepy学习(二)

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

作者头像
Javanx
发布2019-09-04 15:38:39
4170
发布2019-09-04 15:38:39
举报
文章被收录于专栏:web秀

前言

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

文件

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

代码语言:javascript
复制
<template>
 <!--渲染模板 对应wxml -->
</template>
<script>
 // 脚本 对应 .js
</script>
<style>
 /*样式 对应 wxss*/
</style>

文件类型 文件类型声明与<script>有关 声明为app 即原生入口app.js,有且仅能声明一个。 声明类继承 wepy.app 即可。如下:

代码语言:javascript
复制
<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即可。如下:

代码语言:javascript
复制
<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即可。如下:

代码语言:javascript
复制
<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,并装载

代码语言:javascript
复制
components = { 
 pro: PropData
};

父页面

代码语言:javascript
复制
<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>

子组件

代码语言:javascript
复制
<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号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年9月17日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 文件
  • 组件
  • 公告
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档