uni-app基础

uni-app

什么是UNi-APP

uni-app：是一个使用Vue.js开发的前端框架，开发者编写一套代码可以发布到IOS，Android，Web（响应式），以及各种小程序多个平台的框架（对于开发者而言非常的友好）

使用Hbuilder,VScoded来创建一个UNI-APP的项目

在Hbuilder：在点击工具栏里的文件 -> 新建 -> 项目 -> uni-app -> 选择uni-app的项目模板

VScode:

1.首先确认自己电脑具有开发环境(node.js vue/cli)
	（1.）安装node.js -> 可以在node官网安装推荐安装 TLS的稳定版本
	（2.）安装vue/cli -> npm i -g @vue/cli
2.vue create -p dcloudio/uni-preset-vue projectName

UNI-App的生命周期

UNI-App的生命周期与Vue.js的生命周期基本一致

UNI-App的生命周期：1.应用生命周期 2. 页面生命周期 3.组件生命周期（Vue.js组建生命周期一致）

应用生命周期：

	onLanuch 当`uni-app`初始化完成时触发（全局只触发一次）
	onShow 当 `uni-app`启动，或从后台进入前台显示
	onHide 当 `uni-app`从前台进入后台
	// 以上三个都是在App.vue中 在chrome中运行是可以打开console查看，也可以在微信开发者工具来进行查看

UNI-App的目录结构

┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid App端存放本地html文件的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules 存放uni_module规范的插件。
├─wxcomponents 存放小程序组件的目录
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
└─uni.scss 这里是uni-app内置的常用样式变量

UNI-App常用的几个Api

	uni.navigateTo // 页面跳转 ， 可以保留当前界面 ， 使用uni.navigateBack返回原界面
	示例：
	uni.navigateTo({
		url:'需要跳转的路径' // 也可以在此传递参数跳转 url:'pages/index?id=1'
		})

	uni.request // 发送网络请求，当需要传递后台数据的时候可以使用，一般会封装一个简单request.js来用来解决请求的发送以及解决异步调用问题

封装的request.js文件

// 定义公共请求头

const BASE_URL = 'http://127.0.0.1:8080/api' // 自己根据接口的公共前缀来进行填写

// 定义并且到处一个发送请求的方法，并向其中传递一个参数options，作为发送请求的参数，可以作为data，methods，url

export const Request = (options) => { // Request为定义的请求方法名，可根据自己实际需求进行更换
	return new Promise((resolve,reject) => {
		uni.request({
			url:BASE_URL + OPTIONS.URL, // 拼接为完整的URL
			method:OPTIONS.METHODS || 'GET', // 可以接受的请求方法，默认是get
			data:OPTIONS.data || {} // 请求的数据或者参数
			success:(result)=>{
				// 发送成功之后使用一个result来进行保存
				if(result.data.status !== 0){
					return uni.showToast({
						title:'获取数据成功'
					})
				}
				reslove(res)
			}
			// 请求失败之后的方法定义
			fail: (err) => {
				uni.showToast({
					title:'获取数据失败'
				})
				reject(err)
			}
			})
		})
}

在main.js中注册request.js

import request from 'common/request.js'
Vue.prototype.$request = request