uni-app学习（一）

创建uni-app

通过vue-cli创建uni-app：
全局安装vue-cli

npm install -g @vue/cli

创建uni-app

 vue create -p dcloudio/uni-preset-vue my-project

运行并发布uni-app

npm run dev : %PLATFORM%
npm run build : %PLATFORM%

其中%PLATFORM%是可选值，一共有五个选项，分别是

1. h5 平台：H5
2. mp-alipay 支付宝小程序
3. mp-baidu 百度小程序
4. mp-weixin 微信小程序
5. mp-toutiao 头条小程序

注意：

1. dev模式编译出的代码存放在/dist/dev目录下
2. build模式编译出的代码存放在/dist/build目录下，且build模式会将代码进行压缩，体积变得更小适合正式版本的发布。

uni-app的开发规范

1. 页面文件遵循Vue单文件组件（SFC）规范
2. 组件标签应该靠近小程序规范
3. 接口能力（JS API）靠近小程序规范，需要将前缀wx 改成 uni
4. 数据绑定及事件处理同Vue.js规范，同时又补充了App及页面的生命周期
5. 为兼容多端运行，建议使用flex布局

目录结构

1. components uni-app组件目录

2. hybrid 存放本地网页的目录

3. platforms 存放个平台专用的页面目录

4. pages 业务页面存放的目录

   -index-index.vue index页面

   -list-list.vue list页面

5. static 存放应用引用静态资源

6. wxcomponents 存放小程序组件的目录

7. main.js vue初始化文件入口

8. App.vue 应用配置，用老配置App全局样式以及监听应用生命周期

9. manifest.json 配置应用名称，appid，logo，版本等打包信息

10. pages.json 配置页面路由、导航条、选项卡等页面类信息

需要把小程序的每个页面都添加到pakage.json文件

uni-app遵循vue单文件（SFC）规范：

单文件规范

是用类html的语法描述的一个vue组件
每个.vue文件包含三个类型的顶级语言块

1. <template>
2. <script>
3. <style>
   一个.vue文件最多只能有一个template，一个script，但是可以包含多个style标签
   如果想把一个文件分隔多个文件，可以通过src 属性

<template src=".../xx.html"></template>
<script src="../xx.js"></script>
<style src="../xx.css"></style>

还可以使用import方式导入

uni-app页面样式与布局

尺寸单位：
uni-app目前支持px与%
uni-app的基准宽度为750px

页面元素宽度在uni-app中的宽度计算公式：
750px元素在设计稿中的宽度/设计稿基准宽度
例子：设计稿宽度640px，A元素在设计稿中的宽度为100px，那么元素A在uni-app中的宽度就为750100/640=117px

样式导入：
使用@import导入外联样式表，相对路径，用；表示语句结束

<style>
	@import  "../xx.css";
	#app{

	}
</style>

目前支持的选择器：
class选择器.
id选择器#
标签选择器
::after 比如view::after表示在view元素后面插入内容，仅仅微信小程序和5+App支持
::before 比如view::before表示在view元素前面插入内容，仅仅微信小程序和5+App支持

全局样式和局部样式：
在App.vue中定义的样式是全局样式，作用于所有页面
在目录pages下的.vue文件定义的样式是局部样式，只在当前页面生效，并且会覆盖App.vue中相同的选择器。
注：
在App.vue 中用@import引入 的样式同样作用于每个页面
（因为main.js是主入口，在main.js中import 了App.vue，所以App.vue才会作用于每个页面）

为了支持跨平台，建议大家使用flex布局

uni-app配置文件pages.json

pages:[
	path: "",
	style:{

	}],
globalStyle:{

},
tabBar:{
	"color":"#7A7E93",
	"selectedColor":"#3cc5ef",
	"borderStyle":"black",
	"backgroundColor":"#ffffff",
	list:[{
		"pagePath"://点击图标跳转页面，
		"iconPath"://图标路径，
		“selectedPath”：//点击图标路径
		“text”://图标名称
	}，{},{}...]    //最多只能有5个图标
}

uni-app页面生命周期

常用的uni-app生命周期函数：

1. onLoad监听页面加载，其参数是上个页面传递的数据，参数类型为Object
2. onShow监听页面显示
3. onReady监听页面初次渲染完成
4. onUnload监听页面卸载
5. onPullDownRefresh监听用户下拉动作
6. onReachBottom页面上拉触底事件
7. onShareAppMessage用户点击右上角分享 微信小程序
8. onPageScroll监听页面滚动
9. onTabItemTap当前是Tab页面时，点击tab时触发

uni-app基础数据绑定

<script>
	export default {
		data:{

		}
	}
</script>

//在视图中使用{{}}调用变量
<template>
	<view>
		{{}}	
	</view>
</template>

页面使用的所有变量都定义在data内
template内只能有一个子元素

uni-app请求数据

uni.request(OBJECT)
发起网络请求。

success 返回参数说明

参数 类型 说明
data Object/String/ArrayBuffer 开发者服务器返回的数据
statusCode Number 开发者服务器返回的 HTTP 状态码
header Object 开发者服务器返回的 HTTP Response Header

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

返回值

如果希望返回一个 requestTask 对象，需要至少传入 success / fail / complete 参数中的一个。例如：

var requestTask = uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    complete: ()=> {}
});
requestTask.abort();