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

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

?

1 2 3 4 5 6 7 8

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

　　

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

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不同）

?

1 2 3 4 5 6 7 8

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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、上传图片后预览图片

?

1 2 3

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

　　

6、h5  input  password 密码自动回填

 

?

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

 

7、@click 与 @click.stop 使用

　

?

1 2 3 4

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

 

　　

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

?

1 2 3 4 5 6

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

　　

9、随机生成字符串

?

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

　　

 

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