Examples of uni-app making calls on different platforms

Scenario

Making calls in the App is a relatively common application scenario, but by searching for articles, we found that most of the blog posts are from the uni-app official website copy, copy

The call provided by uni-app only helps you to call out the dialing interface, and cannot make direct calls. The Android native API can be used, but IOS cannot because of permission issues

So , we can make a judgment. If it is Android, click to dial the phone directly. For other platforms, use the default call dialing interface of uni-app

Implementation mechanism

• The interface provided by HTML5 plus.device.dial The use of this SDK requires the introduction of the package
• The interface provided externally by uni-app uni.makePhoneCall
• IOS and Andriod provide native interfaces - no Familiar with native development, there will be difficulties
• H5 page in mobile browser

  17a6ad0158cc005be3bcb5e93cefee42100865db79b134e9f6b82c0b36e0489ee08ed复制代码

No more nonsense, just go to the code description The following is the implementation of the code interface of each platform through conditional compilation

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>复制代码

We do not pay attention to interface issues here to avoid distracting the attention of the readers, and focus on the implementation in js

Please note that conditional compilation must be used to support different scenarios. The above is the App side (IOS and Andriod), and the following is ordinary 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

• Conditional compilation, when we use VConsole, if we do not use conditional compilation, an error will be reported on the App side
• Be sure not to write the import statement in the if judgment Or during trinocular operation, an error will be reported. To understand the mechanism of ES6 module loading
• Use the interface provided by uni-app to determine whether it is the App platform (IOS or Andriod). How to distinguish between ordinary browsers and WeChat browsers? Dependent on conditional compilation
• Whether it is the API implementation provided by uni-app or the Android SDK, you will jump out of the App to make a call. After hanging up, you will still be called back to the App interface

• plus.device.dial needs to introduce the corresponding SDK. This actually requires conditional compilation to determine the current environment. The above is enough. In fact, it is the same as introducing vconsole

For other articles, please visit the uni-app column!

The above is the detailed content of Examples of uni-app making calls on different platforms. For more information, please follow other related articles on the PHP Chinese website!