다양한 플랫폼에서 호출을 수행하는 uni-app의 예

Scenario

앱에서 전화를 거는 것은 비교적 일반적인 응용 시나리오이지만, 기사를 검색해 보니 대부분의 블로그 게시물이 uni-app 공식 웹사이트, copy

uni-app에서 제공하는 복사본이라는 것을 알게 되었습니다. 전화는 전화걸기 인터페이스만 불러올 수 있으며 직접 통화는 할 수 없습니다. Android 기본 API를 사용할 수 있지만 IOS는 권한 문제로 인해 사용할 수 없습니다

그래서 Android인지 판단할 수 있습니다. 다른 플랫폼의 경우 uni-app

구현 메커니즘

• HTML5+에서 제공하는 인터페이스 plus.device.dial의 기본 전화 접속 인터페이스를 사용하세요. package
• 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

• 조건부 컴파일입니다. 컴파일은 앱 측에서 오류를 보고합니다
• if 판단이나 삼항 연산에 import 문을 작성하지 마세요. 그렇지 않으면 오류가 보고됩니다. ES6 모듈 로딩 메커니즘을 이해해야 합니다.
• uni에서 제공하는 인터페이스를 사용하세요. -app 앱 플랫폼(IOS인지 Andriod)인지 판단하는 방법, 일반 브라우저와 WeChat 브라우저를 구별하는 방법 또는 조건부 컴파일에 의존하는 방법
• 위에서 uni-app에서 제공하는 API 구현인지 Andriod의 SDK인지는 다음과 같습니다. 전화를 끊은 후에도 앱 인터페이스

• plus.device.dial로 다시 호출됩니다. 이를 위해서는 실제로 해당 SDK를 도입해야 합니다. 사실은 vconsole을 소개하는 것과 똑같습니다

다른 글은 uni-app 칼럼을 참고해주세요!

위 내용은 다양한 플랫폼에서 호출을 수행하는 uni-app의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!