uni-app的基本介绍
1.基础部分
- 环境搭建
- 页面外观配置
- 数据绑定
- uni-app的生命周期
- 组件的使用
- 条件注释跨端兼容
- uni中的事件
- 导航跳转
- 组件创建和通讯
2.uni-app介绍
uni-app
是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,开发布到IOS,Android,H5,以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
具有vue和微信小程序的开发经验,可快速上手uni-app.
3.环境搭建
安装编辑器HbuilderX
HBuilder是通用的前端开发工具,但为uni-app
做了特别强化。
下载App开发版,可开箱即用
安装微信开发者工具
4.创建项目
1.使用浏览器运行
2.运行到微信小程序
注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。
如果遇到此图问题(没有开启微信小程序的端口号)
解决方法:开启即可
3.运行在安卓(Andriod)真机上。
5.介绍项目目录和文件作用
pages.json
文件用来对uni-app进行全局配置,决定页面文件的路径,窗口样式,原生的导航栏,底部的原生tabbar等。
manifest.json
文件是应用的配置文件,用于指定应用的名称,图标,权限等。
App.vue
是我们的根组件,所有页面都是在App.vue
下切换的,是页面入口文件,可以调用应用的生命周期函数。
main.js
是我们的项目入口文件,主要作用是初始化vue
实例并使用需要的插件。
uni.scss
文件的用途是为了方便整体控制应用的风格。比如颜色,边款风格
unpackage
就是打包目录,在这里有各个平台的打包文件
pages
所有的页面存放目录
static
静态资源目录,例如图片等
components
组件存放目录
6.规范
uni-app
约定了如下开发规范:
- 页面文件遵循Vue单文件组件规范
- 组件标签靠近小程序规范,详见uni-app组件规范
- 接口能力靠近微信小程序规范,但需要将前缀wx替换为uni
- 数据绑定及事件处理同
Vue.js
规范,同时补充了App及页面的生命周期 - 为兼容多端运行,建议使用flex布局进行开发