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);
    }
  }
}