記錄--uni-app在不同平臺下撥打電話

来源:https://www.cnblogs.com/smileZAZ/archive/2022/11/16/16896723.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 場景 在App中撥打電話是一個比較常見的應用場景,但是我們通過搜索文章,發現,大部分的博文都是uni-app官網的copy, copy uni-app 提供的打電話,只是幫你把撥號界面呼出來,並不能直接撥打, 安卓原生API可以,IOS因 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

場景

在App中撥打電話是一個比較常見的應用場景,但是我們通過搜索文章,發現,大部分的博文都是uni-app官網的copy, copy

uni-app 提供的打電話,只是幫你把撥號界面呼出來,並不能直接撥打, 安卓原生API可以,IOS因為許可權問題,不行

那麼,我們可以做個判斷,如果是安卓,點擊了 直接就把電話撥出來,其他的平臺,使用uni-app預設的喚起撥號界面

實現機制

  • HTML5+ 提供的介面 plus.device.dial 這個SDK的使用,是需要引入包的
  • uni-app 對外提供的介面 uni.makePhoneCall
  • IOS和 Andriod 提供原生的介面- 不熟悉原生開發,會有困難
  • 在移動端瀏覽器 H5頁面
<a href="tel: 10086">10086</a>

廢話不多說,直接上代碼說明 下麵是通過 條件編譯+ 各平臺代碼介面實現

testDevice.vue

<view>
  <!-- #ifdef APP-PLUS -->
  <button @tap="telphone">撥打電話</button>
  <!-- #endif -->

  <!-- #ifdef H5 -->
  <a href="tel:10086">10086-h5平臺下</a>
  <!-- #endif -->
</view>

<script>
  // 對不同的平臺有一點區分
  import telphone from './telphone.js'
  export default {
    methods: {
      telphone() {
        // 通過傳遞電話參數,調用不同平臺撥打電話的功能
        telphone("10086")
      }
    }
  }
</script>

我們這裡 不關註界面問題,避免分散各位看官老爺的關註點,重點看js中的實現

請註意,一定使用 條件編譯,可以支持不同的場景, 上面的是 App端(IOS和Andriod), 下麵是普通的h5

telphone.js

//#ifdef H5
import VConsole from 'vconsole'

new VConsole()
//#endif

export default (phone) => {
	// 獲取設備平臺
	let platform = uni.getSystemInfoSync().platform
 
	//#ifdef H5
	// h5環境--瀏覽器
	let ua = navigator.userAgent.toLowerCase()
	// 就要判斷 是微信內置瀏覽器還是用戶的普通瀏覽器

	if (ua.match(/MicroMessenger/i) == "micromessenger") {
		// 微信瀏覽器
		console.log('微信瀏覽器')
	} else {
		// 普通瀏覽器 
	}
	//#endif

	//#ifdef APP-PLUS
	// app環境
	switch (platform) {
		case 'android':
			// 導入Activity、Intent類
			var Intent = plus.android.importClass("android.content.Intent");
			var Uri = plus.android.importClass("android.net.Uri");
			// 獲取主Activity對象的實例  
			var main = plus.android.runtimeMainActivity();
			// 創建Intent  
			var uri = Uri.parse("tel:" + phone); // 這裡可修改電話號碼  
			var call = new Intent("android.intent.action.CALL", uri);
			// 調用startActivity方法撥打電話  
			main.startActivity(call);
			break;
		case 'ios':
			// 使用uni-app提供的藉口
			uni.makePhoneCall({
				phoneNumber: phone
			})
			break;
		default:
			// 調試器工具
	}
	//#endif
}

註意事項

  • 條件編譯, 我們在使用 VConsole 的時候,如果不使用條件編譯,在App端是會報錯的
  • 一定不能將import語句 寫在if判斷或者 三目運算中, 會報錯, 要理解ES6模塊載入的機制
  • 通過uni-app提供的介面,判斷是App平臺(IOS或者Andriod) ,怎麼區分普通瀏覽器和微信瀏覽器還是依賴條件編譯
  • 上述的無論是uni-app提供的API實現還是,Andriod的 SDK 都是跳出 App撥打電話,掛斷以後,還是會調回App界面
  • plus.device.dial 需要引入對應的SDK, 這個其實有是要通過 條件編譯,判斷當前所處的環境,上面的已經夠用,其實和引入 vconsole 是一樣的道理

本文轉載於:

https://juejin.cn/post/6856775720921513992

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ​摘要:賬本資料庫融合了區塊鏈思想,將用戶操作記錄至兩種歷史表中:用戶歷史表和全局區塊表。 本文分享自華為雲社區《openGauss賬本資料庫,你不知道的那些事兒》,作者:Gauss松鼠會。 賬本資料庫融合了區塊鏈思想,將用戶操作記錄至兩種歷史表中:用戶歷史表和全局區塊表。當用戶創建防篡改用戶表時, ...
  • 引子 在使用events_statements_current的過程中發現,同一線程在同一時刻,可能有多條記錄,與直觀感覺不太一樣,於是跟蹤了一下內部實現,有了本文。 STATEMENT STACK的定義 STATEMENT STACK 是events_statements_current表被後用於 ...
  • 對於開發人員而言,資料庫的增刪改查操作才是最常使用的功能,學習 MongoDB 時還需對這些功能熟記於心才行啊。我就在這裡做一個簡單的備忘,多看官方文檔才是正道。 ...
  • 1.從官網下載 官網下載對應版本 https://www.elastic.co/cn/downloads/past-releases#kibana 2.解壓縮 tar -xvf kibana-7.15.2-linux-x86_64.tar.gz 3.修改配置文件 server.port: 5601 ...
  • 如今,視頻正在以一種前所未有的方式滲入日常生活,是當下人們記錄生活最熱門的方式。所以,用戶對視頻的畫質要求越來越高,App想要吸引更多的用戶,擁有視頻畫質新技術的強力支撐很關鍵。 HDR(High-Dynamic Range)就是一種提高影像亮度和對比度的處理技術。它可以將每個暗部的細節變亮,增加對 ...
  • 關於Intent.setDataAndType參數問題 install取設置屬於和類型,數據就是獲取到的uri,更具文件類型不同,type參數也不相同,具體參考下表 {尾碼名,MIME類型} ​ {".3gp", "video/3gpp"}, ​ {".apk", "application/vnd. ...
  • android studio 升級 Android Studio Dolphin | 2021.3.1 Patch 1後,xml佈局預覽界面報錯 一開始以為是那些警告導致的,有很多黃色的xml警告,比如命名的名字不是英文,或者設置了各種顏色值警告,或者系統要求你添加 contentDescripti ...
  • 滑動衝突 有時候 viewpager 嵌套 webview 後,左右滑動衝突,直接消費或者處理攔截導致上下不能滑動,所以需要根據滑動情況判斷處理,只在上下滑動時判斷事件交給子view class ScrollWebView(context: Context, attrs: AttributeSet) ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...