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> 应用场景:点击说明框以外 提示框隐藏
![vue+uniapp 项目中一些常用知识第1张](https://img2020.cnblogs.com/blog/1647089/202109/1647089-20210910201501818-593412833.png)
8、uniapp 从某个页面点击导航栏的返回按钮直接返回到首页
onBackPress() { uni.switchTab({ url: '../home/index' }) return true },
9、随机生成字符串
Math.random().toString(32).split('.')[1] // 'ppo5157739' ...
------- 持续更新 ------