前言

HBuilderX打包网址时，会出现返回退出问题，注意 我们打包的是网址 所以网上的那些乱七八糟的教程都不好使，这就很苦恼，改怎样解决呢，既不改变网址的源代码，又实现返回，返回两次退出呢。

并且设置开屏广告 URL预加载效果

Uniapp打包网址

这里采用的是uniapp打包网址的，因为打包其他 根本监听不到返回事件，所以采用uniapp模式打包网址，首先要有vue的基础，我有点vue的基础，所以采用了uniapp 非常方便！

Template模板

1
2
3
4
<div class="backImg">
	<view class="content">
	</view>
</div>

Data数据区

1
2
3
4
5
6
7
8
9
data() {
			return {
				webviewStyles: {
					progress: false
				},
				wv: null,
				first: null
			}
		},

点击返回事件处理

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
//点击返回事件处理
onBackPress(a) {
			var _this = this;
			_this.wv.canBack(function(e) {
				console.log(e);
				if (e.canBack) {
					//返回上一页
					_this.wv.back()
				} else {
					//返回两次退出应用
					if (_this.first == null) {
						_this.first = new Date().getTime();
						uni.showToast({
							title: "再按一次退出应用程序",
							duration: 3000,
							icon: 'none',
							position: 'bottom'
						});
						setTimeout(function() {
							_this.first = null;
						}, 3000);
					} else {
						if (new Date().getTime() - _this.first < 3000) {
							plus.runtime.quit();
						}
					}
				}
			})
			return true;
	},

webVivew延迟加载URL

1
2
3
4
5
onLoad() {
			 this.infoHtml()//初始化URL 但没有加载，目的是等待开屏广告[当然也可以不用开屏广告 直接加载也可以]
			 setTimeout(this.showHtml, 4000) //4秒开屏广告加载完成后 加载URL ，起到了预加载效果
			 
		},

初始化URL及显示URL的方法

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
methods: {
			showHtml(){
			const currentWebview = this.$scope.$getAppWebview();
			currentWebview.append(this.wv);	
			},
			infoHtml() {
				// #ifdef APP-PLUS
				const url = 'https://mdnjnwe283-3221.yzu5zg-7.v.saassns.com';
				const wv = plus.webview.create("", "custom-webview", {
					plusrequire: "none", //禁止远程网页使用plus的API，  
					'uni-app': 'none', //不加载uni-app渲染层框架 
					//原始状态栏  不隐藏状态栏的话 注释掉
					statusbar: {
						background: "transparent"
					},
					
				//webVivew的标题栏 不同于uniapp的标题栏 uniapp标题栏会遮盖原页面 而webVivew不会遮盖 推荐使用webVivew的
					titleNView:  
					{
						backgroundColor: "transparent",

					}
				})
				wv.loadURL(url);
				this.wv = wv

				// #endif  

			}

},

状态栏透明去掉标题栏

在pages.json文件里修改 [不过有一个缺陷 就是页面会整体上移 在不改变网址源代码前提下 暂未解决透明又正常的状态栏 ]

1
2
3
4
5
6
7
8
9
"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarBackgroundColor": "transparent",
		"app-plus": {
					  "titleNView": false
					 }
		
	
	},

完整代码

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<template>
	<div class="backImg">
		<view class="content">
			<!-- <web-view :webview-styles="webviewStyles" :update-title=false>
			</web-view> -->

		</view>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				webviewStyles: {
					progress: false
				},
				wv: null,
				first: null,
				titleText: null
			}
		},
		onBackPress(a) {
			var _this = this;
			_this.wv.canBack(function(e) {
				console.log(e);
				if (e.canBack) {
					_this.wv.back()
				} else {
					if (_this.first == null) {
						_this.first = new Date().getTime();
						uni.showToast({
							title: "再按一次退出应用程序",
							duration: 3000,
							icon: 'none',
							position: 'bottom'
						});
						setTimeout(function() {
							_this.first = null;
						}, 3000);
					} else {
						if (new Date().getTime() - _this.first < 3000) {
							plus.runtime.quit();
						}
					}
				}
			})
			return true;
		},
		onLoad() {
			uni.hideTabBar()
			 this.infoHtml()
			 setTimeout(this.showHtml, 4000)
			 
		},
		onNavigationBarButtonTap(e) {
			uni.navigateBack()
		},
		methods: {
			showHtml(){
			const currentWebview = this.$scope.$getAppWebview();
			currentWebview.append(this.wv);	
			},
			infoHtml() {
				// #ifdef APP-PLUS
				const url = 'https://mdnjnwe283-3221.yzu5zg-7.v.saassns.com';
				const wv = plus.webview.create("", "custom-webview", {
					plusrequire: "none", //禁止远程网页使用plus的API，  
					'uni-app': 'none', //不加载uni-app渲染层框架 
					statusbar: {
						background: "transparent"
					},
					
		
					titleNView:  
					{
						titleText: this.titleText,
						// titleText:"",
						// titleIcon:"./static/logo.png",
						backgroundColor: "transparent",

					}
				})


				wv.loadURL(url);
				
				
				this.wv = wv

				// #endif  

			}

		},
		watch: {
			titleText(nev, old) {
				console.log(nev)
			}
		}
	}
</script>

<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: red;

	}

	.backImg {
		background-color: red;
		width: 100vw;
		height: 100vh;
	}


	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>