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,那么情况则相反。
-
当前大部分主流的的前端项目 都需要编译后运行 在HBIDE里面直接内置了一个内置浏览器的开发运行
运行的时候,可以进行热更新开发。
而开发完成后,就需要打包(需要注册账号,才能打包相关开发应用)
DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
生成之前 需要配置 manifest.json 去生成一个appid
打包生成的目录是到 unpackage/dist/build 里面 可以看到具体的端
-
打包的术语相关 (将对应的包放入各个终端是可以直接运行)
PC/H5打包 就是正常生成打包 打包后的代码需要上传到网站根目录或者去修改相对路径
小程序打包 一般指的是微信小程序 一样会在unpackage目录下面生成对应的打包文件
云打包 直接让远程服务器打包 然后生成一个下载包后,就可以在手机里面安装APP包
本地打包资源,需要自己下载 Android Studio 将项目导入 然后进行打包
7.项目的启动端口配置:
直接修改 manifest.json 本地开启开发调试的端口号 和其他项目发生冲突的时候 需要进行修改 web配置
项目的前端打包目录配置:
配合线上的项目目录,每次更新至需要将之前的目录替换掉即可
APP的LOGO相关改动:
跳到安卓图标地方上区修改
改动后 需要重新启动
浏览器的选择打开 ; 运行——配置(指定对应浏览器开发工具)
如果是调试微信小程序的开发 需要将本地的小程序开发工具加上去
8.demo页面的创建与基本语法相关
新建页面可以指定模板(后面自己建了模板一般使用自己的模板页面,会非常方便) 同时勾选加入package.json(这样不用每次新建页面都手动添加到路由里面)