摘要：
1、uniapp上拉加载，下拉刷新onPullDownRefresh(){//下拉的生命周期this.init()},onReachBottom(){//上拉的生命周期this.init()},2、h5页面与android(WebViewJavascriptBridge)/ios(window.webkit.messageHandlers)交互详细、uni.getSystemInfo成功回调中的r
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 @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' ...
------- 持续更新 ------