【uniapp】 组件 和 API

1 组件

1.1 导航栏

1.1.1 原生导航栏

为原生导航栏增加左侧右侧按钮或文字，在 app-plus 中添加配置

"app-plus": {
	"titleNView": {
		"titleSize": "26rpx",
		"titleColor": "#393939",
		"autoBackButton": true,
		"splitLine": "undefined",
		"thtleHeight": "40rpx",
		"buttons": [{ // 右侧操作按钮样式定义,是以数组形式定义，可定义多个
			"color": "#393939",
			"text": "欢迎您，",
			"fontSize": "20rpx",
			"float":"right"
			"type":"back"// 按钮类型
		}]
	}
}

1.1.2 自定义导航栏

原生导航栏无法满足需求时，使用 uni_modules 扩展插件 uni-nav-bar 或者 自定义导航栏

• 使用前需隐藏原生导航栏 "navigationStyle":"custom"
• 组成部分
  • 左：一般为回退按钮，可添加文字
  • 中：标题
  • 右：按钮，文字
• 自定义导航栏样式上要设置成：固定 position: fixed;、置于顶层 z-index: 9999;、有背景颜色

1.2 弹窗

uniapp 弹出控件

1.2.1 原生弹窗

// 点击事件后
uni.showModal({
  title: "提示",
  content: "确认要提交吗？",
  showCancel: true, // 有无取消按钮
  success: function (res) {
    if (res.confirm) {
      console.log("点击了确定");
    } else {
      console.log("点击了取消");
    }
  },
});

1.2.2 自定义弹窗

• 弹窗结构：
  • 标题
  • 内容
  • 按钮
• 弹窗设置 v-show:"isShow"
• 点击按钮出现弹窗，再点击弹窗消失：设置点击事件使 this.isShow = !this.isShow
• 点击其他区域弹窗消失：
  • 该区域与其他区域为兄弟：其他区域设置点击事件使 this.isShow = false
  • 该区域与其他区域为父子：父区域设点击事件，该区域设唯一标识 id，有时可用输入框 @blur 事件

<input id="show"/> //给该元素设唯一标识 id

showSelector:function(e){
	if(e.target.id != "show") {
		this.isShowSelector = false;
	}
},

1.3 input

• <input class="input" placeholder="请输入" v-model="name" type="number"/>
• type="number" 只能输入数字
• type="password" 密码

export default {
  data() {
    return {
      name: "",
    };
  },
};

1.4 swiper 滑动视图

• swiper 位置要固定，高度宽度均要设置
• swiper-item 高度若太长无法显示，需在其中加滚动视图 scroll-view，位置在滑动视图中绝对，或者设最大高度

<swiper class="swiper" @change="xxx">
  <swiper-item class="swiper-item"></swiper-item>
  <swiper-item class="swiper-item"></swiper-item>
  <swiper-item class="swiper-item"></swiper-item>
</swiper>

1.5 scroll-view 滚动视图

• 记得要加上 scroll-x scroll-y 否则不起作用

<scroll-view class="scroll-view" scroll-x></scroll-view>
<scroll-view class="scroll-view" scroll-y></scroll-view>

解决报错,Ignored attempt to cancel a touchmove event with cancelable=false
三种方法解决[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false

1.6 picker 选择

• value 为数值，初始选择
• range 为选择列表

<picker @change="doPickerChange" :value="index" :range="selectList" range-key="name">
  <view>{{ selectList[index].name }}</view>
</picker>

doPickerChange: function(e) {
	this.index = e.detail.value
},

• 设初值为"请选择"，不过没有置灰

<picker @change="doPickerChange" :value="index" :range="selectList" range-key="name">
  <view>{{ getSelect() }}</view>
</picker>

getSelect() {
	if (this.index === null) {
		return "请选择";
	}
	return this.selectList[this.index].name
}

2 API

2.1 路由与页面跳转

路由与页面跳转

• <navigator url="/pages/xxx/xxx"></navigator> 跳转标签，但是这种写法，其包裹的所有内容在点击的时候都会有阴影，像外边距的部分也有阴影
• uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面。
• uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。
• uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面：点击退出登录、非登录跳转到登录界面
• uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

<navigator url="/pages/xxx/xxx">
  <button></button>
</navigator>

// 点击跳转 @click="goNext"
goNext() {
	uni.navigateTo({
		url: "/pages/xxx/xxx"
	})
},

2.2 数据缓存

• uni.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
• uni.setStorageSync(KEY,DATA) 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
• uni.getStorage(OBJECT) 从本地缓存中异步获取指定 key 对应的内容。
• uni.getStorageSync(KEY) 从本地缓存中同步获取指定 key 对应的内容。
• uni.getStorageInfo(OBJECT) 异步获取当前 storage 的相关信息。
• uni.getStorageInfoSync() 同步获取当前 storage 的相关信息。
• uni.removeStorage(OBJECT) 从本地缓存中异步移除指定 key。
• uni.removeStorageSync(KEY) 从本地缓存中同步移除指定 key。
• uni.clearStorage() 清理本地数据缓存。
• uni.clearStorageSync() 同步清理本地数据缓存。

异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。
key: setStorageSync 中设了这个 key, getStorageSync 就可取这个 key 的值

2.3 图片

uniapp 图片

• 图片按原长宽比例展示：<image src="xxx/xxx" mode="aspectFill"></image>

2.3.1 点击添加图片

从本地相册选择图片或使用相机拍照。

// @click="clickAddImg", methods中
clickAddImg() {
	uni.chooseImage({
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		success: function (res) {
			console.log(JSON.stringify(res.tempFilePaths));
		}
	})
}

2.3.2 点击预览图片

// @click="clickImg", methods中
clickImg() {
	uni.previewImage({
		urls: ["xxx.png"], //需要预览的图片http链接列表
		current: '', // 当前显示图片的http链接，默认是第一个
		success: function(res) {},
		fail: function(res) {},
		complete: function(res) {},
	})
},

2.4 网络状态

uniapp 官网 网络状态

• uni.getNetworkType(OBJECT) 获取网络类型

uni.getNetworkType({
  success: function (res) {
    if (res.networkType == "none") {
      uni.showToast("无网络");
    }
  },
});

2.5 页面和窗体

uniapp 官网 页面和窗体
uni-app 退出登录时获取当前所在的页面

防止重复跳转该页面

let routes = getCurrentPages();
let curRoute = routes[routes.length - 1].route;
if (curRoute != "pages/xxx/xxx") {
  uni.navigateTo({
    url: "/pages/xxx/xxx",
  });
}