双线程模型
双线程模型引入的原因:
网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中。
真实运行环境
传统Webview和小程序的异同
与传统Web开发上的异同
1)标签名字有点不一样
用wxml和wxss表示页面而不是html和css,之所以有了这样的替换,是因为腾讯
把开发HTML 的时候,经常会用到的标签(div
, p
, span...)进行了组合封装
变成了小
程序里面的WXML
标签(view
, button
, text
等等)。封装之后不仅能提高我们的开发效率,还能使得腾讯上不同小程序风格上大体一直,不至于过于灵活,差异过大。
2)
多了一些 wx:if
这样的属性以及 {{ }} 这样的表达式
在网页的一般开发流程中,我们通常会通过 JS
操作 DOM
(对应 HTML
的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS
会记录一些状态到 JS
变量里边,同时通过 DOM
API 操控 DOM
的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS
直接操控 DOM
,JS
只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
小程序的框架也是用到了这个思路,如果你需要把一个 Hello World
的字符串显示在界面上。
WXML 是这么写 :
<text>{{msg}}</text>
JS 只需要管理状态即可:
this.setData({ msg: "Hello World" })
通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if
/else
, for
等控制能力,在小程序里边,这些控制能力都用 wx:
开头的属性来表达。
更详细的文档可以参考 WXML
参考自: