揭秘当下主流的小程序框架，哪个坑最多？

曾经终败给现在 2023-03-13 06:00 21阅读 0赞

我们知道小程序最开始出来的时候，包括到现在；官方给出的写法是js对应逻辑层，wxml也自己尝试了一套DSL自定义视图的模板语法，写法雷同vue的template语法：

*  数据绑定

<view wx:for="{
        {array}}"> {
        {item}} </view>

*  列表渲染

<view wx:for="{
        {array}}"> {
        {item}} </view>

*  条件渲染

<view wx:if="{
        {view == 'WEBVIEW'}}"> WEBVIEW </view>
    <view wx:elif="{
        {view == 'APP'}}"> APP </view>
    <view wx:else="{
        {view == 'MINA'}}"> MINA </view>

这几种语法，当然还包括了wxss来定义样式文件的语法，基本上与css相同。到目前的类vue、类react的小程序框架逐渐使用广泛，从而基本上没有怎么使用，不过微信小程序官方一开始定义这一套语法之初的目的是什么呢？这反而给我们留下了一个疑问？包括后面诞生的支付宝小程序、抖音小程序等一系列小程序都是雷同的；

##### 语法定义的背后 #####

我们类比以上几种语法，可以发现和在web端开发h5的时候基本的语法规范大致一样：

*  小程序js—web js
 *  小程序wxml—web html
 *  小程序wxss—web css

所以就可以明白定义的语法类同web 编程的三大基本技能，而这也是比较容易入门的；

###### 最后究竟是什么 ######

然而我们知道，任何一门语言都有它执行的地方，那么这几种微信独特定义的语法是有自己的解析器来专门执行吗？对于逻辑层面语法是js，可以猜测是运行的js引擎来执行的；那么wxml和wxss呢，是否微信自己定义了一套渲染器来解析这两种语法，如同flutter内部提供了一套渲染引擎来解析dart的Widget渲染视图，或者说最后编译成为了其他的语言运行；

对于第二种编译成为其他语言的这种情况，由于雷同html及css，我们猜测最后编译成为这两种语言，那么如何验证？

*  我们首先定义一个简单的模板

<view class="container">
      <View>这里是一灯</View>
    </view>

![format_png][]

*   既然猜测编译成为html，那么我们就加入HTML的代码，混合执行，看最后显示的结果如何：

<view class="container">
      <View>这里是一灯</View>
      <div>
        <h4>我们是未来的掌舵人</h4>
        <p>为天地立心</p>
        <p>为生民立命</p>
        <p>为往圣继绝学</p>
        <p>为万世开太平</p>
      </div>
    </view>

![format_png 1][]

如上执行的结果如同直接在浏览器中运行一般；对于小程序官方是不支持div、h4等标签的，既然可以在其中运行，并且解析，那么我们就可以基本认为最后小程序打包上线运行的代码，就是编译成为html及css的代码；最后在微信提供的webview中运行；

而编译出来的html及css怎么组织、与逻辑js如何交互，他为什么比我们平时的html性能交互体验更好；js的执行是否还会阻塞html及css解析的过程，这些过程自然就更需要去研究了，最后借鉴到web端来优化我们的整体代码，这是我们为什么研究其他东西的原因；

所以我们上线了小程序的专题课——【小程序开发框架深度对比与源码分析】，课程对于小程序的基本架构，打包上线运行的代码都有讲解；同时对当下主流的小程序框架也有深度的架构解析和原理分析，以及如何来优化小程序的执行效率等关键问题。

![format_png 2][]

对于学习来说，你最大的成本，永远是自己的时间，毕竟不是谁都有罗志祥那样超群的时间管理能力，能够花最少的钱买到最优质的课程才是最重要的。

专题课【小程序开发框架深度对比与源码分析】从小程序架构讲起，深度对比小程序开发框架和源码分析，只要 3 天就能解锁一个带你成为小程序开发高手的课程，且，只需要 1 元！

现在我们来看一下你将学到哪些内容？????????????

一、小程序架构及性能优化

\- 小程序架构详解

\- 浏览器端运行小程序代码原理解析

\- 小程序开发性能优化浅析

二、小程序框架横向对比

\- 编译时框架taro、wepy架构浅析

\- 半编译半运行时框架mpvue框架浅析

\- 运行时框架kbone、remax框架浅析

三、taro小程序框架详解

\- 编译时框架架构详解

\- taro打包流程解析

\- taro源码浅析

\- taro进阶使用

以上，就是这样一门包含诸多干货内容+实操讲解+社群服务的课程，不要999，也不要99，只要 1 元！

它一定不能解决你的所有问题。但是，它会是你小程序开发实力“超车”的开始。同时1元报名后还将**免费送**一个98元的面试专题课：【你不知道的Vue.js 性能优化】????这是一个Vue 高级教程，深度讲解 Vue.js 性能优化，以及 Vue3.0 那些值得关注的新特性，带你解锁你可能不知道的 Vue.js 性能优化，报名即送～

本课程即将于 5 月 12 日（周二）开课，限时 1元购课，赶快长按识别下方二维码，领券报名吧！????

限时 1 元

扫码领券购买

????????????

![format_png 3][]

[format_png]: /images/20230312/b48513c4c22a4491b3d491f636a18cef.png
[format_png 1]: /images/20230312/1ea8395f78fe49ea9aace5aa88d4b4a5.png
[format_png 2]: /images/20230312/8e044f18fd6b43e4a329b2a3dcc766a0.png
[format_png 3]: /images/20230312/767d992f70d84cb097aac72ff07c7d0c.png