如果您在微信小程序中运行h5页面，是不是要使用网络视图组件来执行此操作？确实，使用Web视图组件可以满足运行h5页面的要求，但是Web视图组件在使用方面仍然存在一些限制：不支持个人和海外类型的小程序，不支持全屏显示，并且页面和小程序不方便，无法直接调用许多小程序接口，等等。

搭建微信小程序h5版有哪些方法

那么，还有其他方法吗？首先是答案，是的。

操作环境

h5页面在网络环境中运行，而applet本身也是基于Web的，那么为什么h5不能直接在applet中运行？原因在于小程序的独特操作环境。

以一个小程序的页面为例。通常，一个小程序的页面至少包含三个文件：wxss文件，wxml文件和js文件。 wxml文件和wxss文件构成页面的视图层，而js文件属于页面的逻辑层。在小应用程序中小程序，视图层和逻辑层在不同的线程中执行。小程序中所有页面的逻辑层都在js线程中运行，而视图层在另一个视图线程中。通常页面与视图线程相对应。为了控制性能，不允许用户不受控制地启动视图线程，因此页面堆栈的数量受到限制（当前最多允许打开十个页面）。

视图线程中有一个类似于浏览器的环境，但是只有页面的视图层在其上运行，并且页面的呈现完全基于另一个js线程传输的数据。 js线程是纯js环境。没有您要调整的dom / bom接口，例如document.getElementById，location.href等。您只能在这里执行js代码，调用正式接口，并且页面的逻辑层在这样的线程中运行。因此出现了问题。页面将呈现的外观完全基于初始模板和数据。如果要调整界面来修改页面结构，就没有门〜

计划制定

applet的操作环境是如此特殊，以至于其开发模型也大不相同，但是仍然有很多人希望统一开发过程并在每一端运行一个代码。那么在如此大的限制下我们该怎么办？

当前市场上有一些基于反应或态度的工具。它们要求您使用react或vue来编写页面，并构建工具来编译可在每个环境上运行的目标代码，因为react和vue基于。基于数据驱动的基于组件的框架限制开发人员直接调用dom / Bom接口在一定程度上可以简化代码的编译和转换。

PS：由于applet本身的局限性，react和vue的一小部分功能不能完全兼容，但是大多数实现都是可以的。

但这不是我想要的，因为尽管实现得很漂亮，但是它们仍然有相当大的开发限制。您必须选择使用vue，react和其他框架之一。我想要的是一个更本地的，较低级别的统一解决方案。除了vue和react，您甚至可以在小型程序中使用jQuery。

如果目标太大，那将是一团糟，至少您必须先有一个主意。

回到前面提到的地方，小程序的逻辑层运行在纯js线程中，而没有做。 m / bom界面只能运行页面逻辑层的代码。然后，我们找到了一种在逻辑层中构建dom树并模拟所有基本dom / bom接口的方法。

乍一看似乎还可以，但是这里隐藏着一个问题：如何将逻辑层中dom树中的更改转换为数据并更新到视图层？

这里很重要：小程序提供自定义组件并支持递归引用。换句话说，我们可以将h5中的dom节点（例如p，span和ul）转换为自定义组件。逻辑层中的每个dom节点对应于视图层中的自定义组件实例。节点已更新，我们发现相应的自定义组件实例将立即更新