在线文档：
http://notes.xiyanit.cn/#/start/
视频：https://www.bilibili.com/video/BV1BJ411W7pX?p=4
基础部分：
环境搭建
页面外观配置
数据绑定
uni-app的生命周期
组件的使用
uni-app中样式学习
在uni-app中使用字体图标和开启scss
条件注释跨端兼容
uni中的事件
导航跳转
组件创建和通讯，及组件的生命周期
uni-app中使用uni-ui库
项目部：
商城项目
uni-app介绍官方网页
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
即使不跨端，uni-app同时也是更好的小程序开发框架。
具有vue和微信小程序的开发经验，可快速上手uni-app
为什么要去学习uni-app？
相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。
环境搭建
1、Hbuilderx安装
https://www.dcloud.io/hbuilderx.html 下载App开发版
image.png
2、微信开发者工具
其中工具下载地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3、第一个入门程序，参考官网步骤
[利用HbuilderX初始化项目]
-
点击HbuilderX菜单栏文件>项目>新建
-
选择uni-app,填写项目名称，项目创建的目录
https://uniapp.dcloud.io/quickstart-hx?id=%e5%88%9b%e5%bb%bauni-app
-
浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
image
-
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
image
注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。
uni-app默认把项目编译到根目录的unpackage目录。
image
注意：
如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
如果启动过程中提示服务没有开启，需要在小程序中点击设置-安全设置-打开服务器端口
image.png
[介绍项目目录和文件作用]
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage 就是打包目录，在这里有各个平台的打包文件
pages 所有的页面存放目录
static 静态资源目录，例如图片等
components 组件存放目录
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范，详见uni-app 组件规范
- 接口能力（JS API）靠近微信小程序规范，但需将前缀
wx替换为uni，详见uni-app接口规范 - 数据绑定及事件处理同
Vue.js规范，同时补充了App及页面的生命周期 - 为兼容多端运行，建议使用flex布局进行开发
网友评论