vue+uniapp 项目中一些常用知识

1、uniapp上拉加载，下拉刷新

onPullDownRefresh() {
	//下拉的生命周期
	this.init()
},
onReachBottom() {
	//上拉的生命周期
	this.init()
},	    

　　

2、h5页面与android(WebViewJavascriptBridge) / ios(window.webkit.messageHandlers)交互详细、uni.getSystemInfo 成功回调中的res.model判断设备机型

uni.getSystemInfo({
		success: (res) => {
			switch (type) {
				case "share":
					if (res.model === "iPhone") {
						window.webkit.messageHandlers.share.postMessage(
							JSON.stringify(params)
						);
					} else {
						window.android.share(JSON.stringify(params));
					}
					break;
				case "wechatLogin":
					if (res.model === "iPhone") {
						window.webkit.messageHandlers.wxLogin.postMessage(
							JSON.stringify(params)
						);
					} else {
						window.android.wxLogin(JSON.stringify(params));
					}
					break;
				case "QQLogin":
					if (res.model === "iPhone") {
						window.webkit.messageHandlers.qqLogin.postMessage(
							JSON.stringify(params)
						);
					} else {
						window.android.qqLogin(JSON.stringify(params));
					}
					break;
				case "saveImage":
					if (res.model === "iPhone") {
						window.webkit.messageHandlers.saveImage.postMessage(
							JSON.stringify(params)
						);
					} else {
						window.android.saveImage(JSON.stringify(params));
					}
					break;
				case "takePhoto":
					if (res.model === "iPhone") {
						window.webkit.messageHandlers.takePhoto.postMessage(
							JSON.stringify(params)
						);
					} else {
						window.android.takePhoto(JSON.stringify(params));
					}
					break;
				case "choosePhoto":
					if (res.model === "iPhone") {
						window.webkit.messageHandlers.choosePhoto.postMessage(
							JSON.stringify(params)
						);
					} else {
						window.android.choosePhoto(JSON.stringify(params));
					}
					break;
					case "captureScreen":
						if (res.model === "iPhone") {
							window.webkit.messageHandlers.captureScreen.postMessage(
								JSON.stringify(params)
							);
						} else {
							window.android.captureScreen(JSON.stringify(params));
						}
						break;
				default:
					break;
			}
		},
	});

　　

3、处理键盘抬起（手机输入法-软键盘 ）这里需要根据各自的页面进行判断 如下：键盘抬起和放下数值不同（num不同）

this.$nextTick(() => {
	const height = document.body.clientHeight;
	uni.onWindowResize((res) => {
		let num = Math.abs(height - res.size.windowHeight);
		console.log("num", num);
		this.isShowBottom = num < 45;
	});
});

　　

4、uniapp弹框  uni.showToast、uni.showModal

uni.showToast({
	title: "意见未填写",
	icon: "none",
})
icon  的值： success、error、loading、none

duration属性为弹框显示时间
duration: 2000  



uni.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success: function (res) {
        if (res.confirm) {
            console.log('用户点击确定');
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
});

showCancel  是否显示取消按钮
cancelText  取消按钮的文字，默认为"取消"，最多 4 个字符
cancelColor   取消按钮的文字颜色，默认为"#000000"
confirmText  确定按钮的文字，默认为"确定"，最多 4 个字符
confirmColor 确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#576B95"，百度小程序平台默认为"#3c76ff"

　　

5、上传图片后预览图片

uni.previewImage({
	urls: [url],
})

　　

6、h5  input  password 密码自动回填

 

input输入框加入属性    autocomplete="new-password"

 

7、@click 与 @click.stop 使用

　

<view class="grow-report" @click="tipClick()">
     <view @click.stop="stopTap()"></view>
</view>
应用场景：点击说明框以外 提示框隐藏

 

　　

 8、uniapp 从某个页面点击导航栏的返回按钮直接返回到首页

onBackPress() {
	uni.switchTab({
	     url: '../home/index'
        })
	return true
},

　　

9、随机生成字符串

Math.random().toString(32).split('.')[1]   // 'ppo5157739'  ...

　　

 

-------  持续更新 ------