Uniapp简介

  1. uni-app：是一个使用Vue.js开发前端应用的框架，开发的代码可以发布到H5、Android、iOS以及各种小程序多个平台。
  2. Uniapp约定的开发规范：
    1. 页面文件遵循Vue单文件组件规范
    2. 组件标签靠近小程序规范
    3. 接口靠近微信小程序规范
    4. 数据绑定及事件处理同Vue.js规范，同时补充了App及页面的生命周期
    5. 为了兼容多个平台运行，建议使用flex布局

小程序开发的环境搭建

  1. 安装编辑器HbuilderX
  2. 安装微信开发者工具

项目的目录介绍

  1. pages.json：对uni-app进行全局配置，决定页面文件的路径、窗口样式、最顶部的导航栏、底部的tabbar等
  2. manifest.json：应用的配置文件，用于指定应用的名称、图标、权限等
  3. App.vue：根组件，是页面入口文件，可以调用应用的生命周期函数。
  4. main.js：项目入口文件，主要作用是初始化vue实例并使用需要的插件。
  5. uni.scss：为了方便整体控制应用的风格，预置了一批scss变量
  6. unpackage：打包目录，包含各个平台的打包文件
  7. pages：所有的页面存放目录
  8. static：静态资源存放的目录
  9. components：组件存放的目录

pages.json下的常用配置

1.全局配置
  1. 在pages.json文件中的globalStyle节点下进行页面的全局配置，作用于每一个小程序页面
    1. navigationBarTextStyle：设置导航栏的标题颜色，仅支持black、white
    2. navigationBarTitleText：设置导航栏的标题内容
    3. navigationBarBackgroundColor：设置导航栏的背景色
    4. backgroundColor：设置下拉刷新时窗口的背景色
    5. backgroundTextStyle：设置下拉loading的样式，仅支持dark、light。
    6. enablePullDownRefresh：是否开启下拉刷新
    7. onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位只支持px
  2. pages.json文件中的pages节点进行配置页面，其属性如下：
    1. path：指定页面路径
    2. style：设置页面的局部配置，其配置项可以参考globalStyle节点下的属性。
2.tabBar配置
  1. tabBar分为顶部tabBar和底部tabBar。其属性包含如下：
    1. color：tab 上的文字默认颜色
    2. selectedColor：tab上的文字选中时的颜色
    3. backgroundColor：tab的背景色
    4. borderStyle：tabbar 上边框的颜色，仅支持 black/white
    5. list：tab的列表，最少2个、最多5个tab。list节点下的属性有
      1. pagePath：在pages中定义的
      2. text：tab上的按钮文字
      3. iconPath：图片路径
      4. selectedIconPath：选中时的图片路径
    6. position：可选值bottom、top。当position值为top时，将不会显示icon。
3.condition启动模式的配置
  1. 在开发期间，为了方便进入非tabBar页面，可以配置启动模式。类似于在微信开发者工具中添加编译模式的功能
  2. condition节点的属性：
    1. current：当前激活的模式，list节点的索引值
    2. list：设置启动模式列表
      1. name：启动模式名称
      2. path：启动的页面路径
      3. query：启动参数，可以在页面的生命周期函数onLoad中获取。
"condition": {
	"current": 0,
	"list": [
		{
			"name": "详情页",
			"path": "pages/detail/detail",
			"query": "id=1"
		}
	]
}
// 配置完后，在微信开发者工具中在普通编译器
// 新增了详情页的快速进入方式

常用组件的基本使用

1.text组件
  1. text组件等同于HTML中的span标签，属于行内元素。
  2. 其常用属性有：
    1. selectable：表示文本是否可选。在微信小程序中，该属性调整为user-select
    2. space：显示连续空格
    3. decode：是否解码
2.view组件
  1. view组件等同于HTML中的div元素，属于块元素
  2. 其常用属性有：
    1. hover-class：指定按下去的样式类，其默认值为none，表示没有点击效果
    2. hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击的效果，即阻止冒泡
    3. hover-start-time：按住后多久出现点击的效果
    4. hover-stay-time：手指松开后点击的效果保留时间
3.button组件
4.image组件
  1. image组件，等同于HTML中的img元素
  2. 其常用属性：
    1. src：指定图片资源地址
    2. mode：指定图片裁剪、缩放的模式

uni-app中的样式

  1. rpx：一种根据屏幕宽度自适应的动态单位。不管屏幕多宽，都将其分为750份，即屏幕宽度为750rpx。
  2. 使用@import可以导入外联样式表，例如：
<style>
	@import url("./common.css");
</style>
  1. 支持常用的选择器，比如类选择器、id选择器、元素选择器；不支持通配符选择器
  2. 页面上的page节点相当于HTML文档中的body节点
  3. 定义在App.vue中的样式为全局样式，作用于每一个页面。在 pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。
  4. uni-app中可以使用字体图标
  5. 使用scss:
<style lang="scss">
	
</style>

uni-app中的数据绑定

1.插值语法的使用
  1. 插值语法：使用一对大花括号
<view>
	<text>{{msg}}</text>
	<view></view>
	<text>{{flag === true ? '真' : '假'}}</text>
	<view></view>
	<text>{{100 + 150}}</text>
</view>
2.v-bind动态绑定属性
  1. v-bind:属性名称指令可以简写为:属性名称
<image v-bind:src="imgUrl"></image>
<image :src="imgUrl"></image>

uni-app中的列表渲染

  1. 列表渲染使用vue中的v-for指令。
<view v-for="(item, index) in userList" :key="item.id">
	<text>{{item.name}}</text>
</view>

uni-app中的事件

  1. 事件绑定：通过v-on进行事件的绑定，可以简写成@。例如绑定点击事件，则应该写为<button @click="handleClick"></button>
  2. 事件传参
    1. 如果未显示传递参数，则事件的回调函数中的第一个形参就为事件对象
    <button @click="handleClick">点击事件, 事件的回调函数中包含默认形参事件对象</button>
handleClick(e) {
	console.log(e)
}
    1. 如果显示的传递了参数，对应的事件函数形参接收的则是传递过来的实参
    <button @click="handleClick(imgUrl)">点击事件, 传递数据</button>
handleClick(imgUrl) {
	console.log(imgUrl)
}
    1. 事件回调函数中即获取事件对象，也获取传递的实参数据
    <button @click="handleClick(imgUrl, $event)">点击事件, 传递数据</button>
handleClick(imgUrl, e) {
	console.log(imgUrl, e)
}

uni-app中的生命周期函数

1.应用的生命周期函数
  1. onLaunch：当uni-app初始化完成时触发（全局只触发一次）
  2. onShow：当uni-app启动，或从后台进入前台显示
  3. onHide：当 uni-app 从前台进入后台
  4. onError：当 uni-app 报错时触发
2.页面的生命周期函数
  1. onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为Object，可以用于页面传参
  2. onShow：监听页面显示。
  3. onReady：监听页面初次渲染完成。
  4. onHide：监听页面隐藏
  5. onUnload：监听页面卸载

下拉刷新

1.启动下拉刷新
  1. 在pages.json文件中的pages节点下的style属性中，使用enablePullDownRefresh属性开启下拉刷新。
"enablePullDownRefresh": true
  1. 调用uni.startPullDownRefresh方法开启下拉刷新
2.监听下拉刷新
  1. 在页面的onPullDownRefresh函数中进行监听。
onPullDownRefresh() {
	console.log("用户下拉刷新了")
},
3.下拉刷新的关闭
  1. 使用uni.stopPullDownRefresh()停止当前页面下拉刷新

上拉加载

  1. 在pages.json文件中的pages节点下的style属性中，使用onReachBottomDistance属性设置距离底部加载的距离，默认为50px
  2. 在页面的onReachBottom函数监听触底的行为

网络请求的发送

  1. 在uni-app中使用uni.request方法进行网络请求的发送。在小程序中网络相关的API在使用前需要配置域名白名单。
  2. get请求的发送示例
uni.request({
	url:"https://www.escook.cn/api/get",
	method:"GET",
	data: {
		name: 'zs',
		age: 24
	},
	success(res) {
		console.log(res)
	}
})
  1. post请求的发送示例
uni.request({
	url: "https://www.escook.cn/api/post",
	data: {
		name: 'zs',
		age: 23
	},
	success(res) {
		console.log(res)
	},
	method:"POST"
})

数据缓存

  1. uni.setStorage：将数据存储在本地存储的指定key中，会覆盖掉原来该key对应的内容。这是一个异步接口
  2. uni.setStorageSync：将data存储在本地缓存中指定的 key 中，会覆盖掉原来该key对应的内容，这是一个同步接口
  3. uni.getStorage：从本地缓存中异步获取指定 key 对应的内容。
  4. uni.getStorageSync：从本地缓存中同步获取指定 key 对应的内容
  5. uni.removeStorage：从本地缓存中异步移除指定 key
  6. uni.removeStorageSync：从本地缓存中同步移除指定 key。

上传图片

  1. 使用uni.chooseImage方法从本地相册选择图片或使用相机拍照。
  2. 示例
<button @click="chooseImgs">上传图片</button>
chooseImgs() {
	uni.chooseImage({
		count:5,
		success: (res) => {
			this.imgPath = res.tempFilePaths
			console.log(res)
		}
			
	})
},

预览图片

  1. 预览图片使用uni.previewImage方法
  2. 示例
<view >
	<image :src='item' v-for="(item, index) in imgPath" :key="index" @click="previewImg(item)"></image> 
</view>
chooseImgs() {
	uni.chooseImage({
		count:5,
		success: (res) => {
			this.imgPath = res.tempFilePaths
			console.log(res)
		}
			
	})
}

条件注释实现多端兼容

  1. 条件注释的语法：以#ifdef 平台标识开头，以#endif结尾
  2. 组件的条件注释
<!-- #ifdef H5 -->
<view>H5中层现的内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信中层现的内容</view>
<!-- #endif -->
  1. api的条件注释
test() {
	// #ifdef H5
	console.log("H5中层现的内容")
	// #endif
	// #ifdef MP-WEIXIN
	console.log("微信中层现的内容")
	// #endif
}
  1. 样式的条件注释
.container {
	/* #ifdef H5 */
	background-color: aqua;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	background-color: brown;
	/* #endif */
}

uni-app中的导航跳转

1.声明式导航
  1. 使用navigator组件
  2. 跳转到普通页面(非tabBar页面)示例
<navigator open-type="navigate" url="/pages/detail/detail">跳转到普通页面</navigator>
  1. 跳转到tabBar页面
<navigator open-type="switchTab" url="/pages/message/message">跳转到tabBar页面</navigator>
2.编程式导航
  1. 使用navigateTo方法进行跳转：将会保留当前页面，跳转到应用内的某个页面，从而使用uni.navigateBack可以返回到原页面。
  2. 使用switchTab方法进行跳转，跳转到tabbar页面
  3. 使用redirectTo方法进行跳转，关闭当前页面，跳转到应用内的某个页面。
3.导航跳转传递参数
  1. 在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期函数进行接收，该生命周期函数的options形参存放着其他地方传递过来的参数
  2. 示例：
goToDetail() {
	uni.navigateTo({
		url:`/pages/detail/detail?id=1&name=zs`
	})
}
onLoad(options) {
	console.log(options.id, options.name)
}

组件

1.组件的创建
  1. 在项目根目录下新建components目录，在components目录下新建xxx.vue即完成一个组件的创建
  2. 组件的注册和使用和vue是一样的
2.组件的生命周期
  1. 组件的生命周期和vue中是一样的
3.组件的通信方式
  1. 父组件给子组件传值：在子组件内部使用props接收父组件传递的数据
<!--父组件中-->
<login :msg='name'></login>
<!--子组件中-->
props:['msg']
  1. 子组件给父组件传值：子组件通过$emit触发事件进行传递参数，父组件定义自定义事件(监听事件)并接收参数
<!--子组件中-->
<button @click="passValue">给父组件传值</button>
methods: {
	passValue() {
		this.$emit('update', this.msg + ',Good')
	}
}

// 父组件中监听事件
<login :msg='name' @update='updateMsg'></login>
methods: {
	updateMsg(res) {
		console.log(res)
		this.msg = res
	}
}
  1. 兄弟组件之间通信：uni.$on注册一个全局监听事件，通过uni.$emit触发全局监听事件

打包

1.微信小程序打包
  1. 在manifest.json文件中进行微信小程序配置
  2. 修改请求服务端的地址为线上合法地址
  3. 在小程序后台配置request合法域名
2.安卓打包
  1. 在manifest.json文件中进行H5配置
3.IOS打包
  1. 在manifest.json文件中进行基础配置等