独立开发者系列（39）——uniapp开发的前置

1.背景介绍: uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台

2.项目目录 ，了解规范的项目目录有利于快速上手 对代码进行改动和二次开发，可以看到我们测试项目首先就是pages里面进行开发改动

┌─uniCloud              云空间目录，
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放uni_module 
├─platforms             存放各平台专用页面的目录，
├─nativeplugins         App原生语言插件 
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 
|  └─ios                iOS原生资源目录 
├─hybrid                App端存放本地html文件的目录，
├─wxcomponents          存放小程序组件的目录，
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，
├─AndroidManifest.xml   Android原生应用清单文件 
├─Info.plist            iOS原生应用配置文件 
└─uni.scss              内置的常用样式变量

3.启动页的改动 也就是我们直接运行run的结果到达的第一个页面

pages.json 里面配置项目 第一个就是我们APP/H5/小程序启动到达的页面

大部分的项目里面都是几十上千个route的管理 是需要维护的 。如果需要首先调试开发的页面，放入第一个页面即可。

也可以跟着路由的后缀到达对应调试的页面。

4.页面的相关信息导入 当前view的核心组件框架: uview-ui (开发框架)

import uView from ‘uview-ui’
Vue.use(uView);

开发框架可以大幅度提升开发速度，uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)

减少大量重复的事情

读懂入口文件main.js的解释: 也就是uniapp会自动匹配当前项目是vue2还是vue3

**// #ifndef VUE3 到 // #endif 之间的部分（假设为 Vue 2 的逻辑）**：
  - `import Vue from 'vue'`：从 'vue' 库导入 Vue 构造函数，用于 Vue 2 的应用创建。
  - `import App from './App'`：从当前目录下的 './App' 文件导入 `App` 模块。
  - `Vue.config.productionTip = false`：关闭 Vue 2 在生产环境中的提示信息。
  - `App.mpType = 'app'`：为 `App` 对象设置一个属性 `mpType` 并赋值为 `'app'`。
  - `const app = new Vue({...App })`：使用 Vue 2 的构造函数创建一个新的 Vue 实例，并将 `App` 的属性扩展到这个实例中。
  - `app.$mount()`：将创建的 Vue 实例挂载到 DOM 上，使其开始渲染和生效。

**// #ifdef VUE3 到 // #endif 之间的部分（Vue 3 的逻辑）**：
  - `import { createSSRApp } from 'vue'`：从 'vue' 库导入 `createSSRApp` 函数，用于创建 Vue 3 的服务端渲染应用。
  - `import App from './App.vue'`：从当前目录下的 './App.vue' 文件导入 `App` 组件。
  - `export function createApp() {... }`：定义一个名为 `createApp` 的导出函数。在函数内部，使用 `createSSRApp(App)` 创建一个 Vue 3 的应用实例，并将其返回。

这段代码通过条件编译的方式，根据是否定义了 `VUE3` 这个宏来决定使用 Vue 2 还是 Vue 3 的应用创建和初始化逻辑。如果没有定义 `VUE3`，则执行 Vue 2 的逻辑；如果定义了 `VUE3`，则执行 Vue 3 的逻辑。

例如，如果项目在配置中明确了当前使用的是 Vue 3 框架，那么在编译阶段，`#ifdef VUE3` 部分的代码会被保留和执行，而 `#ifndef VUE3` 部分的代码会被忽略。反之，如果项目配置为使用 Vue 2，那么情况则相反。

5. 当前大部分主流的的前端项目 都需要编译后运行 在HBIDE里面直接内置了一个内置浏览器的开发运行

   运行的时候，可以进行热更新开发。

   而开发完成后，就需要打包（需要注册账号，才能打包相关开发应用）

   DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

   生成之前 需要配置 manifest.json 去生成一个appid

   打包生成的目录是到 unpackage/dist/build 里面 可以看到具体的端

6. 打包的术语相关 （将对应的包放入各个终端是可以直接运行）

   PC/H5打包 就是正常生成打包 打包后的代码需要上传到网站根目录或者去修改相对路径

   小程序打包 一般指的是微信小程序 一样会在unpackage目录下面生成对应的打包文件

   云打包 直接让远程服务器打包 然后生成一个下载包后，就可以在手机里面安装APP包

   本地打包资源，需要自己下载 Android Studio 将项目导入 然后进行打包

   7.项目的启动端口配置:

   ​ 直接修改 manifest.json 本地开启开发调试的端口号 和其他项目发生冲突的时候 需要进行修改 web配置

   项目的前端打包目录配置:

   ​ 配合线上的项目目录，每次更新至需要将之前的目录替换掉即可

   APP的LOGO相关改动:

   ​ 跳到安卓图标地方上区修改

   改动后 需要重新启动

   浏览器的选择打开 ; 运行——配置（指定对应浏览器开发工具）

   如果是调试微信小程序的开发 需要将本地的小程序开发工具加上去

   8.demo页面的创建与基本语法相关

   新建页面可以指定模板（后面自己建了模板一般使用自己的模板页面，会非常方便） 同时勾选加入package.json(这样不用每次新建页面都手动添加到路由里面)