探索Hybrid App与微信小程序的优缺点：跨平台开发与用户体验的完美结合
应用
应用程序（混合模式移动应用程序）是指Web-App和-app之间的应用程序，该应用具有“应用程序的良好用户交互经验的优势”和“ Web应用程序跨平台开发的优势”。
客户提供控件，并可以使用H5技术在应用程序中开发页面。如果需要呼叫系统功能的功能需要由客户实现，则两者建立桥梁通信以实现交互。
微信迷你节目的优点和缺点介绍“触手可及，您可以使用它并去”
提供了自己的视图层说明语言WXML和WXSS以及基于逻辑层的框架，并在视图层和逻辑层之间提供数据传输和事件系统，从而使开发人员可以专注于数据和逻辑。
框架的核心是一个反应性数据绑定系统，使数据与视图保持同步非常简单。修改数据时，您只需要修改逻辑层中的数据，并且视图层将相应地更新。
技术发展历史
迷你程序不是一个凭空出现的概念。当微信逐渐成为移动网络的重要入口时，微信会与JS API相关。
2015年初，微信发布了一组完整的Web开发工具包，称为JS-SDK，该工具包为摄影，录音，语音识别，QR码，地图，付款，付款，共享，优惠券等开放了数十个API。
JS-SDK是上一个包装，也是新功能的发布。它已向所有开发人员开放，而不是内部开放，并在短时间内引起了极大的关注。从数据监视的角度来看，大多数移动网页在微信中传播使用相关界面。
JS-SDK解决了移动Web功能不足的问题。通过公开微信接口，Web开发人员可以具有更多功能。但是，除了更多功能外，JS-SDK模型还不能解决使用移动网页时遇到的问题。不良经验的问题。
当用户访问网页时，将在浏览器开始显示之前会有一个白屏过程。在移动方面，由于设备性能和网络速度，白屏将更加明显。因此，设计了JS-SDK的增强版本，该版本具有一个称为“微信Web资源离线存储”的重要功能。
微信Web资源离线存储是基于的Web开发人员的Web加速解决方案。
通过使用微信离线存储，Web开发人员可以使用微信提供的资源存储功能直接从微信中加载Web资源，而无需将其从服务器中拉出，从而减少网页加载时间并为微信用户提供更好的Web浏览。经验。每个官方帐户下的所有Web应用程序总共可以缓存高达500万资源。
在内部测试中，我们发现离线存储可以解决一些问题，但是对于某些复杂页面，仍然存在白屏问题，例如加载大量CSS或文件的页面。除了白屏幕外，影响网络体验的问题是缺乏操作反馈，这主要反映在两个方面：页面切换的刚度和点击的滞后。
微信的面孔问题是如何设计一个更好的系统，以便所有开发人员都可以在微信中获得更好的体验。以前的JS-SDK无法处理此问题，并且需要一个全新的系统来解决它。它需要使所有开发人员都能做到：
而且有很多缺点：
这是迷你程序的起源。
小程序与普通网络开发之间的区别
网页开发渲染线程和脚本线程是相互排斥的，这就是为什么长期运行的脚本可能会导致页面变得无响应的原因。在小程序中，两者分开并以不同的线程运行。
Web开发人员可以使用各种浏览器暴露的DOM API选择和操作DOM。如上所述，小程序的逻辑层和渲染层是分开的。逻辑层在应用程序中运行，并且没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。这种差异导致一些在前端开发中非常熟悉的库，例如等等，无法在小程序中运行。
同时，环境也不同，因此某些NPM软件包不能在小程序中运行。
发展方面的开发方案
Web开发人员
各种浏览器
PC版本
即，QQ浏览器，等等。
移动终端
，以及各种类型的iOS和
迷你计划
两个主要的操作系统iOS和微信客户以及Mini计划开发人员辅助开发工具
迷你程序中的三个主要操作环境也不同。
运行环境逻辑层渲染层
ios
安卓
V8
自定义内核
迷你程序开发人员工具
NWJ
当Web开发人员开发网页时，他们只需要使用浏览器并使用一些辅助工具或编辑器即可。迷你计划的开发是不同的。它需要经过申请迷你程序帐户，安装迷你程序开发人员工具，配置项目等的过程。
渲染层和逻辑层
迷你程序的运行环境分为渲染层和逻辑层。 WXML模板和WXSS样式在渲染层中工作，JS脚本在逻辑层中工作。
小程序的渲染层和逻辑层分别由两个线程管理：渲染层的接口；逻辑层使用线程运行JS脚本。一个小程序具有多个接口，因此渲染层中有多个线程。这两个线程之间的通信将通过微信客户端中继（以下简称也用于引用微信客户端），并且逻辑层还将通过转发发送网络请求，mini程序的通信模型如下所示。 。
需要特别注意呼叫方法和时间安排
发展环境
MINI程序提供了基于NWJS的IDE开发工具，该工具可以模拟代码预览效果，但实际上并不是真实的机器环境，因此您会发现开发环境与开发环境与真实的机器预览。而且由于程序本身的包装尺寸限制，因此很小，因此不可能直接触发真实的机器调试，并且需要特殊处理才能将尺寸降低到小于2M。
加载过程
在打开Mini程序之前，微信客户端将在本地下载整个Mini Code软件包。
然后，您可以通过app.json的字段知道当前小程序的所有页面路径：
{ "pages":[ "pages/logs/logs" ] }
因此，微信客户端为主页加载代码，并通过Mini程序的一些基本机制，可以渲染主页。
Mini程序启动后，将执行App.js中定义的APP实例的回调：
App({ onLaunch: function () { // 小程序启动之后 触发 } })
整个迷你程序只有一个应用程序实例，所有页面都共享。
您可以观察到，在 /日志 /日志下实际上有4种类型的文件。微信客户端将首先基于logs.json配置生成接口。您可以在此JSON文件中的顶部定义颜色和文本。然后，客户端将加载页面的WXML结构和WXSS样式。最后，客户将加载logs.s。您可以看到logs.js的一般内容是：
Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 } })
页面是一个页面构造函数，生成页面。生成页面时，Mini程序框架将渲染数据和.wxml一起渲染最终结构，因此您可以看到您看到的迷你程序。
渲染接口后，页面实例将接收回调，您可以在此回调中处理逻辑。
开发疼痛点
依赖管理是混乱的，工程过程是向后的，下一个支持是不完美的，命名惯例是不一致的。看来这些问题现在具有各种官方或非官方的解决方案。
最常见的开发模型是使用一套完整的开发框架。它们之间的主要区别是DSL，类似VUE或语法样。
在微信中，主要制造商发布了自己的迷你计划平台，并且已经出现了对多终端自适应框架的需求（塔罗，Uni-App等）
因此，开发技术选择的主要考虑因素是：DSL和多末端适应
.x
市场上的第一个符合语法兼容的多终端小程序框架是自发展的。它还支持使用 /vue /nev等框架的开发。
“一旦运行”
目前（.x）正式支持的转换平台如下：
设计思想
必须满足以下要求：
从较高的抽象角度（语法树）的良好和严格规范的限制下，每个人都编写类似的代码。
换句话说，对于不打开或开源的微信微型程序，我们可以首先将代码分析为抽象的语法树，生成基于此树的Mini程序支持的模板代码，然后创建一个Mini 处理事件。它与生命周期和迷你程序框架兼容，然后在运行时框架中运行业务代码以完成Mini计划方面的改编。
对于已经支持的终端，例如Web甚至将来的VR，我们只需要包含一层组件库即可进行一些样式支持。鉴于Mini计划的当前流行和我们团队的业务重点，组件库的API基于Mini程序，其他组件库的API将与Mini程序的组件一致。
建筑学
塔罗当前的体系结构主要分为：编译时间和运行时间。
塔罗编译时间
使用 - 将塔罗代码解析为抽象语法树，然后使用 - 在抽象语法树上执行一系列修改和转换操作，并最终使用 - 生成相应的目标代码。
汇编过程也是如此，该过程主要包括三个阶段
进行解析过程，其中执行词汇，句法分析和语义分析以生成标准的虚拟语法树（AST）转换过程，并在AST上执行定义的操作，该操作是在配置文件中定义的。在一个步骤中执行并更改AST生成过程，并从上一步中转换的AST生成目标代码字符串。
如果您不知道AST是什么，则可以使用此网站来尝试
通过省略整个汇编过程获得的结果代码如下：
+ - async {this.props.counter.num} 走你
+ - async {{counter.num}} 走你
由于JSX的丰富自由度与字符串模板的自由度不相同，因此它当时只能支持约80％的写作方法，其余的不支持的写作方法被插件替换为插件以提醒用户修改它们。
在开源过程中，塔罗支持的JSX写作方法已不断改进，努力使开发体验更接近JSX，主要包括以下语法支持：
芋头运行时
我们可以比较编译的代码，并发现在编译的代码中，核心方法消失了。同时，并将其添加到代码中，这是芋头运行时的核心。
// 编译前 import Taro, { Component } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.scss' export default class Index extends Component { config = { navigationBarTitleText: '首页' } componentDidMount () { } render () { return ( Hello world! ) } }
// 编译后 import {BaseComponent, createComponent} from '@tarojs/taro-weapp' class Index extends BaseComponent { // ... _createDate(){ //process state and props } } export default createComponent(Index)
近似UML（统一建模语言）图如下所示，它主要替换并重写一些核心方法：以下语法与编译后的代码实际运行时无关。
主要功能是调用（）构建页面；连接事件，生命周期等；执行差异数据并调用方法以更新数据。
跨端兼容
仅根据语法规范转换代码是不够的。由于不同终端的独特本地能力或组成部分，跨末端开发必须具有一些在开发过程中需要兼容的代码。为了在最大程度上弥补不同终端之间的差异，塔罗标准已根据其语法和功能制定了统一标准，以在不同目的的情况下实现组件库和API。同时，必须为不同的目的编写相应的运行时框架，初始化等。由于原始设计源是迷你程序，因此我们决定直接采用迷你程序标准，并让其他终端与Mini计划保持一致。
因为我们有编译操作，所以在编写代码时，我们只需要介绍标准组件库 @/和运行时框架 @/ taro即可。编译代码后，它将成为相应端的库。
例如，为了提高发展的便利性，我们增加了对芋头的支持。我们的方法是，在迷你程序方面，我们将 @/库作为迷你程序的辅助库实施，并将其用作具有和 - 一致的API的基准库。编写代码时，所有引用均为 @/。汇编后，将其替换为H5侧的神经（神经的辅助库）和 - 在RN侧。这在塔罗上获得了多末端的支持。
迷你程序组件
在开源的开头，由于各种原因，塔罗的微信小程序是使用小程序标签组成的。使用标签的特征，将组件JS文件汇编为JS + WXML模板，在模板中的父组件（页面）中，通过剪接标签引用了子组件的WXML模板，以实现组件的目的。
实践证明了模板解决方案是一个失败的组件解决方案，而在塔罗开源的早期，这些错误主要来自于此。由于该解决方案将JS逻辑与模板分开，因此有必要手动确保JS和模板中的数据一致。在这种情况下，在循环组件渲染和组件的多个嵌套的情况下，很难确保正确渲染并正确交付组件。很大，实施成本也很高。此外，由于迷你程序标签的缺陷，无法实现某些功能（例如包含子元素的自定义组件等）。
因此，在艰苦的探索和实践之后，我们将迷你程序的本地组件作为塔罗的迷你程序组件化解决方案。通过一些处理，我们绕过了迷你计划组件的许多局限性，并有助于芋头的稳定性。性建立坚实的基础，并带来以下好处：
功能更新1.11.21.3技术选择和权衡
总结
芋头的当前特征是：
也有许多缺点：
.0（截至2018.8.10起，维护已停止）
这是一个使用vue.js开发迷你程序的前端框架。目前，它支持微信迷你节目，百度智能迷你节目， Mini计划和 Mini计划。该框架基于vue.js，并且已修改了运行时框架和代码编译器实现，以便它可以在迷你程序环境中运行，从而将VUE.JS开发经验引入Mini 开发。
vue.js 版本从 /vue@2.4.1分叉，保留VUE功能，并增加了对平台的支持。
因此，本章中与VUE相关的知识是指VUE2
框架原则
VUE代码
迷你程序代码
在此基础上，添加了以下机制
总结起来，这种机制非常简单，但其实现非常复杂。在揭示特定实施之前，读者可能会有以下问题：
为了同时维护vue.js和mini程序，我是否需要编写两个版本的代码实现？
首先，它天生是为了提高效率，并提供了自动生成迷你程序代码的能力。 Mini程序代码是基于vue.js代码构建的，无需同时开发两组代码。
小程序负责显示视图层。 vue.js的视图层仍然需要吗？如果没有，该怎么办？
vue.js视图层渲染是通过方法完成的，并且在内存中维持虚拟DOM。无需使用vue.js完成视图层渲染，因此我们修改了禁用视图层渲染的方法。
如何打开生命周期以及如何实现数据同步和更新？
生命周期关联：生命周期和数据同步是框架的灵魂。 vue.js和mini程序的数据彼此隔离，每个程序都有不同的更新机制。从生命周期和事件回调功能开始，当vue.js触发数据更新时，可以实现数据同步。 Mini程序通过视图层向用户展示，并通过事件响应用户交互。 vue.js在后台维护数据更改和逻辑。可以看出，数据更新源自MINI程序，并由Vue.js进行处理。更改vue.js数据后，将其同步到迷你程序。为了实现数据同步，修改了vue.js实现，并在vue.js的生命周期中添加了更新迷你程序数据的逻辑。
事件代理机制：通过用户交互触发的数据更新是通过事件代理机制完成的。在vue.js代码中，事件响应函数对应于组件，vue.js自动维护上下文环境。但是，MINI程序中没有类似的机制，并且由于VUE.JS执行环境保持了实时虚拟DOM，它完全与Mini程序的视图层相对应，因此我们认为，在Mini上触发事件后程序组件节点，只要您在虚拟DOM上找到相应的节点并触发相应的事件，就可以完成。另一方面，如果vue.js事件响应触发数据更新，则将自动触发其生命周期功能更新，并且该更新将在此功能上同步。也实现了迷你程序数据和数据同步。
施工过程
施工过程是整个项目的核心方面之一。通过我们熟悉的内容，我们完成了转换为WXML，样式转换优化以及其他几种代码的拼接，压缩和混淆等操作，并最终使在微信系列环境中运行成为可能。中间。
生命周期
除了VUE2本身的生命周期外，它还与小程序生命周期兼容。
应用部分：
页部分：
建筑学
实现还分为：编译时间和运行时间。
MP目录是在VUE源代码文件夹下添加的，并且（编译时间）和（运行时）支持在其中实现。
编译时间
与塔罗（Taro）将JSX转换为迷你程序模板相比，VUE模板被转换。两者之间的相似性可以简化许多工作程序。
运行时VUE2示意图
VUE文件主要分为三个部分：
Vue-AST将分析模板部分以生成渲染函数。
脚本部分将实例化vue并执行数据的响应处理。每个修改都会触发该功能。
该函数将生成虚拟DOM，每次将新的和旧的虚拟DOM进行比较，并且在操作实际DOM更新之前将获得最终的修改结果。
总体示意图
其中 - 功能是将VUE2预编译到一个函数中，以避免运行时编译开销和CSP限制。仅在编写具有特定需求的构建工具时才需要。
由于迷你程序与VUE有不同的原则，因此VUE的DOM操作阶段被直接删除并用Mini程序的本机实现取代。
当Vue实例化时，也将实例化迷你程序。在每个VUE过程之后，将直接调用$（）以获取在页面实例上安装的数据，然后将通过方法更新视图。
总结
它是一半编译，一半运行，主要反映在
因此，双方都属于一个分离的状态。 Vue负责数据处理，并且该小程序负责呈现视图。实际上，它方便开发，但并未优化小程序的体验。
（废弃的）设计概念非侵入性设计Wepy 2在迷你程序上运行，封装和优化了迷你程序的原始功能，并且不会对原始Mini程序框架有任何更改或影响。与本机代码兼容的本机代码可以兼容，也就是说，有些页面是本地的，有些页面很糟糕。同时，可以在没有任何修改的情况下引用现有的本生成小程序组件。与以前相比，基于MINI计划的基于Mini计划的基于组件的开发本机组件的生产本机组件的性能大大提高。因此，Wepy 2是根据迷你程序的本机组件完全实现的，并且不支持Mini <1.6.3的版本。数据绑定是基于VUE实现的。数据绑定是基于VUE实现的，同时为其定制了Mini程序的优化。更好的可扩展性：核心库提供，使用和其他用于开发和扩展的方法，CLI编译工具提供了更强大的插入机制，以便开发人员可以入侵任何汇编阶段以执行个性化的编译。转换过程
Wepy继承了WXML的基本模板语法，并支持大多数VUE模板语法。
转换后HTML模板标签映射表标签标签
IMG
跨度
其他
看法
事件处理
迷你程序的本机事件系统使用绑定和其他关键字进行事件监视。在Wepy中，事件遵循VUE的风格，使用V-ON或 @操作员进行事件监视。同时，Wepy中将有一个统一的活动调度员接管本地事件。大致如下所示：
在汇编过程中，Wepy将找到所有听力事件，并为其分配事件ID。同时，将事件代码（可以是方法或简单代码段）注入JS代码。然后，当事件调度程序收到本机事件时，它将通过事件ID分发给相应的事件逻辑。
这样做的主要好处是：
更可控制。用户可以使用相关的挂钩功能来处理全局用户事件。 （典型场景：在页面上的所有按钮中添加单击报告功能）更高的灵活性。与只能使用函数名称的本机方法相比，也可以使用简单的代码段。 （典型场景： @tap =“ num ++”）。x
这更多的是关于基础体系结构的创新，提高可扩展性，稳定性，可维护性以及降低发展和学习成本。
CLI
Taro 2.0的CLI将变得非常轻巧。它只会区分不同平台等的编译平台，过程编译输入参数，然后调用相应平台的编译器以执行代码编译操作。原始的大量AST语法操作将被转换为我们。
其他
编译配置调整
异步编程调整
主要汇编过程挂钩
编译并添加
编译并添加
塔罗RN依赖性升级
.x跨框架：神经，vue 2，vue 3，
更快的运行速度
运行时性能主要分为两个部分，一个是更新性能，另一个是初始化性能。
在更新性能方面，旧版本的芋头将对开发人员的数据进行完整差异，并最终根据Mini程序的路径返回更新的数据。接下来，在塔罗（Taro）中，将差异工作移交给开发人员使用的框架（/nerv/vue），并且根据塔罗（Taro）的路径将框架差异后的数据最小化和更新。因此，开发人员可以根据所使用的框架的功能执行更微妙的性能优化。
初始化性能是芋头的疼痛点。本机或编译框架的初始数据可直接用于渲染，但是Taro Next将在初始化期间将框架的渲染数据转换为小程序的渲染数据，这增加了另一个开销。
为了解决此问题，塔罗是受服务器端渲染的启发。在Taro CLI中，页面初始化状态直接渲染到无状态WXML中，并且在运行框架和业务逻辑之前执行渲染过程。我们称此技术为（），并且传递页面的初始渲染速度通常与本机相同甚至更快。
更快的构建速度和-AP支持
作为一个编译的框架，旧版本的芋头将执行大量的AST操作，这会大大减慢芋头CLI的汇编速度。接下来，在塔罗（Taro）中，任何开发人员代码的AST都不会运行，因此汇编速度得到了极大的提高。
由于取消了AST操作，Taro Next也很容易实现-Amap支持。这是对发展经验的巨大改进：
其他
跨终端：H5，微信，支付宝，百度，拜拜...迷你计划
微信系列/vue
渲染HTML字符串
CSS-In-JS
（）
打开插件系统
开放架构
与塔罗1和2时代的架构不同，新的体系结构主要基于运行时。我们都知道，在开发Web时，渲染页面主要依赖于 - 操作DOM树，并依赖于瑜伽布局引擎，但是我们可以通过将它们链接在一起，主要是通过抽象DOM技术实现的，并且可以实现。统一是通过DOM实现的。尽管DOM和BOM API并未在Mini程序中直接暴露，但我们可以在Mini程序中类似于模拟DOM和BOM API的实现的想法，从而实现了直接运行到Mini的目的程序环境。这是新建筑的起源。
目的是以插件的形式扩展Taro的终端平台支持功能：
塔罗最初选择重新编译的主要原因是为了绩效考虑。毕竟，在相同的条件下，编译过程中完成的工作越多，意味着在运行时完成的工作减少，并且性能会更好。此外，重新编译还确保了编译后芋头代码的可读性。但是从长远来看，计算机硬件的性能变得越来越多余。如果我们牺牲一些可容忍的表现，以换取更大的灵活性和更好的适应性，那么我们认为这是值得的。
塔罗实现了一组有效且精简的DOM/BOM API运行时渲染代码@//
芋头运行时。在小程序侧，将框架（DSL）渲染机制连接到小程序渲染机构，然后将小程序路由和生命周期连接到框架的相应生命周期。将小程序生命周期规范连接到H5/RN侧的框架生命周期。
无论该框架是什么，它最终都将使用 DOM/BOM API（例如
从理论上讲，神经/可以直接运行DOM/ BOM注射后。但这有点特别，因为-dom包含大量浏览器兼容的类代码，导致一个软件包太大。我们不需要代码的这一部分，因此我们需要进行一些自定义和优化。
+实现
您可以看到它大致分为三层
所以塔罗实施 @/
基于 - 连接到 @/的DOM实例的小程序的专用渲染器，该渲染器与-dom的小程序版本相同，而暴露的API也与-dom一致。
两个最重要的实施功能
到目前为止，运行逻辑的代码已经完成，其余的是基于组件的页面和动态渲染。
VUE实施
抛开实施的BOM/DOM API，VUE的差异很小。它仅需要在运行时进行一些处理，例如生命周期对齐等，而其他部分基本上是相同的。
事件
第一个芋头下一个事件的实施如下：
In the of the mini , all are to call the ev , such as:,, etc. the at , bind it to the eh , all mini the .() , the , and a call that to the (). the
Taro Next its own on Taro DOM. One of the of this is that Taro can and of the it.
更新
it is Vue or Vue, Taro DOM will be , such as:, etc.
the Taro DOM Tree, will also call . This can the node path and by each DOM , such as: {.[0].cn.[4].: "1" }, and to the view the .
The of the here is at the DOM . Only the DOM that will be . with the data- , it will be more and .
New
The new the :
性能优化
Taro Next's new , a lot of was on .
with the , Taro Next has more by the red part, such as: the in size by the of /Vue, loss, the and of the Taro DOM Tree, and the and of DOM data. 。
What we can do is only the part, is: the and of Taro DOM Tree, and the and of DOM data.
日期
Taro Next's are at the DOM , is more than data- , data are , and not all data will DOM .
, Taro the path of Taro DOM Tree when , also .
The is: in , when add and data, Taro Next's is even than the one.
3.1
开放架构
mini
are and Taro
Hugs 17, 4
3.2
-map
- , the 0.64
APIs and
APIs and are on
3.3
the use of H5 tags
Mini the use of
Fix the of flex
3.4 beta
use for (an - that the same API, and the size is only 5k)
Vue 3 API of life
3.5
to
and of - of
of mini
- -Taro
Why we use it to - The of Taro