开启左侧

微信小程序跟vue什么关系,vue开发的小程序好处在哪里?

[复制链接]
在线会员 所谓的承诺つ 发表于 2023-2-8 09:53:33 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
许多人道vue跟微疑女伶 href="https://www.taojin168.com/cloud/" target="_blank">小法式类似度很下,语法一致,这用vue去写微疑小法式前端,他的益处正在那里

精彩评论5

avatar
在线会员 8ajhK4E 发表于 2023-2-8 09:54:09 | 显示全部楼层
主流的跨端框架(如:React Native,Flutter,Taro,mpvue等)都能开发小程序,也有很多人实践过了。
前端框架的使用,技术上来说是为了跨端开发。现在有一种小程序运行时技术(如:FinClip),能够将各种框架开发出来的小程序运行在自有App上。
FinClip能干啥?
1、让App拥有运行小程序的能力
谈起小程序开发,大部分开发想到的都是,如何把小程序上架到微信、百度、支付宝这些大的流量平台,但关注小程序平台核心技术的却寥寥无几。
如果你想在自己的 App 中打造与微信小程序类似的生态,小程序容器技术是无法绕过的门槛,而普通公司显然是没有这个研发成本和人力资源去投入小程序运行沙箱与 SDK 的研发。
而 FinClip 小程序开放平台,可以为所有企业提供小程序容器技术。只需要几行代码就够将小程序运行环境集成到 App,从而让App具备小程序运行的能力。
2、模块化开发,真正实现敏捷迭代
借助小程序容器,可以把App中的业务模块都拆成单独的小程序,各个业务模块之间互相不影响,均可独立更新与发布。即使某个小程序出了问题也不会影响到宿主App和其他的小程序。有效规避“APP发版周期长”“无法再现快速修BUG等弊端”,能够极大的优化我们的工作效率。
以上两点个人觉得算是FinClip的核心能力了,当然仅仅是这些能力还不足以称之为一个强大的技术平台,它的强大之处还体现在其多系框架、多系统支持与开发管理上:
1、FinClip 小程序 SDK 不仅支持纯 wxml 微信小程序运行,还支持包括 React Native、Flutter、 Taro、kbone 等第三方框架集成的小程序;
2、FinClip 同时提供 Android、iOS、Flutter、React Native、Windows 等多种环境下的小程序 SDK;
3、拥有完善的管理平台,可以协助开发者更好的对小程开发、测试、上下架、App 集成与联调等流程进行管理;

微信小程序跟vue什么关系,vue开发的小程序好处在哪里?
FinClip还支持手机(包括flutter、react native前端框架编译出来的APP)以外的多种终端,包括 Linux、Windows、MacOS、麒麟等操作系统。这意味着,PC 端、车载设备、智能电视都能使用小程序了,实现了小程序的“一次开发,到处运行”,同时触达众多流量平台,而不仅仅局限于微信生态。
FinClip凭借插件化、嵌入式、轻量而灵活的产品特点及行业领先优势已经赋能银行、证券、政企、电商、航空、园区、零售等多个行业,在无界开放银行、数字券商、监管与合规科技、电子政务、信创等方面形成较有特色的创新应用案例。现在登陆官网点击咨询即可获得行业解决方案!
除私有化版本外,FinClip 现已推出SAAS版本,无需部署即可使用全部功能,每月有10000次免费发布调用,平台自带小程序流量统计,可根据实际用量灵活拓展。帮助企业以最低的价格实现商业化运行。赶紧登录 FinClip 官网注册使用吧!手动指引:https://www.finclip.com
回复

使用道具 举报

avatar
在线会员 8xL 发表于 2023-2-8 09:55:01 | 显示全部楼层
Vue、 React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star。
目前,不管是 BAT 大厂,还是创业公司,Vue 都有广泛的应用,对于任何一个前端工程师来说,Vue 都是一门非常值得我们学习的前端框架。但在国内小程序成为移动开发的破局者之后,Vue的名字又经常和小程序关联在了一起,下面我们就一同探究两者之间的关系。
一、首先认识下Vue

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
上述是Vue官方网站给出解释,对于大部分用户读起来还是非常抽象和晦涩难懂的,看完之后可能还是不懂这个框架到底是用来做什么的,什么是“渐进式框架”?什么是“自底向上增量开发”?什么是“视图层”?什么是“单文件组件”?什么是“复杂的单页应用?”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥?

微信小程序跟vue什么关系,vue开发的小程序好处在哪里?

1.Vue.js到底是什么?
想必大家上网浏览新闻都是用APP或者网页,Vue.js就是一个用于搭建类似网页的表单项繁多、内容需要根据用户的操作进行修改的网页版应用。
2.什么是单页应用
单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用,比如一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多,而且页面中的内容需要根据用户的操作动态变化。
3.什么叫视图层
现在我们把一个网页应用抽象一下,那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。
4.响应式的数据绑定
这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。至于是如何响应的,大家可以先把下面这段代码随便粘贴到一个扩展名为html的文件然后用浏览器打开,随便在文本框里面输入一些文字,观察一下页面变化。
5.组件化开发
做单页应用,页面交互和结构十分复杂,一个页面上就有许许多多的模块需要编写,而且往往一个模块的代码量和工作量就非常庞大,如果还按照原先的方法来开发,那么会累死人。而且遇到以后的产品需求变更,修改起来也非常麻烦,生怕动了其中一个div之后,其他div跟着雪崩,整个页面全部乱套,或者由于JavaScript的事件冒泡机制,导致修改一些内层的DOM事件处理函数之后,出现各种莫名其妙的诡异BUG。
在面向对象编程中,我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中,我们也可以把一些大功能拆分成许多函数,然后分配给不同的人来开发。
在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。
Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。
二、Vue和小程序的关系

首先需要说明的一点Vue和小程序开发是没有直接关系的。
但是受到Vue的影响,以及Vue众多的开发者,不少组织将小程序二次开发,以类似Vue语法的形式进行小程序开发(最后通过自己的工具转成原生小程序的语法),比如美团的mpVue(Vue.js in mini program)。好处在于降低了Vue开发者学习小程序开发的成本,以及优化了很多小程序的不足点,例如小程序不能使用Npm,不能使用CSS预处理器,原生是callback语法等。


微信小程序跟vue什么关系,vue开发的小程序好处在哪里?

例如mpVue是一个使用 Vue.js 开发小程序的前端框架,框架基于Vue.js核心,Mpvue修改了Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。使用Mpvue开发小程序,将在小程序技术体系的基础上获取到一些额外能力:
彻底的组件化开发能力:提高代码复用性
完整的Vue.js开发体验
方便的Vuex数据管理方案:方便构建复杂应用
快捷的webpack构建机制:自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用Vue.js命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力
如果需要深入学习了解使用mpVue开发小程序可以参考官方文档:http://mpvue.com/mpvue/#_1

三、如何让小程序发挥更大的价值


在理解如何基于Vue开发小程序后,那也可以顺着了解如何更好的发挥小程序价值,这就不得不提到 Hybrid 模式渐渐开始流行, Native + 小程序 的架构模式成为趋势,它解决了传统App带来的迭代不敏捷、代码量堆积、多平台维护等问题,同时又有远超 H5 的体验。
这里要推荐到的是已经在市场上比较成熟的小程序容器技术-FinClip,通过集成SDK便可让自己的APP快速拥有小程序运行能力。
此外,FinClip的视图层与逻辑层分离也带来了许多好处:
1、方便多个小程序页面之间的数据共享和交互。在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验;
2、Service和View的分离和并行实现可以防止JS执行影响或减慢页面渲染,这有助于提高渲染性能;
3、因为JS在Service层执行,所以JS里面操作的DOM将不会对View层产生影响,所以小程序不能操作DOM结构的,这也使得小程序的性能比传统的H5更好。


微信小程序跟vue什么关系,vue开发的小程序好处在哪里?

其中还有一点很值得推荐, 兼容微信小程序开发规范 。
也就是说,原来通过Vue开发的微信小程序也可以在不改代码的情况下,顺带手把这个小程序放在自己的 APP 里。同时,提供后台管理页面,可以统一管理自有和外部开发上架的小程序,以及对收集到的小程序数据进行分析。
回复

使用道具 举报

avatar
在线会员 WAbj 发表于 2023-2-8 09:55:28 | 显示全部楼层
Vue、 React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star。
目前,不管是 BAT 大厂,还是创业公司,Vue 都有广泛的应用,对于任何一个前端工程师来说,Vue 都是一门非常值得我们学习的前端框架。
但在国内小程序成为移动开发的破局者之后,Vue的名字又经常和小程序关联在了一起,下面我们就一同探究两者之间的关系。
一、首先认识下Vue

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
上述是Vue官方网站给出解释,对于大部分用户读起来还是非常抽象和晦涩难懂的,看完之后可能还是不懂这个框架到底是用来做什么的,什么是“渐进式框架”?什么是“自底向上增量开发”?什么是“视图层”?什么是“单文件组件”?什么是“复杂的单页应用?”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥?

微信小程序跟vue什么关系,vue开发的小程序好处在哪里?
1.Vue.js到底是什么?
想必大家上网浏览新闻都是用APP或者网页,Vue.js就是一个用于搭建类似网页的表单项繁多、内容需要根据用户的操作进行修改的网页版应用。
2.什么事单页应用

单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用,比如一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多,而且页面中的内容需要根据用户的操作动态变化。
3.什么叫视图层

现在我们把一个网页应用抽象一下,那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层

微信小程序跟vue什么关系,vue开发的小程序好处在哪里?
4.响应式的数据绑定

这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。至于是如何响应的,大家可以先把下面这段代码随便粘贴到一个扩展名为html的文件然后用浏览器打开,随便在文本框里面输入一些文字,观察一下页面变化。
5.组件化开发

做单页应用,页面交互和结构十分复杂,一个页面上就有许许多多的模块需要编写,而且往往一个模块的代码量和工作量就非常庞大,如果还按照原先的方法来开发,那么会累死人。而且遇到以后的产品需求变更,修改起来也非常麻烦,生怕动了其中一个div之后,其他div跟着雪崩,整个页面全部乱套,或者由于JavaScript的事件冒泡机制,导致修改一些内层的DOM事件处理函数之后,出现各种莫名其妙的诡异BUG。
在面向对象编程中,我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中,我们也可以把一些大功能拆分成许多函数,然后分配给不同的人来开发。
在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。
Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。
二、Vue和小程序的关系

首先需要说明的一点Vue和小程序开发是没有直接关系的。
但是受到Vue越来越大的影响,不少组织将小程序二次开发,出现了以类似Vue语法的形式进行小程序开发,比如美团的mpVue(Vue.js in mini program)。好处是降低了Vue开发者学习小程序开发的成本,以及优化了很多小程序的不足点,例如小程序不能使用Npm,不能使用CSS预处理器等。

微信小程序跟vue什么关系,vue开发的小程序好处在哪里?
例如mpVue是一个使用 Vue.js 开发小程序的前端框架,框架基于Vue.js核心,Mpvue修改了Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。使用Mpvue开发小程序,将在小程序技术体系的基础上获取到一些额外能力:

  • 彻底的组件化开发能力:提高代码复用性
  • 完整的Vue.js开发体验
  • 方便的Vuex数据管理方案:方便构建复杂应用
  • 快捷的webpack构建机制:自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • 使用Vue.js命令行工具 vue-cli 快速初始化项目
  • H5 代码转换编译成小程序目标代码的能力
如果需要深入学习了解使用mpVue开发小程序可以参考官方文档:http://mpvue.com/mpvue/#_1
三、如何让小程序发挥更大的价值

在理解如何基于Vue开发小程序后,那也可以顺着了解如何更好的发挥小程序价值,这就不得不提到 Hybrid 模式渐渐开始流行, Native + 小程序 的架构模式成为趋势,它解决了传统App带来的迭代不敏捷、代码量堆积、多平台维护等问题,同时又有远超 H5 的体验。
这里要推荐到的是已经在市场上比较成熟的小程序容器技术-FinClip,通过集成SDK便可让自己的APP快速拥有小程序运行能力。
此外,FinClip 的视图层与逻辑层分离也带来了许多好处:
1、方便多个小程序页面之间的数据共享和交互。在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验;
2、Service和View的分离和并行实现可以防止JS执行影响或减慢页面渲染,这有助于提高渲染性能
3、因为JS在Service层执行,所以JS里面操作的DOM将不会对View层产生影响,所以小程序不能操作DOM结构的,这也使得小程序的性能比传统的H5更好

微信小程序跟vue什么关系,vue开发的小程序好处在哪里?
其中还有一点很值得推荐, 兼容微信小程序开发规范
也就是说,原来通过Vue开发的微信小程序也可以在不改代码的情况下,顺带手把这个小程序放在自己的 APP 里。同时,提供后台管理页面,可以统一管理自有和外部开发上架的小程序,以及对收集到的小程序数据进行分析。
回复

使用道具 举报

avatar
在线会员 CQPs1KQn 发表于 2023-2-8 09:56:04 | 显示全部楼层
相似度确实很高,这两天在看微信小程序的文档,里面的写法和Vue极其相似,如果学过vue的话上手应该会很快,各种写法也会很好理解。
不过区别也是有的,比如
小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等,在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同,所以一些 NPM 的包在小程序中也是无法运行的。
再比如
通过使用微信离线存储,Web 开发者可借助微信提供的资源存储能力,直接从微信本地加载 Web 资源而不需要再从服务端拉取,从而减少网页加载时间,为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。
说到底,小程序是一种特殊的web,特殊在运行环境,不是浏览器环境,也不是node环境。
回复

使用道具 举报

avatar
在线会员 10kvK8u 发表于 2023-2-8 09:56:44 | 显示全部楼层
vue是vue,小程序是小程序
小程序是自己实现的MVVM架构,是运行于微信内部的程序,依托微信内核使得它可以调用原生API的能力,从语法上来说,原生的小程序更类似react
vue是一个渐进的web开发框架,可运行于PC 移动端 以及混合开发 weex等。本身只是纯粹的JS框架,并没有运行原生的能力
但是受到vue的影响,以及vue众多的开发者,不少组织将小程序二次开发,以类似vue语法的形式进行小程序开发(最后通过自己的工具转成原生小程序的语法),比如美团的mpvue,腾讯的wepy。好处在于降低了vue开发者学习小程序开发的成本,以及优化了很多小程序的不足点(不能使用npm,不能使用css预处理器,原生是callback语法等等)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 qq_login

本版积分规则

发布主题
阅读排行更多+
用专业创造成效
400-778-7781
周一至周五 9:00-18:00
意见反馈:server@mailiao.group
紧急联系:181-67184787
ftqrcode

扫一扫关注我们

Powered by 职贝云数A新零售门户 X3.5© 2004-2025 职贝云数 Inc.( 蜀ICP备2024104722号 )