播放小程序开发实践|包括直播评论视频

作者：张立涛，视频课程“微信小程序教学”、“基于Koa2构建Node.js实用项目教学”主编，沪江前端架构师

这篇文章是原创的。转载请注明作者和来源

小程序与H5的区别

我们不同，不同，不同。

运行环境运行时

首先，我们可以从官方文件中看到，小程序的运行环境不是浏览器环境：

小程序框架提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架。它还提供了视图层和逻辑层之间的数据传输和事件系统，允许开发人员方便地关注数据和逻辑。

小程序的视图层目前使用WebView作为渲染载体，而逻辑层使用独立的Javascript Core作为运行环境。在架构方面，WebView和Javascript Core是独立的模块，没有直接数据共享的通道。目前，视图层和逻辑层的数据传输实际上是通过双方提供的evaluateJavascript实现的。也就是说，用户传输的数据需要转换成字符串形式进行传输，转换后的数据内容被拼接成JS脚本，然后通过执行JS脚本传输到双方的独立环境。

evaluateJavascript的执行将受到许多方面的影响，并且到达视图层的数据不是实时的。同一进程中的WebViews实际上将共享一个JSVM。如果WebView中的JS线程正在执行渲染或其他逻辑，那么evaluateJavascript脚本的实际执行时间将受到影响。此外，多个WebView将抢占JS VM的执行权限；此外，JS本身的编译和执行时间也是影响数据传输速度的因素。

对于任何语言的操作，所谓的运行时环境都需要一个环境-运行时。浏览器和节点。js可以运行JavaScript，但它们只指定场景中的运行时，这是不同的。小程序的运行环境是微信定制运行时。

你可以做一个小实验，分别在浏览器环境和小程序环境中打开各自的控制台，然后运行以下代码进行20亿次的循环：

变量k

对于（var i=0；i<2000000000；i++）{

k=i

}

在浏览器控制台下运行时，根本无法移动当前页面，因为JS和视图共享同一个线程并相互阻止。

在小程序控制台下运行时，可以激活当前视图。如果有事件绑定，它也会被触发，但事件回调需要在“循环结束”之后。

如果视图层和逻辑层共享同一个线程，那么优点是通信速度快（接近是好的），缺点是它们相互阻塞。例如，浏览器。

如果将视图层和逻辑层分为两个环境，优点是它们不会相互阻塞，缺点是通信成本高（异地恋）。例如，小程序的setData就像写情书！

因此，严格来说，小程序是微信定制的混合开发模式。

在JavaScript的基础上，小程序进行了一些修改，以方便小程序的开发。

添加App和Page方法来注册程序和页面。[添加组件]

添加getApp和getCurrentPages方法以分别获取App实例和当前页面堆栈。

提供丰富的API，如微信用户数据、扫描、支付和其他微信特定功能。[调用本地组件：Cordova、ReactNative、Weex等]

每个页面都有自己的范围并提供模块化。

由于框架不在浏览器中运行，因此某些JavaScript功能无法在web中使用，例如文档和窗口。[小程序的JsCore环境]

开发人员编写的所有代码最终将打包成JavaScript，并在小程序启动时运行，直到小程序被销毁。与ServiceWorker类似，逻辑层也称为应用服务。

与传统的HTML相比，WXML更像是一种模板化的标记语言

从实践经验来看，我们可以从小程序的角度看到Java FreeMarker框架、Velocity和Smart的影子。

小程序视图支持以下内容

数据绑定｛｛｝｝

列表呈现wx:用于

条件判断wx：如果

样板

事件bindtap

引用导入包括

可以在视图中应用的脚本语言wxs

...

Java FreeMarker也支持上述功能。

数据绑定$｛｝

列表呈现列表指令

指令的条件判断

模板FTL