uniapp常见问题

onBackPress

webview

拦截器

uniapp软键盘弹起，导致页面整体上移

---

onBackPress

页面 | uni-app官网

失效问题

原因：

1.不支持微信小程序，支持h5、app、支付宝。

2.当前页面栈 必须要大于 2 才生效。

let pages = getCurrentPages(); 
console.log( pages.length );// 查询页面栈需大于2

解决：

使用onUnload加uni.navigateBack实现

// 回退页面
onUnload() {
    uni.navigateBack({
      delta: 2 
    })
},
 
// 返回指定的页面
onUnload() {
		uni.reLaunch({
			url: `xxx`
		})
	}
},

 阻止页面返回

onBackPress(options) {
    return !this.canBack
},


//如果允许默认返回：return false
onBackPress(options) {
    return false //不阻止返回
},


//不允许默认返回，自己写跳转逻辑：return true
onBackPress(options) {
    uni.reLaunch({
		url: `xxx`
	}) //自己填写跳转逻辑
    return true//不阻止返回
},

其他

监听页面返回 ，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；

支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。 

webview

web-view | uni-app官网

网页向应用发送消息:

//uniapp-app端 [实时返回]
//uniapp-wx小程序方式1 [返回小程序时可以拿到]
uni.postMessage({
    data: {
        operType: "currentPageIsTabbar" //发送的数据
    }
});

acceptMessage(e) {
    e.detail.data //接受的数据 是个数组
},


//uniapp-wx小程序方式2 [返回小程序时可以拿到]
uni.webView.postMessage({
	data: {
		operType: "saveImg",
		url
	}
});

acceptMessage(e) {
    e.detail.data //接受的数据 是个数组
},

拦截器

uni.addInterceptor(STRING, OBJECT) | uni-app官网

uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url
    args.url = 'https://www.example.com/'+args.url
  },
  success(args) {
    // 请求成功后，修改code值为1
    args.data.code = 1
  },
  fail(err) {
    console.log('interceptor-fail',err)
  },
  complete(res) {
    console.log('interceptor-complete',res)
  }
})

uni.addInterceptor({
  returnValue(args) {
    // 只返回 data 字段
    return args.data
  }
})


// 记得要在页面销毁前销毁监听器
onHide() {
    uni.removeInterceptor('request')
},

注意：拦截uni.switchTab本身没有问题。但是在微信小程序端点击tabbar的底层逻辑并不是触发uni.switchTab。所以误认为拦截无效，此类场景的解决方案是在tabbar页面的页面生命周期onShow中处理。 

uniapp软键盘弹起，导致页面整体上移

解决方法：

1.在pages.json里该页面注册的style里加上这段代码

"style": {
		//手机软键盘升起不让其将页面头部上推
		"app-plus": {
		 "softinputMode": "adjustResize"
	}
}

2.属性adjust-position【input，textarea】都有这个属性

注：

我使用的是uni-easyinput组件（该组件也有属性adjust-position）

将uni-easyinput封装在组件中，并且adjust-position属性置为false，此时不要和方式1混用(详看方式1图片)

测试发现并不能解决软键盘弹起的导致页面上移的问题

不知道是我测试的问题还是确实失效