さまざまなプラットフォームで通話を行うユニアプリの例

シナリオ

アプリで電話をかけるのは比較的一般的なアプリケーション シナリオですが、記事を検索すると、ブログ投稿のほとんどが大学からのものであることがわかりました。アプリ公式 Web サイトのコピー、コピー

uni-app が提供する呼び出しは、ダイヤル インターフェイスの呼び出しに役立つだけであり、直接呼び出しを行うことはできません。Android ネイティブ API は使用できますが、IOS は権限の問題により使用できません

したがって、判断できます。Android の場合は、クリックして電話に直接ダイヤルします。他のプラットフォームの場合は、uni-app のデフォルトの通話ダイヤル インターフェイスを使用します。

実装メカニズム

• HTML5 plus.device.dial によって提供されるインターフェース この SDK を使用するには、パッケージの導入が必要です
• # uni-app uni.makePhoneCall によって外部的に提供されるインターフェース
• IOS と Andriod はネイティブ インターフェイスを提供します - いいえ ネイティブ開発に慣れていない場合は、困難が伴います。
• モバイル ブラウザの H5 ページ

  17a6ad0158cc005be3bcb5e93cefee42100865db79b134e9f6b82c0b36e0489ee08ed复制代码

これ以上ナンセンスではありません。コードの説明に進んでください。 以下は、条件付きコンパイルによる各プラットフォームのコード インターフェイスの実装です。

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 &#39;./telphone.js&#39;
  export default {
    methods: {
      telphone() {
        // 通过传递电话参数，调用不同平台拨打电话的功能
        telphone("10086")
      }
    }
  }
</script>复制代码

読者の注意をそらすことを避けるため、ここではインターフェイスの問題には注意を払いません。 js での実装に焦点を当てます

さまざまなシナリオをサポートするには、条件付きコンパイルを使用する必要があることに注意してください。上記はアプリ側 (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
}复制代码

Notes

• 条件付きコンパイル、VConsole を使用する場合、条件付きコンパイルを使用しない場合、アプリ側でエラーが報告されます
• if 判定には import 文を書かないように注意してください 三眼動作中にエラーが報告されます ES6 モジュールロードの仕組みを理解するには
• uni-app が提供するインターフェースを使用して、それがどうかを判断してくださいアプリプラットフォーム (IOS または Andriod) 通常のブラウザと WeChat ブラウザを区別するにはどうすればよいですか? 条件付きコンパイルに依存します
• uni-app が提供する API 実装であっても、Android SDK であっても、電話を切った後も、アプリのインターフェイスにコールバックされます

• plus.device.dial には、対応する SDK を導入する必要があります。実際には、これを決定するには条件付きコンパイルが必要です。現在の環境は以上です 実際はvconsoleの導入と同じです

##その他の記事はuni-app欄をご覧ください！

以上がさまざまなプラットフォームで通話を行うユニアプリの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。