小程序渲染引擎

介绍

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

设计方案

小程序无法进行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: {
      
    }
  })
  

如何进行页面数据的更新与联动