APP中的页面和返回问题 plus.webview plus.key
Hbuilder WebView 关于APP中的页面返回问题 plus.webview
前言：
最近在做一个react+ant+H5app的APP应用项目。
众所周知，应create-react-app脚手架创建出来的是单页面项目。
在浏览器中，页面通过react-router-dom进行组件渲染，从而看起来像是跳转了页面，利用history进行地址返回，看起来就像返回页面一样。
但是当react代码开发完了，打包到H5+app中作为app时，在任何一个界面的返回都会直接退出APP应用，而不是像我们想的，从哪个页面进来，就退出到那个界面中去。
按照我个人的理解和猜测，这是因为：react代码部分是单页面的，所以在app中，用react router跳转的每一个页面实际上都是index.html这个页面，所以，看到的所有页面按下返回键，都是直接退出应用。
那么，如何才能让app的页面像浏览器一样，按下返回键就是返回到上一个页面呢？
解决方法可能有很多种，但是我学术简陋，只找到一种方法，那就是利用H5+APP的API plus.webview
一、路由与webview说明
- HashRouter用于分配url,如
【/index，/scan，/boxMessage。。。】 - webview用于APP的页面新建和跳转，如
【createWebview('http://xxxx:xxxx/#/edictor?sendData=' + jsonsendData, 'edictor_scan_add','添加数据')】
二、页面跳转逻辑
我做过的一个react app 项目的webview逻辑
0.目前webview共6个
【scan】从首页创建的扫码页面
【edictor_index_change】从主页创建的修改数据界面
【boxMessage】从扫码页创建的盒子信息界面
【edictor_scan_add】从扫码页创建的添加信息界面
【edictor_box_add】从盒子页创建的添加信息界面
【edictor_box_change】从盒子页创建的修改数据界面
1.从首页点击修改按钮 跳转到编辑页面进行数据修改
【1首 =》编（修改） 1.首页建编写页面】
【1首 =》编（修改） 2.编写页面关闭】
【1首 =》编（修改） 3.首页捕获编辑界面关闭后刷新首页】
2.从首页点击扫码 并且所扫二维码是之前未扫过的，跳转到新建页面 进行盒子的机床信息新建
【2首 =》扫 =》编（新建） 1.首页建扫描页面】
【2首 =》扫 =》编（新建） 2.扫描页建编辑页面】
【2首 =》扫 =》编（新建） 3.编写页面关闭跳到扫面页面】
【2首 =》扫 =》编（新建） 4.扫描页面捕获编辑界面的关闭事件后 关闭扫描页面】
【2首 =》扫 =》编（新建） 5.首页捕获扫描页面的关闭后 刷新首页】
3.从首页点击扫码 并且所扫二维码是值卡扫过的，跳转的这个盒子的信息界面 进一步进行继续添加盒子机床信息，或者修改某一条盒子机床信息（下边有例子）
【3首 =》扫 =》盒 =》编（从盒子到编辑） 1.首页建扫描页面】
【3首 =》扫 =》盒 =》编（从盒子到编辑） 2.扫面页创建盒子页】
【3首 =》扫 =》盒 =》编（从盒子到编辑） 3.盒子页创建编辑页（修改）】
【3首 =》扫 =》盒 =》编（从盒子到编辑） 4.编辑页关闭跳到盒子页】
【3首 =》扫 =》盒 =》编（从盒子到编辑） 5.盒子页检测到编辑页关闭后 刷新盒子界面（修改）】
【3首 =》扫 =》盒 =》编（从盒子到编辑） 6.扫描界面检测到盒子界面关闭后 关闭扫描界面】
【3首 =》扫 =》盒 =》编（从盒子到编辑） 7.首页检测到扫描界面关闭后 刷新首页】
4.当在某个盒子信息界面中，删除了该盒子对应的所有机床信息后，界面自动跳转回首页
【4首 =》扫 =》盒 =》首（盒子数据删完） 1.首页建扫描页面】
【4首 =》扫 =》盒 =》首（盒子数据删完） 2.扫面页创建盒子页】
【4首 =》扫 =》盒 =》首（盒子数据删完） 3.盒子页关闭】
【4首 =》扫 =》盒 =》首（盒子数据删完） 4.扫描界面检测到盒子界面关闭后 关闭扫描界面】
【4首 =》扫 =》盒 =》首（盒子数据删完） 5.首页检测到扫描界面关闭后 刷新首页】
三、webview使用示例
方法举例：从首页点击扫码 并且所扫二维码是值卡扫过的，跳转的这个盒子的信息界面 进一步进行继续添加盒子机床信息，或者修改某一条盒子机床信息
步骤1、7 #index首页
// 扫码
qrHandle = () => {
const that = this
// 【3首=》扫=》盒=》编（从盒子到编辑） 1.首页建扫描页面】
if (_openw) { return } // 防止快速点击
// _openw = createWebview('http://xxxx:9000/#/scan','scan','扫码')
_openw = createWebview('http://xxxx:9000/#/scan','scan','扫码')
_openw.addEventListener('loaded', function () {//页面加载完成后才显示
_openw && _openw.show('zoom-fade-out', null, function () {
_openw = null//避免快速点击打开多个页面
})
}, false)
_openw.addEventListener('hide', function () {
_openw = null
}, false)
_openw.addEventListener('close', function () {//页面关闭后可再次打开
_openw = null
// 【3首=》扫=》盒=》编（从盒子到编辑） 7.首页检测到扫描界面关闭后 刷新首页】
that.componentDidMount()
}, false)
}
步骤2、6 #scan扫码
if (_openw) { return } // 防止快速点击
// 【3首=》扫=》盒=》编（从盒子到编辑） 2.扫面页创建盒子页】
const resultTemp = encodeURI(result)
_openw = createWebview('http://xxxx:9000/#/boxMessage?sendData=' + resultTemp, 'boxMessage','盒子数据')
_openw.addEventListener('loaded', function () {//页面加载完成后才显示
_openw && _openw.show('pop-in', null, function () {
_openw = null//避免快速点击打开多个页面
})
}, false)
_openw.addEventListener('hide', function () {
_openw = null
}, false)
_openw.addEventListener('close', function () {//页面关闭后可再次打开
_openw = null
// 【3首=》扫=》盒=》编（从盒子到编辑） 6.扫描界面检测到盒子界面关闭后 关闭扫描界面】
plus.webview.close(thisWebView)
}, false)
步骤3、5 #boxMessage盒子页
// 添加盒子信息按钮
addData = () => {
const that = this
const sendData = {
boxId: this.state.boxIdMessage[0].boxId,
flag: "add",
from: 'boxMessage'
}
let jsonsendDataTemp = JSON.stringify(sendData)
let jsonsendData = encodeURI(jsonsendDataTemp)
// 【3首=》扫=》盒=》编（从盒子到编辑） 3.盒子页创建编辑页（添加）】
if (_openw) { return } // 防止快速点击
_openw = createWebview('http://xxxx:9000/#/edictor?sendData=' + jsonsendData, 'edictor_box_add','添加数据')
_openw.addEventListener('loaded', function () {//页面加载完成后才显示
_openw && _openw.show('pop-in', null, function () {
_openw = null//避免快速点击打开多个页面
})
}, false)
_openw.addEventListener('hide', function () {
_openw = null
}, false)
_openw.addEventListener('close', function () {//页面关闭后可再次打开
_openw = null
// 【3首=》扫=》盒=》编（从盒子到编辑） 5.盒子页检测到编辑页关闭后 刷新盒子界面（添加）】
that.componentDidMount()
}, false)
}
步骤4 #edictor 编辑页
if (from === 'boxMessage') {
// 【3首=》扫=》盒=》编（从盒子到编辑） 4.编辑页关闭跳到盒子页】
plus.webview.close(thisWebView)
四、webview的创建方法
注意：webview的创建需要放在plusready环境中
plus.webview.create(url, id, {
scrollIndicator: 'none',//是否显示滚动条
scalable: false,//窗口是否可缩放
popGesture: 'close',//)窗口的侧滑返回功能
backButtonAutoControl: 'close',//点击上面返回按钮时 是关闭页面的效果
titleNView: {
autoBackButton: true,
backgroundColor: '#108ee9',
titleColor: '#fff',
titleText: text
}
})
}
五、webview的返回
0、在创建页面时，设置返回逻辑
backButtonAutoControl: (String 类型 )Webview窗口自动处理返回键逻辑
当Webview窗口在显示栈顶，并且Webview窗口中没有调用JS监听返回键（plus.key.addEventListener('backbutton',...)）时按下返回键响应行为。
可取值：
"hide" - 隐藏Webview窗口，隐藏动画与上一次调用显示时设置的动画类型相对应（如“slide-in-right”对应的关闭动画为“slid-out-right”）；
"close" - 关闭Webview窗口，关闭动画与上一次调用显示时设置的动画类型相对应（如“slide-in-right”对应的关闭动画为“slid-out-right”） ；
"none" - 不做操作，将返回键传递给下一Webview窗口处理； "quit" - 退出应用。
1、子页面中的返回（当创建webview时没有设置返回按钮的效果，需要监听backbutton（可在创造页面的那个页面写(newWebview)，也可以在本身页面写（currentWebview）））
document.addEventListener('plusready', function() {
const webview = plus.webview.currentWebview();//获取这页
plus.key.addEventListener('backbutton', function() {//监听这页的返回按钮
webview.canBack(function(e) {//看看这也是否可以返回
if(e.canBack) {//如果可以返回
//webview.back();//回退；
} else {
webview.close(); //关闭这页
//plus.runtime.quit();//退出app
}
})
});
})
2、首页点击两次退出程序
document.addEventListener('plusready', function(a) {
var first = null;
plus.key.addEventListener('backbutton', function() {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
plus.nativeUI.toast('再按一次退出应用')
setTimeout(function() {
first = null;
}, 2000);
} else {
if (new Date().getTime() - first < 2000) {
plus.runtime.quit();
}
}
}, false);
});
六、webview综合使用
let _openw=null
if (_openw) { return } // 防止快速点击
_openw = createWebview('http://xxxx.cn:9000/#/scan', 'scan', '扫码')
_openw.addEventListener('loaded', function () {//页面加载完成后才显示
_openw && _openw.show('zoom-fade-out', null, function () {
_openw = null//避免快速点击打开多个页面
})
}, false)
_openw.addEventListener('hide', function () {
_openw = null
}, false)
_openw.addEventListener('close', function () {//页面关闭后可再次打开
_openw = null
首页检测到新面关闭后 刷新首页
that.componentDidMount()
}, false)
