脚本宝典收集整理的这篇文章主要介绍了

微信小程序组件化方案示例

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

由于微信小程序中只提供了template,而template仅仅是视图模板,我们其实想要的组件是包含视图(wxml和wxss)和逻辑(js)的。网上有第三方框架可以组件化,但是看了看,好复杂。而且结合到我们项目中,由于有1M的限制,实在无法过多使用第三方框架了。所以,有了下文。。。如果哪位大神有更好的方案,欢迎交流。

其实原理很简单,就是合并。做法分三步:

  • 子组件的wxml作为模板include到父容器中

  • 子组件的wxss import到父容器的wxss中

  • 把父容器的data和方法与子组件的data和方法合并(注意:合并的data及方法名不能重名)

看看效果:

在子组件的input框中输入内容,父容器中显示input的内容,父容器中点击清空按钮后子组件input内容清空。

运行截图
图片描述

详细说明

组件部分

1.js部分把data及方法export出去供调用侧使用。

module.exports = {
    data: {
        childInputVal: ''
    },
    inputChange: function(event) {
        let inputVal = event.detail.value;
        this.setData({
            childCompVal: inputVal,
            childInputVal: inputVal
        });
    }
}

2.wxml部分。

<view class="component-container">
    <view class="desc">子组件</view>
    <input 
        value="{{childInputVal}}"
        placeholder="输入内容后自动更新父容器文本内容"
        bindinput="inputChange" />
</view>

3.wxss部分

.component-container{
    width: 90%;
    height: 30%;
    border: 1px solid #cdcdcd;
    border-radius: 15px;
    padding: 5px;
    margin-top: 70px;
}
.desc{
    margin-top: 10px;
    text-align: center;
}
input{
  width: 100%;
  margin-top: 20px;
}

父容器部分

1.容器中wxml部分

在wxml中include上面的wxml

<view class="container">
  <text>父容器</text>
  <view class="button-container">
    <button bindtap="clearInput" type="primary" size="default" >清空</button>
  </view>
  <view class="value-container">
    {{childCompVal}}
  </view>
  <!-- 引入子组件wxml -->
  <include src="../../components/myComponent/index.wxml" />
</view>

2.容器中wxss部分

在wxss中import上面的wxss文件

.button-container {
  margin-top: 10px;
  width: 90%;
}

.value-container {
  margin-top: 30px;
  width: 90%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  border-radius: 15px;
  color: #333;
}

/** 引入子组件样式 **/
@import "../../components/myComponent/index.wxss"

3.容器中js部分

1.引入子组件的js文件

var myComponent = require('../../components/myComponent/index');

2.把原来Page({...})中的代码移出

    // 原来
    Page({
        data:{
            data1: 'data1',
            data2: 'data2'
        },
        func1: function() {...}
    });

    // 改成
    var pageObj = {
        data:{
            data1: 'data1',
            data2: 'data2'
        },
        func1: function() {...}
    };
    Page(pageObj);

3.在调用Page(pageObj)之前,把引入的共通内容合并到进pageObj中

    for (let compKey in compObj) {
        if (compKey == 'data') {
            // 合并页面中的data
            let data = compObj[compKey];
            for(let dataKey in data) {
                pageObj.data[dataKey] = data[dataKey];
            }
        } else {
            // 合并页面中的方法
            pageObj[compKey] = compObj[compKey];
        }
    }
    Page(pageObj);

示例代码

github地址:https://github.com/yinhaijiao/XcxComponentsDemo

总结

以上是脚本宝典为你收集整理的

微信小程序组件化方案示例

全部内容,希望文章能够帮你解决

微信小程序组件化方案示例

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过