微信小程序和Web端同构的解决方案，值得收藏！
发表时间：2023-11-29 16:29:36
文章来源：炫佑科技
浏览次数：120
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信小程序和Web端同构的解决方案，值得收藏！
小程序作为网络的必备支撑组件，已经成为开发不可避免的任务。 多终端、多形态的开发无疑会增加工作量，而且吃力不讨好。 Kbone是致力于微信小程序与Web同构的解决方案。 使用一套代码同时开发微信小程序和网页客户端。
基本结构
首先我们看一个基本的kbone项目的目录结构（这里的todo是基于Vue的例子，kbone还有React、Omi等版本微信小程序和Web端同构的解决方案，值得收藏！，详情请前往kbone）。
因为kbone是为了解决小程序和Web端之间的问题vue微信小程序开发，所以每个目录下都会有两份配置（小程序和Web端各一份）
入口
无论是小程序还是网页，都需要入口文件。 src/index目录下，main.js是Web端的主入口，main.mp.js是小程序端的主入口。
当然，Web端会比小程序多一个入口页面，即index.html（位于根目录）。
下面两段代码分别是小程序入口和网页入口的代码。 可以看到小程序的入口代码被封装在一个函数中（这里修复即可）。 创建app节点会比web端多一个操作。 其他基本一样。
todo.vue
从上面的入口图可以看出，在源码目录中，除了入口文件分离之前，页面文件都是共享的。 这里直接使用Vue的写法就可以了，不需要做特殊的适配。
配置
写完代码之后，我们如何运行项目呢？ 这时候配置就派上用场了。
Web端配置就是普通的Vue配置。 小程序端配置和Web端配置唯一的区别是需要引入mp--插件来将Vue组件转换为小程序代码。
构建代码
接下来，我们需要构建代码，使代码能够在各自的运行环境中运行。 构建完成后，生产代码将位于 dist 目录中。
小程序的构建会比Web端的构建多一步，就是npm构建。
进入dist/mp目录，执行npm安装依赖。 使用开发工具将dist/mp目录导入为小程序项目后，点击工具栏下方的Build npm即可预览效果。
影响
*后我们看一下todo的效果。 kbone初体验，完成~
待办事项代码可以在 kbone/ 处获取。
具体计划的实施
接下来我们来讨论一下具体解决方案的实现。
社区Web端基于Vue实现，使用Vue-、Vuex等插件。 Vue大家一定都很熟悉了。 它是市场上非常流行的Web框架，并提供组件化等功能。 其原理大致如下：
Vue 模板可以被认为是附加了一些特殊语法的 HTML 片段。 一般来说，一个Vue模板对应一个组件。 在构建阶段，它被编译成调用Dom接口的JS函数。 调用这个JS函数会创建一个与该组件对应的组件。 然后将 Dom 树片段呈现给浏览器。 小程序支持运行JS，但是这里使用的Dom接口以及渲染到浏览器的功能在小程序中是不具备的，所以Web社区的代码不能直接移植到小程序中。 原因是小程序为了安全和性能考虑，采用了双线程架构。 运行用户JS代码的逻辑层是纯粹的，没有任何浏览器相关的实现。 这里我们就要想办法把网页代码转换成小程序代码。 。
业界常见做法：将Vue模板直接转换为小程序WXML模板
那么问题来了，如何将Vue代码转换为小程序代码呢？ 我们先看一下业界常见的做法：将Vue模板直接转换为小程序WXML模板。
使用方法相当于放弃了在浏览器中构建Dom树的过程，而是直接让小程序编译模板来创建小程序的小程序树，然后渲染到小程序页面中。
一般来说，这种方法对于普通场景来说已经足够了，但是处理一些比较复杂的场景就有些困难了，比如社区中的一个简单例子：社区帖子详情显示富文本内容，点击内容中的图片进行预览。
这主要是因为Vue模板和WXML模板的语法并不直接等价，Vue的功能设计不能与小程序的设计等同，这自然会导致Vue一些功能的丢失。 比如Vue中的v-html指令、ref获取Dom节点、过滤器等都不能使用。 当然，不仅是Vue自身的特性，一些原本依赖Dom/Bom接口的Vue插件也无法使用，比如Vue-等，而这些对社区的依赖程度很高。 如果不对社区代码进行大量修改，则无法使用该解决方案。 的。
如果这个方法不行，还有其他方法吗？
另一种思路：做适配层
答案是肯定的，这里我们要换个思路来解决这个问题。 回到*初的点，我们无法将Web代码移植到小程序中，因为小程序没有Dom接口，那么我们是否可以想办法做一个适配层并消除这种差异呢？
一旦有了想法，就必须实施它。 模仿Dom界面并不难。 其实*后已经有人做了类似的事情，比如jsDom库的实现，它可以让我们在没有真正的浏览器环境的情况下也可以依赖Dom界面。 用于测试的Web端代码。
Vue模仿调用Dom接口，创建模仿的Dom树。 根据前面提到的小程序架构，用户的JS代码是在逻辑层执行的，这意味着我们创建的Dom树也存在于逻辑层的内存中。 接下来要解决的问题就是如何将这棵Dom树渲染到小程序页面中。
这里需要简单介绍一下小程序的渲染原理：小程序的双线程架构，逻辑层会执行用户的JS代码，生成一组数据，发送给视图层； 视图层接收到数据后，结合用户的WXML模板创建组件树，然后小程序渲染组件树。 这里的组件树和Dom树很相似，只不过它是由官方内置组件或者自定义组件拼接而成，而不是Dom节点。 我们可以将假Dom树映射到小程序的组件树吗？
小程序组件树是基于WXML模板创建的，模仿Dom树结构不稳定。 我们无法提前预测它会生成什么样的结构，也无法提前准备一个可以描述任何Dom树的WXML模板，除非直接将Vue模板转换为WXML模板，但这又回到了前面的问题。
小程序组件树中有两类组件：内置组件和自定义组件。 内置组件是官方提供的视频、地图等组件，而自定义组件是用户可以使用现有组件组装的组件。 组件，用它可以做什么？
用Web端的概念来简单解释一下，内置组件就像div、span等HTML标签，而自定义组件就像Web中的Vue组件。 Vue 组件可以组装 HTML 标签和其他 Vue 组件。 自定义组件也是如此，主要用于功能模块的抽象、封装和复用。 然而，自定义组件有一个很棒的功能。 它们支持自引用，这意味着它们可以引用自身进行组装。
自定义组件可以引用自身，因此我们可以利用这个特性递归创建组件，然后创建组件树：
比如上面的例子中，我们封装了一个-dom组件，它也使用了-dom组件来渲染子组件。 那么我们只要执行并传递数据就可以创建一个子组件了。 子组件本身也是一个 -dom 组件。 它还可以执行这个逻辑来创建自己的子组件，从而实现组件的递归创建。 只要我们有了完整的Dom树结构，就可以创建出相应的组件树。
这里递归的终止条件是特定节点、文本节点或子节点为空。 然后创建完组件树后，将Dom节点绑定到自定义组件实例上，以供后续Dom更新和操作。
我们总结为两个模块：仿接口和自定义组件。 由于该解决方案通过提供适配器来模拟Web环境，因此用户代码不需要进行任何神奇的更改，并且大多数功能都可以继续使用而不被删除，例如vue-，. 操作等
本来Web端代码是基于Vue构建的，也使用了很多插件/库，比如Vue-、Vuex、-it等，而且还支持服务端渲染。 但无论Web端如何实现，底层都是调整浏览器的界面，所以我们不对用户层代码做任何调整，只是替换浏览器层。
整个构建过程是基于的，使用Kbone构建的小程序代码也是基于的。 只需要在原有的Web端构建过程中实现一个插件，将原有的Web端代码构建到小程序端时添加Kbone和一些小程序即可。 只是小程序相关的代码。
