UniApp开发体验感受总结

从原生切换到UniApp开发,其实不难,整个过程算是挺顺利,偶尔遇到一些小问题也能通过AI快速定位解决,这也难怪不少APP和小程序采用了UniApp开发,很适合小屏设备的切换开发。下面就过程中的一些知识点做一些记录,方便回顾查找。

UniApp作为移动端跨平台技术,是基于H5进行开发跨屏台,也就是底层还是基于浏览器的渲染技术,那么H5用到的JavaScript、css3等还是存在的,这也是其使用VUE框架进行项目构建的原因。

1.相比Flutter,其性能应该是略有不及,但够用,不适合大型游戏等要求高性能的场景,有也是像小程序这种益智小游戏,所以要性能就不要考虑UniApp进行开发。它特备适合增删改查的应用场景,能够支持发布多种小程序平台和移动操作系统的移动应用

2.不太适合对硬件交互,或者说原生接口调用多的场景,例如安卓和苹果等原生系统等基础API的调用,虽说可以通过添加适配引用,间接通过JavaScript来进行交互调用,但通常这意味着开发者要很熟悉原生开发,这会导致开发者觉得不如直接用原生开发

3.开发工具有Hbuilder、VS code,我这里用的后者,前者很久前也用过,不过VS code的高扩展性更适合现在的开发场景,毕竟不少AI编辑器都是基于其进行二次开发的。VS code安装后记得安装相关uniapp的插件,这个直接问AI就可以照做,不会有啥问题

4.项目结构跟其他移动端开发区别不大,很像微信小程序和安卓等程序的结构,这也是为啥能通过具体的终端发布指令进行不同平台发布的原因。例如运行npm run build:mp-weixin可以发布微信小程序,发布后的项目代码是有进行代码压缩的,需要用微信开发者工具打开,才能真正推送发布到微信平台,也就是说不能完全依赖于一个开发工具实现所有流程的发布

5.代码上,一个**.vue是一个功能页面,看得出来主要采用了vue语法**,规范的页面包含template在页面上方作为视图模板,中间是script作为脚本逻辑核心,下方style作为样式处理css。在实现核心的业务需求及功能上,重点关注script部分,另外两部分通过AI实现基本偏差不大

6.不用慢慢一步步学才开始构建第一个项目,UniApp的起步难度不大,可以在具体项目上边做边学,这区别于其他原生开发,当然这句话前提是你会H5相关的JavaScript、CSS。例如你不需要了解安卓的四大组件后才开始动手构建APP功能流程,不用学完VUE才能写逻辑

7.既然是前端项目,依赖node环境也就能理解,所以node环境必须要有,根据自己需要的版本进行安装,当然你可以安装多个版本进行切换,具体可参考这篇文章https://blog.csdn.net/u014650759/article/details/160326024

8.可以让AI搭建一个基本简单的项目框架,不用像其他项目,自己从新建项目到添加基本的依赖从头开始,我也没在VS code里面找到创建项目的入口,原因是VS code本身也更依赖于用命令创建项目,你需要安装相关插件,通过控制台命令调用插件创建项目。创建后执行npm install,作用是添加引用依赖。

9.遵从mvvm的开发模式,也就是数据驱动。这点做过安卓或者WPF开发的应该能感同身受,快速切换过来。template中通过{{绑定对象}}来实现绑定,不同于WPF其可以绑定方法及对象,事件并非绑定而是直接通过@click等事件触发

10.CSS方面,采用了内嵌来表示父子包含关系,感觉很不错,其对应了view试图中的父子包含关系,比以前写下层的>符号,或级联一起写更直观一目了然,例如一个顶部标题栏:

css 复制代码
// 顶部标题栏
.header-bar {
  background: linear-gradient(135deg, #9988f1 0%, #a78bfa 100%);
  padding: 40rpx 30rpx 30rpx;

  .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .header-title {
      font-size: 32rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}
相关推荐
名字还没想好☜2 小时前
Next.js App Router 数据获取:fetch 缓存、revalidate 与 dynamic 一次讲清
前端
成都渲染101云渲染66666 小时前
如何在3ds Max中实现更快、更高质量的渲染
前端·javascript·人工智能
闲猫8 小时前
Spring AI 对接Deepseek ChatModel 聊天对话
java·前端·spring
自信的未来10 小时前
JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
java·前端·json
全栈前端老曹10 小时前
【MongoDB】安全与权限管理 —— 用户认证、角色权限、SSL 加密
前端·javascript·数据库·安全·mongodb·nosql·ssl
zhangxingchao11 小时前
AI大模型核心八:从 Agent Skill、长文档 RAG 到知识库更新与训练策略
前端·人工智能·后端
zhangxingchao12 小时前
AI大模型核心七:从 Workflow、RAG、记忆治理到幂等性
前端·人工智能·后端
gyx_这个杀手不太冷静12 小时前
Agent开发进阶指南(第 1 章):AI Agent 到底是什么?
前端·agent·ai编程
小小小小宇13 小时前
模型相关知识
前端
小小小小宇13 小时前
模型相关知识二
前端