# wx-minprogram-render-engine

> ## 介绍

Latest version **1.1.2** (published 2021-03-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install wx-minprogram-render-engine
pnpm add wx-minprogram-render-engine
yarn add wx-minprogram-render-engine
bun add wx-minprogram-render-engine
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-03-16 |
| First published | 2021-03-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jerome |
| Maintainers | jeromeone |

## Links

- npm: https://www.npmjs.com/package/wx-minprogram-render-engine
- npm.io page: https://npm.io/package/wx-minprogram-render-engine

## Recent versions

- 1.1.2 (latest) — 2021-03-16
- 1.1.1 — 2021-03-16
- 1.1.0 — 2021-03-16
- 1.0.9 — 2021-03-16
- 1.0.8 — 2021-03-16
- 1.0.7 — 2021-03-15
- 1.0.6 — 2021-03-12
- 1.0.5 — 2021-03-10
- 1.0.4 — 2021-03-10
- 1.0.3 — 2021-03-10
- 1.0.2 — 2021-03-10
- 1.0.1 — 2021-03-10
- 1.0.0 — 2021-03-10

## README

## 小程序渲染引擎

## 介绍

小程序渲染引擎,用于动态配置小程序页面(暂时仅适用于简单页面的配置)
所有的配置尽可能的贴合渲染引擎的配置 但是由于小程序的某些特定的不可控原因, 某些细节处理以小程序为主


## 设计方案

小程序无法进行js主动渲染页面,所以在进行组件嵌套循环的这快设计为有一个容器组件,
需要自己进行循环自己,在**json文件**中配置自己引用自己

eg:
  ```

    "cr-page": "../cr-page",

    <cr-page />

  ```

即可

组件之间是如何进行数据传输呢?

引入公共 behavior 组件, behavior 组件拿到wprops 配置参数后进行铺开进行setData操作将数据平铺, 所以在页面和开发过程中就可以直接适用

eg:
  ```
    wprops: { name }

    使用
  
    const { name } = this.data;

    即可获取到name数据
  ```


## 接入流程

#### 第一步: npm 安装

```node
  npm install wx-minprogram-render-engine
```

#### 第二步: 开发主组件(实现嵌套循环)
  由于小程序组件需要进行组件嵌套循环 所以方案为 自己循环自己
  
```html
  <view class="page" style="{{style}}">
    <block wx:for="{{childrens}}" wx:key="id">
      <!-- 图片组件 -->
      <block wx:if="{{item.widget === 'Image'}}" >
        <cr-image
          cdata="{{cdata}}"
          onAction="{{onAction}}"
          wprops="{{item.wprops}}"
          value="{{item.value}}"
          bind:change="bindChange"
          _item="{{item}}"
        />
      </block>
      <!-- 容器组件(自己循环自己) -->
      <block wx:elif="{{item.widget === 'Container'}}" >
        <cr-page
          cdata="{{cdata}}"
          onAction="{{onAction}}"
          wprops="{{item}}"
          value="{{item.value}}"
          bind:change="bindChange"
          _item="{{item}}"
        />
      </block>
      <!-- 其他组件 -->
      <block wx:else>
        未开发的组件: {{item.widget}}
      </block>
    </block>
  </view>

```

### 第三步: 组件开发
```js

  import { behavior } from 'wx-minprogram-render-engine';

  Component({
    behaviors: [behavior],
    properties: {
    },
    methods: {
      
    }
  })
  
```
  
## 如何进行页面数据的更新与联动

---
_Source: https://npm.io/package/wx-minprogram-render-engine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._