wechat-miniprogram / j-component

a mock minprogram component framework

j-component

简介

仿小程序组件系统，可以让小程序自定义组件跑在 web 端。

注意

• 此框架的性能比不上小程序的实现。
• 此框架的功能会比小程序略微弱一点。
• 此框架不是小程序的子集，是完全独立的实现，请勿将此等价于小程序内的实现。

安装

npm install --save j-component

使用

const jComponent = require('j-component')

behavior(definition)

注册 behavior。

let behavior = jComponent.behavior({
    /* 小程序 behavior 支持的定义段 */
})

register(definition)

注册自定义组件，返回自定组件 id。

definition

属性名	类型	描述
id	String	可选字段，如果传了此字段，则表明注册为全局组件，其他组件可直接在 template 中使用而无需在 usingComponents 里引入
tagName	String	可选字段，指定组件对应的 dom 节点的 tagName，默认取 usingComponents 里的定义或组件自身的 id
path	String	可选字段，该组件在文件系统中的绝对路径，用于需要涉及到组件路径的方法中，如 getRelationNodes 方法
template	String	组件模板，即组件对应的 wxml 内容
usingComponents	Object	使用到的自定义组件映射表
behaviors	Array	behavior 的用法和小程序类似
options	Object	配置对象，支持小程序自定义组件 options 定义段支持的所有字段
options.classPrefix	String	组件样式的私有化前缀，默认是空串，即没有前缀

jComponent.register({
    id: 'view',
    tagName: 'wx-view',
    template: '<div><slot/></div>'
})

let childId = jComponent.register({
    tagName: 'xxx',
    template: '<view><slot/></view>', // 直接使用全局组件
})

let id = jComponent.register({
    template: '<child>123</child>',
    usingComponents: {
        'child': childId, // 声明要使用的组件，传入组件 id
    },
    behaviors: [behavior],
    options: {
        classPrefix: 'xxx',

        /* 其他小程序自定义组件支持的 option，比如 addGlobalClass 等 */
    },

    /* 其他小程序自定义组件支持的定义段，比如 methods 定义段等 */
})

create(componentId, properties)

创建自定义组件实例，返回 RootComponent。

componentId

调用 register 接口返回的 id。

properties

创建组件实例时，由组件接收的初始 properties 对象。

let rootComp = jComponent.create(id)

Class: Component

组件。

属性

属性名	类型	描述
dom	Object	组件实例对应的 dom 节点
data	Object	组件实例对应的 data 对象
instance	Object	组件实例中的 this，通过此字段可以访问组件实例的 methods 等定义段

方法

querySelector(selector)

获取符合给定匹配串的第一个节点，返回 Component 实例。

PS：支持 selector 同小程序自定义组件的 selectComponent 接口

let childComp = comp.querySelector('#a')

querySelectorAll(selector)

获取符合给定匹配串的所有节点，返回 Component 实例列表

PS：支持 selector 同小程序自定义组件的 selectAllComponents 接口

let childComps = comp.querySelectorAll('.a')

setData(data, callback)

调用组件实例的 setData 方法.

comp.setData({ text: 'a' }, () => {})

dispatchEvent(eventName, options)

用于模拟触发该组件实例节点上的事件。

// 触发组件树中的节点事件
comp.dispatchEvent('touchstart', {
  touches: [{ x: 0, y: 0 }],
  changedTouches: [{ x: 0, y: 0 }],
})

// 触发组件树中的节点自定义事件
comp.dispatchEvent('customevent', {
  touches: [{ x: 0, y: 0 }],
  changedTouches: [{ x: 0, y: 0 }],
  /* 其他 CustomEvent 构造器支持的 option */
})

addEventListener(eventName, handler, useCapture)

用于外部监听组件触发的事件。

comp.addEventListener('customevent', evt => {
    console.log(evt)
})

removeEventListener(eventName, handler, useCapture)

用于外部取消监听组件触发的事件。

const handler = evt => {
    console.log(evt)
    comp.removeEventListener('customevent', handler)
}
comp.addEventListener('customevent', handler)

triggerLifeTime(lifeTime, args)

触发组件实例的生命周期钩子。

comp.triggerLifeTime('moved', {test: 'xxx'})

triggerPageLifeTime(lifeTime, args)

触发组件实例中配置的页面的生命周期钩子。

comp.triggerPageLifeTime('show', {test: 'xxx'})

toJSON()

将节点组件下的节点树生成一个 JSON 树

comp.toJSON()

Class: RootComponent

根组件，继承自 Component。亦即是说，所有 Component 支持的属性/接口，RootComponent 都支持。

方法

attach

将根组件实例挂载在传入的 dom 节点上。

const parent = document.createElement('div')
rootComp.attach(parent)

detach

将根组件实例从父亲 dom 节点上移除。

rootComp.detach()

TODO

• 内置 wxml 解析器的 template 支持
• 内置 wxml 解析器的 include 支持
• 内置 wxml 解析器的 import 支持
• 内置 wxml 解析器的 外部 wxs
• generics 支持
• moved 生命周期
• ......

j-component's Issues

关于自定义组件实现的疑问

hi 你好，我有个疑问，希望你帮帮我看看。
关于自定义组件，因为组件系统是在渲染层实现，但是原则上用户的逻辑代码在逻辑层执行，我比较疑惑的是自定义组件是如何实现的，即自定义组件在哪一层实例化，如何通信？

Feature: 外链wxs的支持

目前我的做法是正则匹配到带有src的wxs标签，用读取到外链文件内容后，replace掉原来的wxs标签内容：

替换前：

<wxs src="../../common/wxs/array.wxs" module="utils" />
<view>{{utils.xxx}}</view>

替换后：

<wxs module="utils" />
// 这里是common/wxs/array.wxs文件内容
</wxs>
<view>{{utils.xxx}}</view>

这样做效率挺低的，基本上每个文件都是外链wxs，都需要替换一下，作者有更好的思路吗？

selectorquery 中对于node属性获取添加非空判断

问题描述

selectorquery exec 中获取到的node可能为null，对于node属性取值时有可能会报错

具体改动

具体改动在 j-component/src/tool/selectquery.js 119行

        for (const node of nodes) {
            const itemRes = {}
        // 修改为
        for (const node of nodes) {
            if (!node) continue
            const itemRes = {}

辛苦review支持

更新到1.1.2之后，props传值报错。

而且querySelector也取不到实例啦。

console.error node_modules/miniprogram-exparser/exparser.min.js:1 TypeError: Cannot read property 'parentNode' of undefined

是否支持标签的dataset

创建component怎么设置data-xxx的属性?

generate virtualnode 时希望给for语句添加一个默认空数组

背景

在使用小程序运行时增强框架时，框架会提供computed watch等语法，这些语法糖是在组件attached生命周期注入相应的mixin实现，在第一次jComponent.create执行时，相应的data对象中并不存在wx:for所取数据，会在执行list.length时报错，所以希望这里加一个默认空数组的兜底逻辑。

具体改动

我尝试给项目提pr，但并无项目权限，具体改动在 src/template/virtualnode.js 207行

        const list = expr.calcExpression(statement.for, data) 
        // 修改为
        const list = expr.calcExpression(statement.for, data) || []

辛苦review支持

npm 上的源码与github上的源码并不一致

为什么不同步更新呢

bug: component.setdata方法的实现与小程序的component.setdata行为不一致

github地址：https://github.com/hopperhuang/miniprogram-reactive
这是我自己写的一个用于小程序的computed和watch，类似于vue的实现，通过监听this.data属性的getter和setter来实现的。
单元测试,initcomponent是报错的,component.setdata的时候，并没有触发this.data的setter,所以computed和watch并没有触发。
我的代码在小程序的开发工具上跑是没有问题的，具体的例子在examples/miniprogram里面，可以跑起来看看效果

有测试page的方法吗

请问有测试页面逻辑的方法吗？ 这个库可以用作component的测试已经很赞了，可是我还想要一个测试page的方法，请问有吗？

`create` 方法如何渲染默认 slot?

如题，例如我需要测试一个类 button 组件，我需要渲染其文字内容，形如：

create(button, {
  children: 'Button Text'
})

现在的 create 方法（以及 miniprogram-simulate 的 render 方法）似乎并不支持

不支持模拟小程序的picker-view-column组件吗

不支持模拟小程序的picker-view-column组件吗

[FEAT] Support default behaviors

目前的 j-component 不支持小程序内置的behavior wx://form-field 和 wx://component-export ，导致 simulate 也不支持相关特性。

这里是否可以通过替换默认的behavior来支持该特性？