Skip to content
通过Object.defineProperty,让小程序支持通过data/methods/events/watch开发模块化的组件。(玩儿的项目,不维护)
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
gulp
screenshots
src
wechat-ide-binding-directory
.gitignore
CHANGELOG.md
README.md
gulpfile.js
package.json

README.md

WECH (Wechat Component Helper)

微信小程序模块化组件开发“框架”

更新日志:Changelog

简介

使小程序开发可以采用模块化的开发方式。没有任何构建相关的骨架或者约束。在运行阶段自动通过getter/setter,将你的“模块化组件”的数据和方法的映射到小程序的实际页面。支持组件嵌套、防止方法名污染、单向数据绑定、监听数据变化。

优势

极轻量:9kb,无论开发还是打包。

多兼容:同一版本兼容安卓/ios/开发工具。由于只有js,wech也兼容部分其它框架。

低成本:无构建要求、无依赖。本身只有一个js文件,可以copy到你的项目直接来用,引入成本极低。对wxss、wxml无任何新增语法规则,最大程度地避免引入沉重的轮子,防止小程序官方迭代导致的项目改动成本。

如何查看demo

1.git clone https://github.com/chenzhuo1992/wech.git

2.将wechat-ide-binding-directory目录绑定为小程序开发目录,在开发者工具中运行项目

使用方式

1.把dist/widget.js拷到你的工程中;如果你的项目支持npm,可以使用import wech from 'wech'

2.开发组件时:

import wech from 'yourPath/widget.js';

const yourConfig = {
    data: {
        // 组件私有数据
        district: '',
    },
    methods: {
        // 组件私有方法
        yourComponentMethod: function () {
            // this指向组件自身(下同)
        },
    },
    events: {
        // 私有模版事件响应
        yourComponentEvent: function () {},
    },
    watch: {
        // 监听组件私有数据的变化(在页面onLoad之后开始监听)
        yourComponentData: function (newValue, oldValue) {},
    },
    onLoad: function () {
        // 先触发页面的生命周期钩子,再触发组件的生命周期钩子
    }
};

module.exports = wech(yourConfig);

其中,可以通过 this.data.district / this.yourComponentMethod 访问组件内部的数据和方法,通过 this.setData 更新组件内部的数据,通过 this.$emit('eventName', data) 向外传递事件。模版中可以通过 bindtap="{{ yourComponentEvent }}" 来触发组件内部方法,防止全局事件名污染。

3.引入组件时,通过install/addTo方法。install用于将组件挂载到页面,addTo用于将组件作为子组件,挂载到另一个组件内部:

import child1 from '../components/foo.js';
const pageConfig = { 微信页面配置 };

child1.install(pageConfig, {
    // scope需要和<template is="child1name" data="{{...c1}}"></template>里面的data相符,wech会自动映射组件数据和方法
    scope: 'c1',
    static: {
        age: 25, // 传递给组件的静态参数,一般用于初始化、配置等,组件内部仍可以修改传入的参数(无绑定)
    },
    props: {
        // 传递给组件的动态数据,page的数据更新会同步至组件,而组件内部无法再修改(单向数据流)
        address () {
            return '北京市' + this.data.district + '区';
        },
    },
    events: {
        // 组件暴露到外部的事件
        changeCity (data) {
            this.setData({district: ''});
        }
    }
});

Page(pageConfig);

addTo同理,如下:

import wech from 'yourPath/widget.js';
import grandson from 'your Grand Component';

var conf = {}; // 子组件
grandson.addTo(conf, {
    scope: 'grandson',
    static: {},
    props: {},
    events: {},
    watch: {}
});

module.exports = widget(conf);

备注:这样挂载的是组件自身,如果同一组件同时用于页面多次,可以使用foo().install/foo().addTo进行实例化,避免引起冲突。foo()会立即创建一个foo的实例。

关于css和wxml

没有额外的要求或者改动,目的是保持轻量和便于适配微信官方后续的迭代。唯一的补充是,组件内的bindtap等事件可以通过花括号 {{ eventName }} 来绑定内部的方法。引入widget后会保证每个组件的事件名互不冲突。

You can’t perform that action at this time.