H5+ app vue调用第三方应用，如果没有安装跳转到应用市场详情

最新推荐文章于 2023-02-15 17:06:03 发布

原创最新推荐文章于 2023-02-15 17:06:03 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

H5+ APP 开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在H5+ App中使用Vue实现调用第三方应用，如高德地图，并在未安装时跳转到应用市场。详细步骤包括检查应用安装状态、区分Android和iOS系统、调用应用或打开应用商店。还提供了相关干货网址供参考。

1.调用第三方应用，先判断是否安装

plus.runtime.isApplicationExist({pname:pname,action:action})

pname是安卓应用程序包名，action是 ios调用时URL Scheme ，返回boolean

2.判断当前设备是系统是Android还是ios

plus.os.name === "Android"
plus.os.name === "iOS"

3.调用第三方应用

安卓
plus.runtime.launchApplication( {pname:pname}, function ( e ) {
                  _this.$toast( "Open system default browser failed: " + e.message );
                } );
苹果
plus.runtime.launchApplication( {action:action}, function ( e ) {
                  _this.$toast( "Open system default browser failed: " + e.message );
                });

4.如果没有安装该应用，则打开本地应用商店，苹果系统直接打开APP store，以下以打开高德地图为例

 _this.$confirm('你还没有安装该应用,是否去应用商店下载').then(res=>{
                if(res){
                    console.log('_this.pname:::::'+_this.pname);
                    if ( plus.os.name === "Android" ) {
                      _this.getDeviceAppStore();// 获取应用商店
                      setTimeout(()=>{
                        if(_this.pname === ''){_this.$toast({message:'抱歉，未检测到您的应用商店',type:'waring'});return;}
                        plus.runtime.openURL( "market://details?id=com.autonavi.minimap", function (e) {
                          _this.$toast('打开失败')
                        },_this.pname);
                      },100)
                    } else if ( plus.os.name === "iOS" ) {
                      plus.runtime.openURL('https://apps.apple.com/cn/app/%E9%AB%98%E5%BE%B7%E5%9C%B0%E5%9B%BE-%E7%B2%BE%E5%87%86%E5%9C%B0%E5%9B%BE-%E5%AF%BC%E8%88%AA%E5%87%BA%E8%A1%8C%E5%BF%85%E5%A4%87/id461703208');
                    
                    }
                }
              })


getDeviceAppStore(){// 获取设备的应用商店包名，对安卓系统
          let _this = this;
          this.plusReady(()=>{
            if ( plus.os.name === "iOS" )return;
            // 获取当前设备厂商
            let vender = plus.device.vendor;
            console.log(vender);
            // 根据设备厂商 获取应用商店的 包名，如果没有获取到设备厂商则给出第三方应用市场列表给用户选择
            switch (vender){
              case 'HUAWEI':
              case 'HONOR':
                _this.pname = 'com.huawei.appmarket';// 华为、荣耀
                break;
              case 'ONEPLUS':
              case 'OPPO':
                _this.pname = 'com.oppo.market';// OPPO、一加
                break;
              case 'VIVO':
                _this.pname = 'com.bbk.appstore';// vivo
                break;
              case 'MEIZU':
                _this.pname = 'com.meizu.mstore';// 魅族
                break;
              case 'XIAOMI':
                _this.pname = 'com.xiaomi.market';// 小米
                break;
              case 'LENOVO':
                _this.pname = 'com.lenovo.leos.appstore';// 联想
                break;
              case 'ZTE':
                _this.pname = 'zte.com.market';// 中兴
                break;
              case 'XIAOLAJIAO':
                _this.pname = 'com.zhuoyi.market';// 卓易
                break;
              case '360':
                _this.pname = 'com.qihoo.appstore';// 360奇虎
                break;
              case 'NUBIA':
                _this.pname = 'com.nubia.neostore';// 努比亚
                break;
              case 'MEITU':
                _this.pname = 'com.android.mobile.appstore';// 美图
                break;
              case 'SONY':
                _this.pname = 'com.android.vending';// 索尼
                break;
              case 'GOOGLE':
                _this.pname = 'com.android.vending';//谷歌
                break;
              // case 'HTC':
              // case 'ZUK':
              default:
                _this.pname = '';
                break;
            }
            console.log(_this.pname)
          });
        },

总结，当我们点击打开高德地图按钮时，会先判断有没有安装，再判断当前设备是什么系统，如果安装了{安卓根据包名 pname，ios根据urlSecheme路径打开高德地图}，如果没有安装{安卓则去获取当前设备厂商，然后获取各厂商应用商店包名，打开高德地图在应用商店详情页；ios直接根据下载地址打开（iOS下APP下载地址可以在APPStore内找到要下载的应用，点击分享即可获得下载地址链接，拿过来就行）}

5.调用系统第三方程序进行导航，安卓会获取设备上已安装的所有导航应用，弹窗选择框，如果只有一个则直接打开，ios打开系统导航应用（高德）

 _this.plusReady(()=>{
                // 设置目标位置坐标点和起始位置坐标点
                let dst = new plus.maps.Point(116.39131928,39.90793074); // 天安门
                let src = new plus.maps.Point(116.335,39.966); // 大钟寺
                // 调用系统地图显示
                plus.maps.openSysMap( dst, "天安门", src );
              });