uni-app学习-入门篇

首先肯定是要了解下uni-app是个什么东西。

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

笔者之前也学习过React-Native、Flutter这两个前端框架，现在也来学习下uni-app，记录下从入门到放弃的全过程😄。

一、开发环境配置

官方文档上有2种方案，

1、通过官方IDE HBuilderX, 可视化的方式比较简单，内置相关环境，开箱即用，无需配置nodejs。

2、利用脚手架vue-cli命令行，需要掌握nodejs等知识。

我就直接选择IDE上手了，本身也是做iOS开发的，感觉用起来会更称手(其实是因为不会用cli😏)。

二、项目创建+项目结构介绍

1、项目创建：

在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

2、项目结构

一个 uni-app 工程，就是一个 Vue 项目，每一个页面都是一个vue文件，需要遵循vue的代码规范。

	
┌─uniCloud              云空间目录，阿里云为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](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量
	

 static目录 使用注意

• 编译到任意平台时，static 目录下除不满足条件编译的文件，会直接复制到最终的打包目录，不会打包编译。非 static 目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。
• css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

三、项目编译运行

1、浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验 uni-app 的 web 版。

 

2、运行App到手机或模拟器：使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。

1. 

注意：如需运行在苹果手机真机上，注意需使用自定义基座。

3、在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。 

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。

注意:   微信开发者工具需要开启服务端口, 在微信工具的设置->安全中。

四、打包App、发布web

这里还没到那一步，懒得写了，等后面到了打包、发布的阶段再补充吧，想要看的小伙伴也可以上官网上去查看教程。