HTML5實現(xiàn)一鍵撥號，一鍵發(fā)短信以及上傳頭像等問題都是比較常見的場景，近期在做移動端項目的時候遇到阻撓，通過查找資料解決了問題；

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

HTML5實現(xiàn)一鍵撥號：

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

HTML5實現(xiàn)一鍵發(fā)短信：

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

是的，你沒看錯，在HTML5中只需要通過a標(biāo)簽就可以直接實現(xiàn)一鍵撥號和一鍵發(fā)短信的功能，當(dāng)然我們在項目中的需求一般都是要求動態(tài)的獲取不同的手機(jī)號，需要動態(tài)的更改手機(jī)號的時候只需要雙向綁定去動態(tài)的拼接即可，微信內(nèi)置瀏覽器也是支持的，所以在開發(fā)webapp的時候不用太擔(dān)心微信內(nèi)置瀏覽器兼容性問題；

上傳、更改頭像功能也是我們經(jīng)常會碰到的常用功能，我們知道可以直接用<input type="file>標(biāo)簽調(diào)用選擇文件對話框，但是input輸入框原生樣式很丑，我們可以給輸入框添加樣式display：none來解決；

然后input輸入框上傳文件的時候會有兼容性問題，自帶瀏覽器可以正常運(yùn)行，一般的webapp是運(yùn)行在微信內(nèi)置瀏覽器中的，像<input id="photo" type="file" accept="image/jpeg, image/x-png, image/gif" capture="camera">這一段代碼在微信內(nèi)置瀏覽器中是不運(yùn)行不觸發(fā)的，我們可以這樣修改：

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

這樣，我們只需要修改accept屬性就可以在微信內(nèi)置瀏覽器觸發(fā)了；所以我們在做項目的時候需要問清楚是在微信上線還是在哪再決定選擇哪個兼容方式；

上傳頭像的時候一般我們是需要跟后臺進(jìn)行數(shù)據(jù)交互的，今天在調(diào)用上傳頭像接口的時候，參數(shù)前臺顯示傳輸以base64格式進(jìn)行編碼傳輸，后臺說沒有收到，但是我們這邊是看到正常的。通過查閱資料，我們最終把代碼修改成了這樣：

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，然后參數(shù)以FormData對象來進(jìn)行傳輸，然后給FormData添加屬性和值，icon就是我們的圖片頭像，我們直接傳輸url后臺是收不到的，我們需要給img標(biāo)簽綁定ref="hiddenInput"然后通過this.$refs.hiddenInput.files[0]來作為值傳輸，這樣傳輸后臺是能夠收到的；我們獲取到的this.$refs.hiddenInput.files[0]通過控制臺輸出，我們可以看到：

image.png

　　好了，這篇博客就到這里了，今天的博客是屬于日常開發(fā)中比較常見的場景的知識點(diǎn)，還有什么疑問，大家可以一起留言一起討論！