HTML5呼叫手機發簡訊和打電話功能

佚名發表於2020-05-21

文章主要介紹了HTML5呼叫手機發簡訊和打電話功能,本文通過例項程式碼給大家介紹的非常詳細,需要的朋友可以參考下

前言

本來感覺用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>

結束

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

到此這篇關於HTML5呼叫手機發簡訊和打電話功能的文章就介紹到這了,更多相關html5 發簡訊打電話內容請搜尋指令碼之家以前的文章或繼續瀏覽下面的相關文章

相關文章