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布局进行开发