微信小程序的逻辑开发语言和前端Web开发的Java

这些年来，小程序突然间火起来，用完就不用安装，这样方便的设计吸引了越来越多的用户使用。微信给小程序带来的用户热度和流量入口，也吸引了不少前端开发者的加入。

但是目前端开发者有固有的认知，在开发小程序时，发现很多地方不起作用，如页面元素无法获取，只能通过setData更新页面，还有各种浏览器界面不能正确使用。因此，很多人很难理解，觉得小程序偏袒特立独行的开发者。

现在我们来谈谈开发小程序遇到的一些障碍，正是这些误区让我们走了太多的弯路。

表面上看，微信小程序的逻辑开发语言和前端Web开发的JavaScript语言，以及由Node.js开发的JavaScript写的JavaScript并没有什么不同，只是有质的差别。

JavaScript由ECMAScript和BOM(浏览器对象模型)以及DOM(DocumentObjectModel)组成，因此，您可以通过全局window对象调用不同的浏览器属性和方法，在不同的浏览器中，同一属性和方法的支持形式可能有所不同。

因此，在使用浏览器的属性或方法时，通常会看到这种支持图：

js中的JavaScript也是由ECMAScript、NPM、Native模块组成的，比如你熟悉的NPM软件包管理系统，它可以通过各种扩展包实现某些语言所没有的功能。

而微信的逻辑语言是由ECMAScript、小程序框架、小程序API实现的，没有浏览器BOM和DOM，这就是说，widget无法直接操作节点，同样无法使用类似Jquery的操作类库；同时，微信小程序没有Node.js的NPM和Native模块，因此applet不能载入本机的库，不能使用大部分的NPM包，只能以特定的形式使用。

在这些框架中，小程序是指基于双线程模型体系，包括小程序应用和组件渲染、客户端中转通信、插件与微信扩展功能等形态的构成关系，与浏览器相似的内核，属于微信小程序运行的根基，提供小程序应用各种渲染执行。

appletAPI是指在小程序运行期间，所提供的一系列操作对象的集合，一般来讲，类似于浏览器的窗口对象。本系列操作对象统称为“小程序基本库”，将随着小程序的发展不断添加和完善，您可以选择运行小程序的哪个基础库范围之上。

其次，它是组件，而非元素。

在Web开发中，许多同学带来了一个习惯，即wxml文件中的组成，称为“元素”。这个必须纠正！由于微信小程序中关于结构组成只有“构件”，没有“构件”的说法，这不仅仅是叫法上的区别。

利用微信的小程序，可以用现有的官方组件自己定义组件，通过组合和更改风格来形成新的组件。因此，widget中的“组件”不仅仅是显示，而是一些逻辑和独立的样式，甚至是一个包含许多组件的集合。

此外，为了改善运行时的体验，微信小程序提供了一些系统级本地组件，大多数组件仍然是Web渲染的组件。

下面是一个特殊的例子，input组件通常是Web组件，而在聚焦状态中是本地组件。一些同学在开发小程序时，发现输入框在聚焦时飞出，而不在指定位置，这就是不同模式渲染切换的问题。

在输入框聚焦的时候，从技术上讲，小程序框架会根据输入框的位置直接替换为原始输入框，但是当键盘拉起时，因为应用页面上移会导致不正确的位置，而输入框所处的样式限制了高度，直接overflow解法是取消限制高度，并尽量不固定输入框，或固定输入框的容器组件。

微信和Vue不一样，不要滥用setData！

特别要强调的是，很多同学觉得微信小程序开发与vue非常相似，虽然形似但神似，你要特别注意。其中最大的区别在于，微信小程序是双线程模式，Vue则是前端框架，仍然是单线程模式。

在Vue中，每一个字之间的差别是很大的，可以通过app.name=zirali进行赋值，将name的位置自动更改到页面中。但是使用app.name=zirali并不会给您带来同样的效果，您只能这样使用：

this.setData({name:zirali})

这就是“双线程模型”的概念。有两个线程同时在运行applet时工作：

绘制层(类似于记者招待会)；

逻辑层(决策者专门为新闻发布做决定的逻辑)。

此处的setData主要完成两件事：

像前面的例子一样，在逻辑层改变这个目标属性的值，就是将逻辑层的名称改为zirali；

在微信客户端发起通信，通知到渲染层(记者发布会现场)，将绑定名称值的位置更新为zirali。

每次使用setData时，都会启动通信，而如果您在循环中启动高密度的setData，很可能会导致小程序崩溃。这里有一个极端的例子，您绝对不能把setData当作一个操作中间态：

此外，不要尝试重写setData，相信我，你不能把握，它的底层原理与小程序框架相关联，并可能出现无法预料的崩溃表现。

最后一点，建议不要直接以this.data的形式修改data数据，这将导致两个线程的不同，但是当前的setData已经非常智能，可以自动比对不同数据并直接更新，例如：

使用setData时，您必须注意两件事：

切勿将页面渲染无用的数据也放在其中，夹带无用的内容是浪费资源的表现；

不适用于某些超大型数据，多个大数据叠加可能会超过一次通讯上限，导致故障。

四、Page不是一个代码桶，不要乱扔任何东西！

在刚刚setData的部分中，我们讨论了一个双线程模型，一个逻辑层与渲染层的通信由setData驱动，那么反过来的话，由渲染层与逻辑层的通信如何实现呢？

它要求监听事件驱动，将事件方法绑定到组件中的bind或catch类型，在事件触发时启动通信通知逻辑层执行相应方法，就是这个原则。

您可以清楚地看到，执行监听的事件方法位于page方法的对象中，如果在对象之外，则无法执行，其效果如下：

当实际执行时，这个小程序会把页面运行的所有相关逻辑代码都装入进去，包括被page内方法引用的资源也尽数加载。

因此，在page函数对象中，尽可能地包含与实际业务相关的内容，而不要包含从未使用过的代码。为公共方法，或独立于业务的类方法，可以在page方法之外写入，在访问时直接使用方法名调用，或通过外部JavaScript模块引入的方式引入公共代码。

假如你的小程序太大，有很多页面，页面下也有许多逻辑代码，这样就得注意另一个问题了。当applet启动时，所有页面的JavaScript代码都将合并注入，包括其他未访问的页面和没有使用定制组件，这导致许多未使用的代码被注入到小程序运行环境中，影响到注入时间和内存占用。

如果您的小程序是一个包含许多模块的巨无霸小程序，用户也可以只使用其中一部分，那么可以尝试以下两种做法：

对于独立分包，独立分包属于特殊子包，能够独立地不依赖主包独立地进行装入和运行，在一定程度上可以避免用户所无法访问的页面占用资源的情况。

如分包情况，则资源加载。