Uniapp 入门学习

官方地址

https://uniapp.dcloud.net.cn/

1.基本信息

1）优点

1，同一套代码可以编译运行多端（小程序，安卓，ios，web等）
2，节省人力和维护成本
3，接近原生，体验效果更好
4，开发效率高，开发时间更短
5，学习成本比较低（3-15天即可入门）
6，社区活跃，版本迭代快，有问题更容易在社区解决

2）功能框架图

开发一套代码在主流平台上全平台运行

3）uniapp和vue、小程序

uniapp基于vue框架

开发规范和小程序相似

2.使用

1）HBuilderX

开发工具安装和项目启动可以参考

https://blog.csdn.net/sjp991012/article/details/125389443

2）目录结构

·官方目录结构详解

┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb（详见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              内置的常用样式变量

·文件目录使用规范（官方）

- pages                   页面存放目录
- static               静态资源目录（如图片、视频等，静态文件只能存放到这里）
- App.vue               应用入口文件（跟小程序 app.js 类似，如：APP全局样式、监听声明周期）
- main.js               应用入口文件（如：Vue 初始化、定义全局组件 ...）
- manifest.json           项目配置文件（如：应用名称、appid、logo、版本、启动页 ...)
- pages.json           页面配置文件（如：页面路由、导航条、选项卡 ...）
- uni.scss               全局样式（如：按钮颜色、样式风格 ...）
- unpackage               编译后的文件存放目录

- 注意：下面需要自建的，根据项目开发情况创建即可。

- api                   请求封装存放目录（自建）
- common               公共文件存放（自建）
- components           自定义组件存放（自建）- uniapp
- wxcomponents           小程序组件存放（自建）- wx
- store                   vuex 状态管理（自建）
- utils                公共工具目录（自建）
- hybrid               存放本地网页目录（自建）
- platforms               存放各平台专用页面目录（自建）
- vue.config.js           vue 配置管理（自建）
- vite.config.js vite 配置管理（自建）