HBuilder快速搭建H5+应用
上一次尝试了下H5+开发了跨平台app，可以发现的事利用H5+开发app的话，其实就是利用h5将页面给做出来，然后借助H5+的sdk和原生系统做交互，而我们开发人员只需要关系具体的页面功能开发既可。
然而使用传统的H5 Html的方式显然生产力已经跟不上了，于是这次就尝试着使用VUE。
基本思路如下。

1.利用vue开发app的页面
2.然后将页面构建打不后移入h5+应用，替换原来的html页面内容
3.利用hbuilder打包app

有了上面的几部基本思路了，下面就来正式开始开发

1.创建vue工程

这里我用的是基于mint-ui的vue工程，大家也可以使用自己的喜欢的ui框架，创建好了如下
在这里插入图片描述
这里就默认大家已经熟悉vue框架了，着重讲如何整合h5+

2.然后利用hbuilder创建h5+应用

在这里插入图片描述
不熟悉创建的可以看 上一篇HBuilder快速搭建H5+应用
下面就是我们整合时需要重点关注的几个地方了。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>LDY</title>
		<script type="text/javascript" src="js/update.js"></script>
		<script type="text/javascript" charset="utf-8">
		//取消浏览器的所有事件，使得active的样式在手机上正常生效
		document.addEventListener('touchstart',function(){
		    return false;
		},true);
		// 禁止选择
		document.oncontextmenu=function(){
			return false;
		};
		// H5 plus事件处理
		var as='pop-in';// 默认窗口动画
		function plusReady(){
			// 隐藏滚动条
			plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
			// Android处理返回键
			plus.key.addEventListener('backbutton',function(){
				('iOS'==plus.os.name)?plus.nativeUI.confirm('确认退出？', function(e){
					if(e.index>0){
						plus.runtime.quit();
					}
				}, 'LDY, ['取消','确定']):(confirm('确认退出？')&&plus.runtime.quit());
			},false);
			compatibleAdjust();
		}
		
		if(window.plus){
			plusReady();
		}else{
			document.addEventListener('plusready',plusReady,false);
		}
		// DOMContentLoaded事件处理
		var _domReady=false;
		document.addEventListener('DOMContentLoaded',function(){
			_domReady=true;
			compatibleAdjust();
		},false);
		// 兼容性样式调整
		var _adjust=false;
		function compatibleAdjust(){
	if(_adjust||!window.plus||!_domReady){
		return;
	}
	_adjust=true;
	// iOS平台特效
	if('iOS'==plus.os.name){
		document.getElementById('content').className='scontent';	// 使用div的滚动条
		if(navigator.userAgent.indexOf('StreamApp')>=0){	// 在流应用模式下显示返回按钮
			document.getElementById('back').style.visibility='visible';
		}
	}
	</script>
//省略
	<script type="text/javascript" src="js/immersed.js" ></script>
	<script type="text/javascript" src="js/shortcut.js" ></script>
</html>

在index中主要两个点

1.引入js
<script type="text/javascript" src="js/immersed.js" ></script>
<script type="text/javascript" src="js/shortcut.js" ></script>
<script type="text/javascript" src="js/update.js"></script>
2.h5+初始化
//取消浏览器的所有事件，使得active的样式在手机上正常生效
document.addEventListener('touchstart',function(){
    return false;
},true);
// 禁止选择
document.oncontextmenu=function(){
	return false;
};
// H5 plus事件处理
var as='pop-in';// 默认窗口动画
function plusReady(){
	// 隐藏滚动条
	plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
	// Android处理返回键
	plus.key.addEventListener('backbutton',function(){
		('iOS'==plus.os.name)?plus.nativeUI.confirm('确认退出？', function(e){
			if(e.index>0){
				plus.runtime.quit();
			}
		}, 'LDY, ['取消','确定']):(confirm('确认退出？')&&plus.runtime.quit());
	},false);
	compatibleAdjust();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready',plusReady,false);
}
// DOMContentLoaded事件处理
var _domReady=false;
document.addEventListener('DOMContentLoaded',function(){
	_domReady=true;
	compatibleAdjust();
},false);
// 兼容性样式调整
var _adjust=false;
function compatibleAdjust(){
	if(_adjust||!window.plus||!_domReady){
		return;
	}
	_adjust=true;
	// iOS平台特效
	if('iOS'==plus.os.name){
		document.getElementById('content').className='scontent';	// 使用div的滚动条
		if(navigator.userAgent.indexOf('StreamApp')>=0){	// 在流应用模式下显示返回按钮
			document.getElementById('back').style.visibility='visible';
		}
	}

这两个都是要迁移过去的，由于初始化代码是es5的语法，迁移过去后需要注意一些es6的语法和vue的语法，

3.将h5+整合到vue工程中

首先将h5应用中的js文件夹拷贝到vue工程中static文件夹中

然后就是在vue index.html中引入这些js,其中common.js，immersed.js是必须的

引入之后我们启动vue是还要做一个重要的是，初始化h5+api
这个vue工程的入口是App.vue所以初始化工作就在App.vue中进行，将初始化代码迁移后如下

 <template>
	<router-view></router-view>
</template>
<script>
export default {
	data(){
		return{
			// 兼容性样式调整
			_adjust : false,
			// H5 plus事件处理
			as : 'pop-in',// 默认窗口动画
			// DOMContentLoaded事件处理
			_domReady : false
		}
	},
	mounted() {
             //初始化h5+
		this.initH5()
	},
	methods: {
		compatibleAdjust(){
				if(this._adjust||!window.plus||!this._domReady){
					return;
				}
				this._adjust=true;
				// iOS平台特效
				if('iOS'==plus.os.name){
					document.getElementById('content').className='scontent';	// 使用div的滚动条
					if(navigator.userAgent.indexOf('StreamApp')>=0){	// 在流应用模式下显示返回按钮
						document.getElementById('back').style.visibility='visible';
					}
				}
				// 关闭启动界面
				plus.navigator.setStatusBarBackground('#D74B28');
				setTimeout(function(){
					plus.navigator.closeSplashscreen();
				},200);
		},
		plusReady(){
				var _this=this;
				// 隐藏滚动条
				plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
				// Android处理返回键
				plus.key.addEventListener('backbutton',() => {
					_this.back();
				},false);
				this.compatibleAdjust();
				console.log("plusReady")
		},
		initH5(){
			var _this=this;
			document.addEventListener('touchstart',() => {
		    	return false;
			},true);
			// 禁止选择
			document.oncontextmenu=function(){
				return false;
			};
			if(window.plus){
				this.plusReady();
			}else{
				document.addEventListener('plusready',this.plusReady(),false);
			}
			document.addEventListener('DOMContentLoaded',() => {
				_this._domReady=true;
				_this.compatibleAdjust();
			},false);
		},
		back() {
				console.log(this.$route.path)
				// 增加项目中的主页用来跳转到微服务页面
				if(this.$route.path == '/mine') {
					this.close();
				} else {
					this.$router.go(-1);
				}
			},
		close() {
				try {
					('iOS'==plus.os.name)?plus.nativeUI.confirm('确认退出？', (e) => {
						if(e.index>0){
							plus.runtime.quit();
						}
					}, '懒的鱼', ['取消','确定']):(confirm('确认退出？')&&plus.runtime.quit());
				} catch(e) {
					console.log('返回插件调用失败');
				}
			},
	}
}	
</script>

可以看到 h5+的核心的就是和这个plus对象，后面所有的app于原生系统的交互都通它进行。
完成上面两步，就是算是完成了一半了，接下来就是开发vue页面了，

4.开发app相关的功能

这里我以开发语音识别这个功能为例子
首先，先看下h5+中原始html中是怎么使用的
进入 h5+项目的plus目录，找到speech.html

找到下面这段代码

这个就调用语音识别的api了，api就是这个plus.speech.startRecognize，具体的一些api可以去官网查看下
移入vue中如下，基本上是原封不动拷贝过来

startRecognize() {
if(plus.os.name=='Android'&&navigator.userAgent.indexOf('StreamApp')>0){
	plus.nativeUI.toast('当前环境暂不支持语音识别插件');
	return;
}
var options = {};
options.engine = 'iFly';
//options.punctuation = false;	// 是否需要标点符号 
console.log( "开始语音识别：" );
plus.speech.startRecognize( options, function ( s ) {
	//语音识别成功
}, function ( e ) {
	console.log( "语音识别失败："+e.message );
} );
},

晚上上述操作后，具体开发小伙伴们就像是开发普通的vue工程那样即可

5.构建vue工程，将vue页面构建好，移入h5+应用中

npm run build 构建好，我这是构建在www文件夹中
在这里插入图片描述
将这几个文件拷贝到h5+项目中，将原来的index.html替换掉
在这里插入图片描述
然后利用hbuild打包这个h5app就可以了。构建调试有什么疑问可以看下HBuilder快速搭建H5+应用
当然复制来复制去也挺麻烦的，可以写个脚本

vueAuto1.bat

echo 开始打包
npm run build

vueAuto2.bat

echo 清空文件夹 %cd%\ldy_hb\static
rd /s %cd%\ldy_hb\static
mkdir %cd%\ldy_hb\static
echo 开始复制 %cd%\www\static 到 %cd%\ldy_hb\static
xcopy /y /w /g /e %cd%\www\static %cd%\ldy_hb\static
echo 开始复制  %cd%\www\index.html 到  %cd%\ldy_hb
copy /y %cd%\www\index.html %cd%\ldy_hb
echo 复制结束

这部分的我已经提交到码云上去了，感兴趣可以下载下来玩玩
代码下载
按照这个思路，react，angular …都可以来整合h5+开发。

Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。

avatar 华为开发者空间
cover

华为云开源项目Sermant正式成为CNCF官方项目

avatar 华为开发者空间
cover

AI大模型高效开发神器来了 ，解读ModelArts 8大能力

avatar 华为开发者空间