从原生切换到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试图中的父子包含关系，比以前写下层的>符号，或级联一起写更直观一目了然，例如一个顶部标题栏：

// 顶部标题栏
.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);
    }
  }
}

11.UniApp 使用 Vite 作为构建工具，跟java的springboot开发的maven引用类似，你需要在package.json中添加相关的引用包申明，然后执行npm install就会下载安装依赖包。打包工具（Vite）会去处理：代码压缩、优化，只打包实际使用的部分，最终生成到 dist 目录的 JS 文件中。具体的业务逻辑实现中，我们的使用方式如下

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

这里有一点值得注意，如果需要在运行时动态加载，即需要一个可以在运行时通过 URL 访问的 JS 文件，就不能直接采用package.json添加申明和逻辑代码中 import的方式
12.跟C++开发QT类似，跨平台技术框架都有条件编译，UniApp的条件编译如下：

// #ifdef H5
import QRCode from 'qrcodejs'  // 这行代码在非 H5 平台会被删除
// #endif

13.本地缓存可以用UniApp 的 uni.setStorageSync API和uni.getStorageSync，它跨平台，微信小程序是小程序本地存储，H5是localStorage，App (iOS/Android) 是原生本地存储，支付宝小程序 是小程序本地存储

// 保存（onUnload 时触发）
uni.setStorageSync('import_draft', {
  text: this.rawText,           // 原始粘贴文本
  records: this.draftRecords,   // 解析后的记录数组
  timestamp: Date.now()         // 时间戳
})

// 加载（onLoad 时触发）
const draft = uni.getStorageSync('import_draft')

14.如果要刷新上一个页面的话，可以用页面栈刷新，而不是页面回调。也就是可以通过页面栈，拿到指定页面，调用该页面的方法。

  // 通知上一页刷新数据
  const pages = getCurrentPages() //获取当前页面栈
  const prevPage = pages[pages.length - 2]  //获取 list 页面，找到上一页
  if (prevPage && prevPage.$vm && prevPage.$vm.loadData) {
    prevPage.$vm.loadData()  //调用上一页刷新方法，要确保该方法存在
  }