移动端HTML5的api使用

最新推荐文章于 2023-10-10 09:07:24 发布

VIP文章菜鸟一个abc122619

最新推荐文章于 2023-10-10 09:07:24 发布

阅读量422

点赞数

分类专栏： uniapp 多端文章标签： html5

本文链接：https://blog.csdn.net/weixin_43465609/article/details/119926523

版权

在这里插入图片描述

1.语音识别

<footer>
	<i class="iconfont icon-yuyinhecheng" id="speech"></i>
	<ul>
		<li>
			<i class="iconfont icon-wenhao"></i>
		</li>
		<li>
			<span>语音查找</span>
		</li>
		<li>
			<i class="iconfont icon-search"></i>
		</li>
	</ul>
	
</footer>
<script type="text/javascript" charset="utf-8">
 mui.init();
 mui.plusReady(function () {
 	//设置状态栏颜色
     plus.navigator.setStatusBarBackground('#F2F2F0');
 	//触发语音识别
 	mui('footer').on('tap','#speech',function(){
 		//执行语音识别
 		fStartRecognize();
 	})
 	//封装语音识别函数
 	function fStartRecognize(){
 		var options = {
 			engine:'baidu',
			punctuation:false
 		}
 		plus.speech.startRecognize( options, function(data){
 			mui.openWindow({
 				url:'detail.html',
 				id:'detail',
 				extras:{
 					title:encodeURI(data)
 				},
 				show:{
 				    autoShow:true
 				},
 				waiting:{
 					autoShow:true,
 					title:'正在加载...'
 				}
 			})
 		}, function(){
 			mui.toast('语音识别失败',{ duration:'long', type:'div' })
 		});
 		setTimeout(fStopRecognize,10000);
 	}
 	//停止语音识别
 	function fStopRecognize(){
 		plus.speech.stopRecognize();
 	}
 	
 })
 </script>

2.地理位置

<header>
	<label>当前的位置:</label><p id="address"></p>
</header>
<script type="text/javascript">
mui.init()
mui.plusReady(function () {
	//获取地理位置
    plus.geolocation.getCurrentPosition(function(data){
		var address  = data.address;
		var addresss = document.getElementById("address")
		addresss.innerHTML =  address.city + address.district + address.street + address.streetNum +address.poiName
	}, function(){
		mui.toast('获