H5調用手機發短信和打電話功能

前言

本來感覺用H5寫調用電話撥號功能和發送短信功能會很不好寫,後來通過實踐得出,其實很簡單的。
首先簡單介紹一下業務功能,就是顯示通訊錄中的人員用戶信息,然後分別點擊相應的按鈕來發送短信和撥通電話
在這裏插入圖片描述

正文

來看看 HTML的關鍵代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>公司通訊錄</title>
		//一定要加的引用
		<meta name="apple-mobile-web-app-capable" content="yes">
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #000000;font-size: 25px;"></a>
			<h1 class="mui-title">個人信息</h1>
		</header>
		<div class="mui-page-content" >
				<div class="mui-scroll" style="background-color: #FFFFFF;">
					<div class="mui-button-row" style="margin-bottom: 40%;margin-top: 10%;">
					//發消息的關鍵代碼href 個id 會在js中寫出來
						<a href="#" id="urls" > 
							<i class="iconfont icon-Group- " style="font-size: 18px;"></i>&nbsp;&nbsp;發消息&nbsp;&nbsp;</a>
						//撥號的關鍵代碼href 個id 會在js中寫出來
						<a href="#" id="url" > 
						<i class="iconfont icon-dianhua iconback " style="font-size: 18px;"></i>&nbsp;&nbsp;打電話
				</div>
			</div>
		</div>
	</body>
</html>
			//撥號的寫法
			document.getElementById("url").href = 'tel:' +具體的電話號碼;
			//發短信的寫法
			document.getElementById("urls").href = 'sms:' + 具體的電話號碼;

代碼精煉
<head>裏面加上:

<meta name="format-detection" content="telephone=yes"/>

需要撥打電話的地方:

<a href="tel:400-0000-688">400-0000-688</a>

發短信:

<a href="sms:18688888888">發短信</a>

結束

其實好多功能都不是特別難,只是不熟悉,軟件開發就是不斷的熟悉的過程。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章