扣丁书屋

你知道小程序最后上线的代码是什么样子吗?

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

小程序的一般写法

我们知道小程序最开始出来的时候,包括到现在;官方给出的写法是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,我们猜测最后编译成为这两种语言,那么如何验证?

  • 我们首先定义一个简单的模板
<!--index.wxml-->
<view class="container">
  <View>这里是一灯</View>
</view>

  • 既然猜测编译成为html,那么我们就加入HTML的代码,混合执行,看最后显示的结果如何:
<!--index.wxml-->
<view class="container">
  <View>这里是一灯</View>
  <div>
    <h4>我们是未来的掌舵人</h4>
    <p>为天地立心</p>
    <p>为生民立命</p>
    <p>为往圣继绝学</p>
    <p>为万世开太平</p>
  </div>
</view>

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

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

最多阅读

为Electron程序添加运行时日志 2年以前  |  10148次阅读
Node.js下通过配置host访问URL 2年以前  |  3811次阅读
js动态创建类和实例化 2年以前  |  2942次阅读
wordpress标签页的制作 2年以前  |  2805次阅读
初探 React 组件 2年以前  |  2795次阅读
500行PHP代码搞定富文本安全过滤 2年以前  |  2683次阅读
22个HTML5的初级技巧 2年以前  |  2630次阅读
MBTI免费在线测试 2年以前  |  2586次阅读
浅谈浏览器的原生拖拽事件 2年以前  |  2573次阅读
使用 SRI 增强 localStorage 代码安全 2年以前  |  2555次阅读
CSS清除浮动 2年以前  |  2521次阅读
第三版主题上线 2年以前  |  2501次阅读
利用服务器返回header来传输数据 2年以前  |  2485次阅读
【译】V8 团队眼中的 ES6、ES7及未来 2年以前  |  2456次阅读
获取元素的计算的样式 2年以前  |  2440次阅读