HTML5實現一鍵撥號，一鍵發簡訊以及上傳頭像等問題都是比較常見的場景，近期在做移動端專案的時候遇到阻撓，通過查詢資料解決了問題；

　　廢話不多說，直接上案例程式碼；

　　HTML5實現一鍵撥號：

<a href="tel:151********" class="phone">

　　HTML5實現一鍵發簡訊：

<a href="sms:151********" class="message">

　　是的，你沒看錯，在HTML5中只需要通過a標籤就可以直接實現一鍵撥號和一鍵發簡訊的功能，當然我們在專案中的需求一般都是要求動態的獲取不同的手機號，需要動態的更改手機號的時候只需要雙向繫結去動態的拼接即可，微信內建瀏覽器也是支援的，所以在開發webapp的時候不用太擔心微信內建瀏覽器相容性問題；

　　上傳、更改頭像功能也是我們經常會碰到的常用功能，我們知道可以直接用<input type="file>標籤呼叫選擇檔案對話方塊，但是input輸入框原生樣式很醜，我們可以給輸入框新增樣式display：none來解決；

　　然後input輸入框上傳檔案的時候會有相容性問題，自帶瀏覽器可以正常執行，一般的webapp是執行在微信內建瀏覽器中的，像<input id="photo" type="file" accept="image/jpeg, image/x-png, image/gif" capture="camera">這一段程式碼在微信內建瀏覽器中是不執行不觸發的，我們可以這樣修改：

<input id="photo" type="file" accept="image/*" capture="camera">

　　這樣，我們只需要修改accept屬性就可以在微信內建瀏覽器觸發了；所以我們在做專案的時候需要問清楚是在微信上線還是在哪再決定選擇哪個相容方式；

　　上傳頭像的時候一般我們是需要跟後臺進行資料互動的，今天在呼叫上傳頭像介面的時候，引數前臺顯示傳輸以base64格式進行編碼傳輸，後臺說沒有收到，但是我們這邊是看到正常的。通過查閱資料，我們最終把程式碼修改成了這樣：

let formData = new FormData()
        formData.append('name', this.name)
        formData.append('idCard', this.idcard)
        formData.append('phone', this.phone)
        formData.append('icon', this.$refs.hiddenInput.files[0])
        formData.append('payzfb', this.aliPay)
        formData.append('tgm',this.qrCode)
        console.log(this.$refs.hiddenInput.files[0]);

　　首先我們這種前臺圖片傳輸給後臺的時候axios的方法需要是post，然後引數以FormData物件來進行傳輸，然後給FormData新增屬性和值，icon就是我們的圖片頭像，我們直接傳輸url後臺是收不到的，我們需要給img標籤繫結ref="hiddenInput"然後通過this.$refs.hiddenInput.files[0]來作為值傳輸，這樣傳輸後臺是能夠收到的；我們獲取到的this.$refs.hiddenInput.files[0]通過控制檯輸出，我們可以看到：

　　好了，這篇部落格就到這裡了，今天的部落格是屬於日常開發中比較常見的場景的知識點，還有什麼疑問，大家可以一起留言一起討