如何使用Mpvue开发微信小程序

小程序一年多来一直对前端开发有影响力。移动应用程序有小程序跟踪。经过一年多的发展和沉淀，小程序能力不断发布，产品形态日趋成熟。它已发展成为一个独立的开发技术体系，与H5和本土形成了强大的趋势。但与此同时，小公司的沈阳软件区域还不够活跃，沈阳小程序技术系统和解决方案相对较弱。因此，开发人员友好的框架可以处理复杂的应用程序场景，并且与现有的前端技术很好地配合，肯定会给小型沈阳软件公司带来显着的好处。 mpvue就是这样一个小程序开发框架。 Mpvue什么是mpvue是解决小程序工程和大规模开发的前端框架。她巧妙地将流行的前端框架Vue.js集成到小程序中，使开发人员能够在小程序开发过程中充分体验Vue.js的功能。此外，mpvue还通过快速入门项目为开发人员提供了完整的Vue.js技术解决方案和基础架构。 mpvue来自哪里？ Mpvue是Meituan审核的开源技术项目。它目前在Meituan审查的所有开源项目中排名第一，由专门的团队维护。在完成mpvue之前，我们通过了早期开发的痛苦小程序：我们无法重用现有的Web前端代码，我们不能更好地支持组件开发，我们不能支持npm外部依赖，而且学习成本较高。随着小程序业务的发展，问题的规模效应越来越大，所需的技术解决方案也越来越清晰：前端技术堆栈无缝过度扩展，代码的两端重复使用，提供了组件化适应大规模开发能力的能力，以及自动化建设，以提高开发效率。 mpvue最终解决方案的mpvue开发阶段经历了三个阶段。阶段1：我们计划实现一个代码转换工具，可以快速将HTML转换为小程序代码，以便重复使用前端代码。但是，工具能力的限制是有限的，效率的提高仅在现有代码的转换场景中。第二阶段：我们基于工程思想，专注于提高效率和设计代码组件化机制。选择很简单，基于现有的技术堆栈，参考Vue.js，编码实现了版本小程序的单个文件组格式。我们解决了一系列问题，如组件命名空间，数据同步，但无法支持复杂的应用场景，并且改进有限。对更多Vue.js语法功能的支持将使开发工作量极大且不可持续。第三阶段：该计划从根本上解决了第二阶段的剩余问题，并实现了对Vue.js语法的完全支持。经过多次探索，最终通过引入和转换Vue.js运行时完成了它。经过不断的优化和业务的反复实践，最终验证了能力和效果。 APP软件

Mpvue主要特性首先，mpvue直接支持Vue.js语法，“支持类Vue.js语法”之间存在本质区别。当前框架支持Vue.js的语法超过90％。因此，Vue.js框架包含一系列技术解决方案，我们可以将其转换为mpvue的整个基础架构，这是mpvue的主要功能和优势。其次是mpvue的组件开发功能。已经开发出小程序的学生应该有一些了解。原始公共组件提取需要分成三个文件，分别在不同的门户中引用。使用起来非常不方便，而mpvue使其简单易用。构建集成，沈阳小程序帧定位是一个简单的逻辑视图框架。一开始，对复杂场景的考虑不够。一旦应用程序规模扩大，业务就变得复杂，自动构建和集成需要手动完成大量工作。 Mpvue直接提供这组功能。上述功能不能通过小程序本机框架获得，但可以通过使用mpvue直接获得。 Mpvue开源后续mpvue在执行多个内部项目后于3月8日正式开源。美国团队评论了技术公众号，并介绍了介绍整个mpvue的来龙去脉的文章。在此期间，他还在社区中受到了很多关注，试验和实践，一些文章被存放在一些技术网站或博客上。到目前为止，mpvue已经在GitHub上启动了8000多个，超过324个问题，259个分辨率和80％的分辨率。在npm社区，有26个相关解决方案，其中20多个由社区提供;另外，我们组织了五个微信交流小组讨论日常技术问题。 Mpvue的使用场景每个人都会关心mpvue场景的使用，我们总结一下，主要分为两类：使用小程序原生或第三方框架，使用集成的mpvue进行一定阶段后的增量开发。从零开始，直接使用mpvue进行新开发。对于这些场景，mpvue提供了一个特定的解决方案。从头开始使用mpvue并直接从官方文档构建mpvue项目环境。对于使用mpvue的增量开发，我们提供了mpvuesimple轻量级构建工具，可以为某些页面单独构建或集成到现有方案中。 Mpvue设计思想小程序定位是一个简单的逻辑视图层框架，框架将代码分为两部分：逻辑和视图。视图部分代码是样式和模板，逻辑部分是js代码。在运行时小程序，所有代码都加载一次然后解析。每个页面都由一个单独的Webview窗口呈现，所有逻辑都在js引擎中运行。 js引擎负责与窗口通信并维护数据模型和响应事件。对于mpvue，要做的是让Vue.js语法规范的代码在JS引擎中运行。具体实现是介绍mpvue SDK。在小程序运行时环境中，有小程序对象和vue对象。 Mpvue通过事件代理，生命周期打开和数据同步实现两个对象之间的通信。 mpvue的主要工作体现在三个方面：开发阶段，通过命令行工具快速构建项目;代码构建阶段负责将代码转换为小程序目标代码;代码执行阶段负责通过维护Vue.js对象来管理小程序对象。 使用Vue.js语法来支持Vue.js运行时的想法并不难想象。编写演示来验证其可行性很难，但最困难的部分是具体实现。我们认为，mpvue的难点和核心竞争力主要体现在以下三个方面：构建阶段的代码编译能力，即Vue模板视图层代码被编译成小程序版本。我们的设计是：Vue.js维护一套完整的逻辑视图层代码;另外，为小程序构建了一组视图层代码，用于生成小程序视图。这里的困难在于构建的小程序模板代码需要具有一些特定的功能，这将在下面详细讨论。运行时双实例关联和生命周期交互操作，小程序页面实例和Vue实例需要事先在Vue.js运行时中建立绑定。具体的实现细节是：首先创建一个Vue对象，在Vue对象的范围内调用小程序 Page函数来初始化页面，同时将所有信息挂载到Vue实例，在Pages生命周期中设置挂钩调用Vue生命周期函数，从Vue示例获取之间的所有数据。另外，我们在设计mpvue时有一个指导原则，那就是：没有规范的创建，没有引入新的学习。 Vue.js语法中的所有内容都得到最大程度的支持，我们尽量以零成本从Vue.js切换到小程序。 mpvue最佳实践mpvue侧重于解决沈阳小程序开发的效率问题，并通过框架机制和语法规范增强代码可维护性。它还为小程序和H5的代码复用提供操作空间。熟悉前端开发的学生知道小程序和H5有平台差异，有些无法对齐，解决两端差异没有灵丹妙药。 我们有许多类似的问题：mpvue编写的代码如何在浏览器中运行。 mpvue如何解决小程序和H5的跨平台应用程序。对于这些问题，我们提出以下方案：您可以尽可能使用小程序语法功能，或者使用小程序组件，因为无需遵循它将其转换为H5组件。消除了使用与浏览器相关的功能，这部分代码无法在小程序中运行。最小化使用未推荐的语法功能，小程序环境性能不佳，例如$ ref，filter等。对于考虑到小程序和H5的mpvue场景：使用与平台无关的语法进行公共构建，这部分功能两端没有显着差异。该平台在很大程度上依赖于代码来单独实现实现。通过抽象适配层来屏蔽平台差异，如果有幻灯片，映射，小程序有一个本机组件，但H5需要单独实现，并且不能由框架编译。想法可以类似于本机反应。如何快速掌握mpvue的功能并将其用于日常开发：阅读官方文档以了解如何使用mpvue。了解小程序和H5的功能差异，并区分适合H5场景和小程序场景的功能。阅读mpvue项目问题以避免常见问题并了解解决方案。对于小程序的长期构建，不断提取通用组件或解决方案并将其重用于更多场景。