wepy 组件化开发 1

要点

组件可以将一组功能封装一个 component 里，并且可以在页面上以自定义标签的形式引入

<!-- 列表 -->
<discover></discover>
<!-- 底部加载更多提示 -->  
<bottomLoadMore :message='mes' :show.sync='showLoading'></bottomLoadMore>
<!-- 组件暂无数据的提示 -->
<placeholder></placeholder>
<!-- 弹出广告 -->
<bombscreen></bombscreen>

引入组件

import Bomnbscreen from '@/components/bomb_screen'
import Placeholder from '@/components/placeholder'
import BottomLoadMore from '@/components/bottom_load_more'
import Discover from '@/components/discover'

在 components 声明页面地组件构成

components = {
    // 标签名: 组件名
    bombscreen: Bomnbscreen,
    placeholder: Placeholder,
    bottomLoadMore: BottomLoadMore,
    discover: Discover
}

组件标签可以携带参数

1	<bottomLoadMore :message='mes' :show.sync='showLoading'></bottomLoadMore>

message="load more ..." 传参
:message='mes' 则是把参数防止在 data 中

data = {
    showLoading: false,
    mes: 'loading more'
}

组件数据props动态更新
使用 .sync =>

在组件文件内 props 接收传递的数据

props = {
    show: {
        type: Boolean,
        default: true,
    },
    message: {
        default: '正在加载中',
        type: String,
    }
}

组件内接收

<view class="loadMoreGIF" wx:if="{{show}}">
    <image src="../images/loadding.gif"></image>
    <text>{{message}}</text>
</view>

部分代码展示

home.wepy

<style lang="less"></style>

<template>
    <view></view>
    <!-- bombscreen自定义标签 
        组件可以将一组功能封装一个 component 里，
        并且可以在页面上以自定义标签的形式引入 -->
    
    <!-- 首页列表 分组件 -->
    <!-- 列表 -->
    <discover></discover>
    <!-- 底部加载更多提示 -->       
    <!-- 传参 message="load more ..." -->
    <!-- :message='mes' 将mes放在data中 -->
    <!-- 同步改变 .sync props动态更新 -->
    <bottomLoadMore :message='mes' :show.sync='showLoading'></bottomLoadMore>
    <!-- 组件暂无数据的提示 -->
    <placeholder></placeholder>
    <!-- 弹出广告 -->
    <bombscreen></bombscreen>
</template>

<script>
    // wepy 在本地的 node_modules/ 下（其实也在全局，如果全局安装了 wepy）
    import wepy from 'wepy'
    // 将页面换一个视角
    // 组件视角
    import Bomnbscreen from '@/components/bomb_screen'
    import Placeholder from '@/components/placeholder'
    import BottomLoadMore from '@/components/bottom_load_more'
    import Discover from '@/components/discover'

    // 单页面组件
    export default class Home extends wepy.page {
        // es6 class 内部，不是 json 不使用 : 
        data = {
            showLoading: false,
            mes: 'loading more'
        }
        // 声明页面地组件构成
        // 好处 多人协作 将复杂度细化 可读性更强
        components = {
            // 标签名: 组件名
            bombscreen: Bomnbscreen,
            placeholder: Placeholder,
            bottomLoadMore: BottomLoadMore,
            discover: Discover
        }

        onLoad() {
            this.showLoading = true
        }
    }
</script>

bottom_load_more.wpy

<style lang="less">
    .loadMoreGIF {
        margin: 15rpx auto;
        width: 240rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        text {
            font-size: 30rpx;
            color: #999;
            margin-left: 10rpx;
        }
        image {
            display: block;
            width: 30rpx;
            height: 30rpx;
        }
    }
</style>
<template>
    <view class="loadMoreGIF" wx:if="{{show}}">
        <image src="../images/loadding.gif" />
        <text>{{message}}</text>
    </view>
</template>
<script>
    import wepy from 'wepy'
    export default class BottomLoadMore extends wepy.component {
        props = {
            show: {
                type: Boolean,
                default: true,
            },
            message: {
                default: '正在加载中',
                type: String,
            }
        }
    }
</script>

tan-ln的博客

wepy-component

wepy 组件化开发 1

要点

部分代码展示