Wx-minprogram-render-engine NPM

小程序渲染引擎

介绍

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

设计方案

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

eg:

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

  <cr-page />

即可

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

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

eg:

  wprops: { name }

  使用

  const { name } = this.data;

  即可获取到name数据

接入流程

第一步: npm 安装

  npm install wx-minprogram-render-engine

第二步: 开发主组件(实现嵌套循环)

由于小程序组件需要进行组件嵌套循环所以方案为自己循环自己

  <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>

第三步: 组件开发

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

  Component({
    behaviors: [behavior],
    properties: {
    },
    methods: {
      
    }
  })