react ui框架_声明式UI框架在类小程序运行的原理

<div>
<p>近年新出的UI框架，包括React，Flutter， SwiftUI等在内都采用了声明式的方法构建UI，其中基于React的RN，Flutter都是多端框架，可以一套代码多端复用。但是在国内“端”还有一个小程序，所以在国内的跨端，必须要兼顾到小程序。</p>
<p>本文将探讨一种将<b>声明式UI</b>语法在类小程序平台运行的通用方式，这是一种等效运行的方式，对原语法少有限制。</p>
<p>“Talk is cheap. Show me your code !”，基于这个原理，我们分别在 <code>React Native</code> 端，<code>Flutter</code> 端进行了实践，这两个项目的代码都托管在了<code>github</code>，欢迎关注<b>star</b>。RN端的实践Alita，在 <code>Flutter</code> 端的实践 flutter_mp。</p>
<p>先来看下这两个项目：</p>
<h3><b>RN端的实践：Alita</b></h3>
<p>Alita的代码托管在github alita，除了使用下文将要说明的方式处理了React语法以外，Alita还对齐处理了 React Native 的组件/API，可以把你的 React Native 代码运行在微信小程序平台，Alita的侵入性很低，使用与否，并不会对你的原有React Native开发方式造成太大影响。另外由于React Native本身就可以运行在Android， IOS，web（react-native-web），在加上Alita可以打造出适配全端的大前端框架。</p>
<p>看下<code>Alita</code>示例效果：</p>
<p></p>
<div style="text-align:center;">
  <img alt="94499944d5c77e832c9d57e769ce3189.gif" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-7177047857596e64e6164de1363e82ee.gif">
</div>
<figcaption>
  React Native效果
</figcaption>
<p></p>
<div style="text-align:center;">
  <img alt="1a85856b440cf1cee5f1c0b21d9c6899.gif" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-4a373862117410f5c8ef24caf84adc54.gif">
</div>
<figcaption>
  小程序效果
</figcaption>
<h3><b>Flutter端的实践：flutter_mp</b></h3>
<p>flutter_mp的代码托管在github flutter_mp，由于<b>精力时间有限</b>，<code>flutter_mp</code>还处于很早期的阶段。首先我们根据本文阐述的方式生成wxml文件，配合一个极小的Flutter运行时（只存在到Widget层），最终把Flutter的渲染部分替换成小程序环境。</p>
<p></p>
<div style="text-align:center;">
  <img alt="34cc4ec0ed48cb7ce7434315a1551088.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-e35ca18a79dce5a0d2b813471e456a2d.png">
</div>
<p>看下<code>flutter_mp</code>示例效果：</p>
<p></p>
<div style="text-align:center;">
  <img alt="a5c0baf62c2af52cfc4d0a00d453bbb0.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-c105ae594c3e1f8ea1b117896032004b.png">
</div>
<figcaption>
  Flutter效果
</figcaption>
<p></p>
<div style="text-align:center;">
  <img alt="1ac70bbd80ff77f55194e76fe91902fa.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-9d6ff903ee812c7a0d54135834425795.png">
</div>
<figcaption>
  小程序效果
</figcaption>
<p>下面我们探讨把<b>声明式UI</b>运行在类小程序平台的通用方式，这是一种底层渲染机制，他不限于上层是React或是Flutter或是其他，也不限于底层渲染是微信小程序或是支付宝小程序等。</p>
<h3><b>两种UI构建方式</b></h3>
<p>首先我们看一下两种不同的UI构建方式。</p>
<h3><b>小程序wxml文件</b></h3>
<p>出于<b>未知</b>原因的考虑，小程序框架虽然最终的运行环境是webview，但是它禁用了DOM API，这直接导致<code>React</code>，<code>Vue</code> 等前端流行框架无法直接在小程序端运行。替代性的，在小程序上构建UI需要采用一种更加静态的方式—- <code>wxml</code> 文件，可以看成是一种支持变量绑定的 <code>html</code> ：</p>
<div class="blockcode">
  <pre class="blockcode"><code><view>Hello World</view>
<view>{{txt}}</view>

<view wx:if="{{condition}}">{{txt}}</view></code></pre>
</div>
<p>由于 <code>wxml</code> 文件需要预先定义，且阉割了所有的DOM API，所以小程序“动态”构建UI的能力几乎为0。</p>
<h3><b>React/Flutter等声明式“值UI”</b></h3>
<p>声明式的方式构建UI主要在于“描述界面而不是操作界面”，从这个角度 <code>html</code>， <code>wxml</code> 都属于“声明式”的方式。 <code>React</code> / <code>Flutter</code> 和html/wxml有什么不同呢？</p>
<p>我们先看一个 <code>React</code> 的例子：</p>
<div class="blockcode">
  <pre class="blockcode"><code>class App extends React.Component {

f() {
      return <Text>f</Text>
}

render() {
      var a = <Text>HelloWorld</Text>
      return (
         <View>
            {a}
            {this.f()}
         </View>
      )
}
}</code></pre>
</div>
<p>在组件的 <code>render</code> 方法内，声明了一个

react ui框架_声明式UI框架在类小程序运行的原理

浏览过的版块