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);
    }
  }
}
相关推荐
共创splendid--与您携手29 分钟前
AI读取前端项目生成skill.md
前端·人工智能·ai
San813_LDD2 小时前
[C语言]《Dev-C++ 报错解决手册(Day0607 精华版)》
java·前端·javascript
xiaofeichaichai7 小时前
Webpack
前端·webpack·node.js
问心无愧05138 小时前
ctf show web入门111
android·前端·笔记
唐某人丶8 小时前
模型越来越强,我们还需要 Agent 工程吗?—— 从价值重估到 Harness 实践
前端·agent·ai编程
智码看视界8 小时前
现代Web开发基础:全栈工程师的起航点
前端·后端·c5全栈
JS菌8 小时前
手写一个 AI Agent 全栈项目:从沙箱执行到子智能体的完整实现
前端·人工智能·后端
excel10 小时前
HLS TS 文件损坏的元凶:Git 提交与拉取
前端
Aphasia31110 小时前
https连接传输流程
前端·面试