Maison > interface Web > uni-app > Exemples d'applications uni effectuant des appels sur différentes plateformes

Exemples d'applications uni effectuant des appels sur différentes plateformes

coldplay.xixi
Libérer: 2020-09-27 17:16:09
avant
4593 Les gens l'ont consulté

Exemples d'applications uni effectuant des appels sur différentes plateformes

Scénario

Passer des appels dans l'application est un scénario d'application relativement courant, mais en recherchant des articles, nous avons constaté que la plupart des articles de blog proviennent de l'université. copie du site officiel de l'application, copie

L'appel fourni par uni-app vous aide uniquement à appeler l'interface de numérotation et ne peut pas passer d'appels directs. L'API native d'Android peut être utilisée, mais IOS ne le peut pas en raison de problèmes d'autorisation.

Donc, nous pouvons porter un jugement. S'il s'agit d'Android, cliquez pour passer l'appel directement. Pour les autres plates-formes, utilisez l'interface de numérotation d'appel par défaut d'uni-app

mécanisme de mise en œuvre

    L'interface fournie par HTML5+ plus.device.dial Pour utiliser ce SDK, vous devez introduire le package
  • L'interface fournie en externe par uni-app uni.makePhoneCall
  • IOS et Andriod fournissent des interfaces natives - non Si vous êtes familier avec le développement natif, vous rencontrerez des difficultés
  • sur la page H5 du navigateur mobile
<a href="tel: 10086">10086</a>复制代码
Copier après la connexion
  • Sans plus attendre, passons aller directement à la description du code Ce qui suit est implémenté via une compilation conditionnelle + chaque interface de code de plate-forme

    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>复制代码
    Copier après la connexion

    Nous ne prêtons pas attention aux problèmes d'interface ici pour éviter de distraire l'attention des lecteurs, en nous concentrant sur la mise en œuvre en js

    Veuillez noter que la compilation conditionnelle doit être utilisée pour prendre en charge différents scénarios. Ce qui précède est le côté application (IOS et Andriod), et ce qui suit est le h5 ordinaire

    telphone.js<. 🎜>
    //#ifdef H5
    import VConsole from &#39;vconsole&#39;
    
    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(&#39;微信浏览器&#39;)
        } else {
            // 普通浏览器 
        }
        //#endif
    
        //#ifdef APP-PLUS
        // app环境
        switch (platform) {
            case &#39;android&#39;:
                // 导入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 &#39;ios&#39;:
                // 使用uni-app提供的借口
                uni.makePhoneCall({
                    phoneNumber: phone
                })
                break;
            default:
                // 调试器工具
        }
        //#endif
    }复制代码
    Copier après la connexion

    Notes

    Compilation conditionnelle, lorsque nous utilisons VConsole, si nous n'utilisons pas la compilation conditionnelle, une erreur sera signalée côté App
    • Assurez-vous de ne pas pour écrire l'instruction d'importation dans le if Pendant le jugement ou l'opération ternaire, une erreur sera signalée. Vous devez comprendre le mécanisme de chargement du module ES6
    • Utilisez l'interface fournie par uni-app pour juger la plate-forme App (. IOS ou Andriod). Comment faire la distinction entre les navigateurs ordinaires et les navigateurs WeChat ? Ou s'appuyer sur la compilation conditionnelle
    • Qu'il s'agisse de l'implémentation de l'API fournie par uni-app ou du SDK Android, vous quitterez l'application pour passez un appel. Après avoir raccroché, vous serez toujours rappelé vers l'interface de l'application
    • plus.device.dial doit introduire le SDK correspondant. Cela nécessite en fait une compilation conditionnelle pour déterminer l'environnement actuel. Ce qui précède suffit. En fait, cela revient à présenter vconsole
    Pour d'autres articles, veuillez visiter la colonne
    uni-app

     !

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

  • Étiquettes associées:
    source:juejin.im
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal