百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

uni-app开发H5端和原生H5开发怎么选择

liuian 2024-12-22 19:35 24 浏览

前些时候刚开发了原生的H5电商系统,从控制器、页面、页面样式、jQuery等开始写,花费了不少的时间很精力。后面开发移动端APP和小程序,使用现在比较流行的uniapp混合开发模式,开始学习需要些时间,可是越写越喜欢,越写越简单。随着APP、小程序功能的增加,再也无法再原生H5版本上重新写一次了。直接uniapp生成,调兼容性,非常的方便。下面分享使用uniapp开发H5的一些感受吧。

现在APP、微信小程序、头条小程序等流行起来了,H5商城渐渐没落了,除了公众号和一些用不上APP且微信受限等因素不得不选择H5外,使用场景还真的比较少了。但有时候又不得不有,比较鸡肋。uniapp开发H5有些天然优势,用上uniapp还真没有太大必要去写原生的H5版了。

Uni版开发的主要优势

  • 多端功能同步。 一套源码生成多端,iOS、Android、H5、微信小程序、头条小程序等用户端,实现多端功能同步。当然也需要测试不同场景的兼容性问题,比如说支付、登录、分享等接口在各端的兼容和支持情况,以及一些链接配置和导航条等显示的兼容性问题。
  • 双向数据绑定,异步更新。Vue采用MVVM 模式,数据双向绑定,减少了 DOM 操作,彻底放弃了传统前端开发使用jquery操作文档的模式,将更多精力放在数据和业务逻辑上。
  • 标签简化,布局更加容易。Uni开发采用view标签取代了html中传统的div、p、span等标签,化繁为简。采用flex布局取代了css中的定位和浮动,对浏览器的兼容性更加友好。
  • 丰富的组件选择。Uniapp有较多的原生组件,例如对话框、地区选择、日期选择等原生组件,调用时传参给组件即可,非常方便。也可以自己制作组件,多页面重复应用。同时DCloud平台也有非常多优秀的开发者,分享各种优秀的组件。组件的使用使得开发变得简单方便。
  • 采用最新的Vue.js库。Vue.js是非常轻巧、高性能的库,拥有非常容易上手的 API,响应和运行非常快速。

最后看下项目,不同的开发模式,样式差不多。uniapp开发的H5花的时间和精力确是少了太多。

uni版H5商城:https://h5.shopwind.net

原生版H5商城:http://m.test.shopwind.net


相关推荐

vue是什么东西(vue是干什么的)

首先看看官方网站是怎么解释的,如下:Vue(读作/vju/,类似于view)是一个用于构建用户界面的渐进式框架。与其他单体框架不同,Vue从一开始就被设计为可逐步采用的。核心库仅专注于视图层,易于...

超赞 vue2/3 可视化打印设计VuePluginPrint

今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...

使用VuePress2.X构建个人知识博客,域名部署到GitHub Pages中

使用VuePress2.X构建个人知识博客,并且用个人域名部署到GitHubPages中什么是VuePressVuePress是一个以Markdown为中心的静态网站生成器。你可以使用Mar...

尤雨溪新品Vite的魔力,详解(尤雨溪新品vite的魔力,详解解析)

上篇《尤雨溪是个恶魔,Vite三天10更》谈到了Webpack这一系列打包工具出现的原因。这些工具的出现是为了解决ESModules模块系统本身的环境兼容问题、以及零散的模块文件导致的...

什么是VUE?vue有什么作用?(vue的主要用途)

什么是vue?Vue.js是一套构建用户界面的渐进式框架,Vue采用自下向上增量开发的设计,其核心库只关注视图层,易于上手,同时vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复...

10个Vue开发技巧「实践」(vue开发需要掌握哪些知识)

作者:WahFung转发链接:https://juejin.im/post/5e8a9b1ae51d45470720bdfa路由参数解耦一般在组件内使用路由参数,大多数人会这样做:exportdef...

刚搭好vuecli结果官网建议升级vite,于是就升级下

从vue-cli迁移到Vite进行迁移的主要原因是速度。Vite的开发服务器速度很快。因为它使用原生浏览器支持JavaScript模块,所以服务器启动时间是即时的。该方法还意味着无论应用程...

无所不能,将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...

【开源】基于 Vue 和 Gin 开发的前后端分离的开源框架

项目介绍Gin-vue-admin是一个基于vue和gin开发的全栈前后端分离的开发基础平台,旨在快速搭建中小型项目。拥有jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能...

Firefox正针对Vue.js进行优化,下版本响应速度将“显著提升”

IT之家9月7日消息,据Mozilla官方博客发文显示,Firefox浏览器正针对Vue.js进行优化,此前FireFox浏览器在面向Vue3时遇到了一些性能问题。▲图源...

vue:生命周期钩子函数及顺序(vue3.0生命周期函数)

一、vue的钩子相关顺序Vue实例有一个完整的生命周期,在newVue()后,会初始化数据,如下://初始化的入口,各种初始化工作initMixin(Vue);//数据绑定的核心方法,包括常用...

使用 Pinia ORM 管理 Vue 中的状态

转载说明:原创不易,未经授权,谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术,但随着应用程序复杂性的增加,处理状态可能变得更具挑战性。这就是为什么...

搭建Trae+Vue3的AI开发环境(vue ide 开发工具)

从2024年2025年,不断的有各种AI工具会在自媒体中火起来,号称各种效率王炸,而在AI是否会替代打工人的话题中,程序员又首当其冲。作为一个后端开发,这篇文章基于Trae工具,来创建和运行一个简单的...

如何在Vue3中使用Nuxt进行服务端渲染开发?

服务端渲染SSR(Server-SideRendering)是一种在服务器端生成网页内容的技术,这种实现方式与传统的客户端渲染CSR(Client-SideRendering)有所不同。在SSR中...

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。先看这个表格:脚手架vue-clicreate-vue构建项目vite打包代码we...