Vue.jsH5代码转换成小程序目标代码的能力

2021-05-01
来源:网络整理

前言:这是一个使用Vue.js开发小型程序的前端框架。使用此框架,开发人员将获得完整的Vue.js开发经验,并同时提供H5和代码重用功能。如果要将H5项目转换为一个小程序,或者要在开发一个小程序之后将其转换为H5,这将是一个非常合适的解决方案。

核心目标是提高开发效率和增强开发经验。使用此框架,开发人员只需要对小程序开发规范有初步的了解,并且熟悉Vue.js的基本语法。该框架提供了完整的Vue.js开发经验。开发人员编写Vue.js代码,将其解析为一个小程序,并确保其正确运行。此外,该框架还通过vue-cli工具为开发人员提供了示例代码。开发人员只需执行一个简单的命令即可获得可运行的项目。

主要功能:

完整的组件开发能力:改进代码

完整的Vue.js开发经验

便捷的Vuex数据管理解决方案:易于构建复杂的应用程序

快速构建机制:定制构建策略vue.js小程序开发,开发阶段

支持使用npm外部依赖项

使用Vue.js命令行工具vue-cli快速初始化项目

将H5代码转换为小程序目标代码的能力

实施原则:

Vue代码

实现原理

将小程序页面写为Vue.js实现

基于Vue.js开发规范实现父子组件关联

迷你程序代码

根据小程序开发规范编写视图层模板

配置生命周期功能,关联数据更新调用

将Vue.js数据映射到小型程序数据模型中

在此基础上,附加了以下机制

Vue.js实例与“迷你程序页面”实例相关联

迷你程序与Vue.js生命周期建立了映射关系,可以在迷你程序生命周期中触发Vue.js生命周期

小程序事件建立了代理机制,并在事件代理功能中触发了相应的Vue.js组件事件响应。

据报道,该框架已在商业项目中得到实践和验证,目前正在美团点评中大规模使用。它基于Vue.js源代码进行二次开发。在增加平台的实现的同时,它保留了跟随Vue.js版本升级的功能。

最佳实践,美团开发的小型程序框架

看着手机微信,我看到美团发布了一个小程序框架,

搜索以进行尝试,并在上进行比较

以下是参考

我们对三个开发框架(微信小程序,WePY和WePY)的主要功能和特征进行了横向比较,以帮助您了解不同框架的重点,并根据业务场景和开发习惯确定技术解决方案。我们总结了一些有关如何更好地用于小型程序开发的最佳实践。

使用vue-cli命令行工具创建一个项目,并使用Vue 2. x语法规范进行开发

避免使用框架不支持的语法功能。某些Vue.js语法无法在小型程序中使用。尝试使用与Vue.js共享的功能

合理设计数据模型,实现对数据更新和操作的细粒度控制,避免性能问题

适当使用基于组件的开发小程序以提高代码重用率

Vue真的很容易使用!

此外,提供了原始微信小程序,WePY和WePY的三种开发方法的比较。有兴趣的人可以参考它:

(请参阅地址)是用于使用Vue.js开发小型程序的前端框架。该框架基于Vue.js的核心,并修改了Vue.js的实现,使其可以在小型程序环境中运行,从而为小型程序的开发引入了一整套Vue.js开发经验。

[最近更新]入门系列教程:

如何正确引用的本机自定义组件

使用开发小程序教程(六)

使用开发小程序教程(五)

使用开发小程序教程(四)

使用开发小程序教程(三)

使用开发小程序教程(二)

使用开发小程序教程(一)

对于一段时间以来一直与微信小程序联系的开发人员或开发团队,我相信他们或多或少会构建和封装一些便于开发的框架/脚手架,尤其是一些已经完成Web的开发人员发展。 Vue等主流开发框架对数据/状态管理,组件化和跨平台的追求更高。

因此,从小程序的出现到现在,一些遵循这些Web开发思想的小程序框架已经陆续出现。更为突出的是WePY,这是由腾讯团队发起的一个小程序组件化开发框架。主要功能如下:

类似Vue的开发风格

支持自定义组件开发

支持引入NPM软件包

支持

支持+功能,例如

支持多种编译器,Less / Sass /,/,Pug

支持多种插件处理,文件压缩,图像压缩,内容替换等。

支持等

小程序细节优化,例如请求队列,事件优化等

这些功能基本上是当今主流Web开发的标准配置。由于我在开发Web应用程序时经常使用Vue,因此在WePY试用期间,我感到非常熟悉并且易于使用。这确实是一个值得使用并且可以有效提高生产率的好框架。

但是,今天的主角不是这种Vue框架WePY。我想谈的是另一个基于Vue的框架:由美团点评团队开发的小程序开发框架。为什么WePY是“类似Vue”的框架,而这又是“基于Vue”的框架?因为WePY以其代码开发风格借用了Vue,与Vue无关。这是从Vue的核心开始的。对代码进行二次开发后形成的框架等效于增强Vue自身的能力并增强开发微信小程序的能力。

使用开发小程序,您将在小程序技术系统的基础上获得这些功能:

完整的组件开发能力:改进代码

完整的Vue.js开发经验

便捷的Vuex数据管理解决方案:易于构建复杂的应用程序

快速构建机制:定制构建策略,开发阶段

支持使用npm外部依赖项

使用Vue.js命令行工具vue-cli快速初始化项目

将H5代码转换为小程序目标代码的能力

其目标是:在将来的最理想状态下,可以在多个终端上直接运行一组代码:WEB,微信小程序,支付宝小程序(在weex的帮助下)。但是,由于产品级别的不同,各端之间存在明显差异,因此不建议这样做。该框架的官员只希望它在开发和调试方面的经验是一致的。

通过官方网站提供的五分钟快速入门教程,您可以发现其开发过程与Vue高度一致,甚至所用的命令行工具仍然是开发Web应用程序时使用的vue-cli:

#创建一个小型程序项目vue init /-my-

在编写模板代码时,通常主要是HTML。例如,当我们编写.vue组件时,我们编写以下代码:

Vuex:{{}}

+-

分享