日韩亚洲AV无码一区二区三区|av在线国产哟哟|国产精品人人爽人人爽AV|免费一区二区精品无码视频

<th id="kwciy"><video id="kwciy"></video></th>
<code id="kwciy"><em id="kwciy"><optgroup id="kwciy"></optgroup></em></code>
    1. <center id="kwciy"></center>

      <code id="kwciy"></code>

      0712-2888027 189-8648-0214
      微信公眾號

      孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

      當(dāng)前位置:主頁 > 技術(shù)支持 > HTML5/CSS3 > uni-app 中如何打開外部應(yīng)用,如:瀏覽器、淘寶、AppStore、QQ等

      uni-app 中如何打開外部應(yīng)用,如:瀏覽器、淘寶、AppStore、QQ等

      時(shí)間:2022-01-12來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 11030次

      我們在開發(fā) App 應(yīng)用中,經(jīng)常會遇到打開第三方程序的場景,比如打開手機(jī)淘寶、通過第三方瀏覽器打開一個(gè) url 等等。

      App不像網(wǎng)頁可以使用http超鏈接互相跳轉(zhuǎn),但手機(jī)os設(shè)計(jì)了scheme機(jī)制,可以通過特殊的鏈接互相調(diào)起。

      比如手機(jī)淘寶,其安裝后會在手機(jī)os中會注冊一個(gè)scheme協(xié)議,taobao://。

      這種協(xié)議還支持參數(shù),比如taobao://s.taobao.com/search?q=uni-app啟動淘寶并打開搜索頁面搜索uni-app。

      在uni-app/5+App中,可以通過scheme呼起其他App,也支持給自己的App設(shè)置scheme參數(shù)。

      這個(gè)功能小程序并不支持,屬于App端的擴(kuò)展API。

      打開外部scheme的API是plus.runtime.openURL()。查看文檔:http://www.html5plus.org/doc/zh_cn/runtime.html

      打開第三方程序

      打開第三方程序,我們需要使用 runtime 模塊,下面我羅列兩個(gè)相關(guān)的方法。其他操作請?jiān)斪x文檔。

      1. 調(diào)用外部瀏覽器打開指定的URL

      plus.runtime.openURL( url, errorCB, identity );  
      • url: ( String ) 必選 要打開的URL地址
        字符串類型,各平臺支持的地址類型存在差異,參考平臺URL支持表。
      • errorCB: ( OpenErrorCallback ) 可選 打開URL地址失敗的回調(diào)
        打開指定URL地址失敗時(shí)回調(diào),并返回失敗信息。
      • identity: ( String ) 可選 指定打開URL地址的程序名稱
        在iOS平臺此參數(shù)被忽略,在Android平臺為程序包名,如果指定的包名不存在,則打開URL地址失敗。
          <template>  
              <view>  
                  <button class="button" type="primary" @click="open(0)">使用第三方程序打開指定URL</button>  
              </view>  
          </template>  
      plus.runtime.launchApplication( appInf, errorCB );  
      • appInf: ( ApplicationInf ) 必選 要啟動第三方程序的描述信息
      • errorCB: ( LaunchErrorCallback ) 必選 啟動第三方程序操作失敗的回調(diào)函數(shù)
        啟動第三方程序失敗時(shí)回調(diào),并返回失敗信息。
          <template>  
              <view>  
                  <button class="button" type="primary" @click="launchApp">打開淘寶</button>  
              </view>  
          </template>  
      1. 
        <script>  
        export default {  
            data() {  
                return {  
                    url: 'https://uniapp.dcloud.io/'  
                };  
            },  
            onLoad(op) {},  
            methods: {  
                launchApp() {  
                    let _this = this;  
                    // 判斷平臺  
                    if (plus.os.name == 'Android') {  
                        plus.runtime.launchApplication(  
                            {  
                                pname: 'com.taobao.taobao'  
                            },  
                            function(e) {  
                                console.log('Open system default browser failed: ' + e.message);  
                            }  
                        );  
                    } else if (plus.os.name == 'iOS') {  
                        plus.runtime.launchApplication({ action: 'taobao://' }, function(e) {  
                            console.log('Open system default browser failed: ' + e.message);  
                        });  
                    }  
        
                }  
            }  
        };  
        </script>  
        

      常用URLscheme

      [  
          // 只在 ios 中生效  
          {  
              name: 'App Store',  
              scheme: 'itms-apps://'  
          },  
          {  
              name: '支付寶',  
              pname: 'com.eg.android.AlipayGphone',  
              scheme: 'alipay://'  
          },  
          {  
              name: '淘寶',  
              pname: 'com.taobao.taobao',  
              scheme: 'taobao://'  
          },  
          {  
              name: 'QQ',  
              pname: 'com.tencent.mobileqq',  
              scheme: 'mqq://'  
          },  
          {  
              name: '微信',  
              pname: 'com.tencent.mm',  
              scheme: 'weixin://'  
          },  
          {  
              name: '京東',  
              pname: 'com.jingdong.app.mall',  
              scheme: 'openApp.jdMobile://'  
          },  
          {  
              name: '新浪微博',  
              pname: 'com.sina.weibo',  
              scheme: 'sinaweibo://'  
          },  
          {  
              name: '優(yōu)酷',  
              pname: 'com.youku.phone',  
              scheme: 'youku://'  
          }  
      ]  
      

      更多實(shí)用例子

      除了簡單的打開App,我們更多的時(shí)候想要直達(dá)。這里匯總了很多有用的直達(dá)案例:

      • 使用應(yīng)用商店打開指定App,可用于引導(dǎo)評分
      • 強(qiáng)制使用應(yīng)用寶打開指定App
      • 打開淘寶搜索頁面。需要你要做淘寶客,需要向淘寶申請自己的scheme參數(shù)并傳入。
      • 打開地圖并指定地點(diǎn)
      • 打開qq并到指定聊天界面,可用于客服
        具體代碼見下:
      <template>  
          <view>  
              <page-head title="通過scheme打開三方app示例"></page-head>  
              <button class="button" @click="openBrowser('https://uniapp.dcloud.io/h5')">使用瀏覽器打開指定URL</button>  
              <button class="button" @click="openMarket()">使用應(yīng)用商店打開指定App</button>  
              <button class="button" @click="openMarket('com.tencent.android.qqdownloader')">強(qiáng)制使用應(yīng)用寶打開指定App</button>  
              <button class="button" @click="openTaobao('taobao://s.taobao.com/search?q=uni-app')">打開淘寶搜索頁面</button>  
              <button class="button" @click="openMap()">打開地圖并指定地點(diǎn)</button>  
              <view class="uni-divider">  
                  <view class="uni-divider__content">打開QQ</view>  
                  <view class="uni-divider__line"></view>  
              </view>  
              <view class="uni-padding-wrap">  
                  <form @submit="openQQ">  
                      <view>  
                          <view class="uni-title">請輸入聊天對象QQ號:</view>  
                          <view class="uni-list">  
                              <view class="uni-list-cell">  
                                  <input class="uni-input" name="qqNum" type="number"/>  
                              </view>  
                          </view>  
                      </view>  
                      <view>  
                          <view class="uni-title">請選擇QQ號類型:</view>  
                          <radio-group class="uni-flex" name="qqNumType">  
                              <label>  
                                  <radio value="wpa" checked=""/>普通QQ號</label>  
                              <label>  
                                  <radio value="crm" />營銷QQ號(無需加好友直接聊天)</label>  
                          </radio-group>  
                      </view>  
                      <view class="uni-btn-v uni-common-mt">  
                          <button class="button" formType="submit">打開qq并到指定聊天界面</button>  
                      </view>  
                  </form>  
              </view>  
          </view>  
      </template>  
      
      <script>  
      export default {  
          data() {  
              return {  
      
              };  
          },  
          methods: {  
              openBrowser(url){  
                  plus.runtime.openURL(url)  
              },  
              openMarket(marketPackageName) {  
                  var appurl;  
                  if (plus.os.name=="Android") {  
                      appurl = "market://details?id=io.dcloud.HelloH5"; //由于hello uni-app沒有上Android應(yīng)用商店,所以此處打開了另一個(gè)示例應(yīng)用  
                  }  
                  else{  
                      appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8";  
                  }  
                  if (typeof(marketPackageName)=="undefined") {  
                      plus.runtime.openURL(appurl, function(res) {  
                          console.log(res);  
                      });  
                  } else{//強(qiáng)制指定某個(gè)Android應(yīng)用市場的包名,通過這個(gè)包名啟動指定app  
                      if (plus.os.name=="Android") {  
                          plus.runtime.openURL(appurl, function(res) {  
                              plus.nativeUI.alert("本機(jī)沒有安裝應(yīng)用寶");  
                          },marketPackageName);  
                      } else{  
                          plus.nativeUI.alert("僅Android手機(jī)才支持應(yīng)用寶");  
                      }  
                  }  
              },  
              openTaobao(url){  
                  plus.runtime.openURL(url, function(res) {  
                      uni.showModal({  
                          content:"本機(jī)未檢測到淘寶客戶端,是否打開瀏覽器訪問淘寶?",  
                          success:function(res){  
                              if (res.confirm) {  
                                  plus.runtime.openURL("https://s.taobao.com/search?q=uni-app")  
                              }  
                          }  
                      })  
                  });  
              },  
              openMap(){  
                  var url = "";  
                  if (plus.os.name=="Android") {  
                      var hasBaiduMap = plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',action:'baidumap://'});  
                      var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'});  
                      var urlBaiduMap = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";  
                      var urlAmap = "androidamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0"  
                      if (hasAmap && hasBaiduMap) {  
                          plus.nativeUI.actionSheet({title:"選擇地圖應(yīng)用",cancel:"取消",buttons:[{title:"百度地圖"},{title:"高德地圖"}]}, function(e){  
                              switch (e.index){  
                                  case 1:  
                                      plus.runtime.openURL(urlBaiduMap);  
                                      break;  
                                  case 2:  
                                      plus.runtime.openURL(urlAmap);  
                                      break;  
                              }  
                          })  
                      }  
                      else if (hasAmap) {  
                          plus.runtime.openURL(urlAmap);  
                      }  
                      else if (hasBaiduMap) {  
                          plus.runtime.openURL(urlBaiduMap);  
                      }  
                      else{  
                          url = "geo:39.96310,116.340698?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";  
                          plus.runtime.openURL(url); //如果是國外應(yīng)用,應(yīng)該優(yōu)先使用這個(gè),會啟動google地圖。這個(gè)接口不能統(tǒng)一坐標(biāo)系,進(jìn)入百度地圖時(shí)會有偏差  
                      }  
                  } else{  
                      // iOS上獲取本機(jī)是否安裝了百度高德地圖,需要在manifest里配置,在manifest.json文件app-plus->distribute->apple->urlschemewhitelist節(jié)點(diǎn)下添加(如urlschemewhitelist:["iosamap","baidumap"])  
                      plus.nativeUI.actionSheet({title:"選擇地圖應(yīng)用",cancel:"取消",buttons:[{title:"Apple地圖"},{title:"百度地圖"},{title:"高德地圖"}]}, function(e){  
                          console.log("e.index: " + e.index);  
                          switch (e.index){  
                              case 1:  
                                  url = "http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=39.96310,116.340698&spn=0.008766,0.019441";  
                                  break;  
                              case 2:  
                                  url = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";  
                                  break;  
                              case 3:  
                                  url = "iosamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0";  
                                  break;  
                              default:  
                                  break;  
                          }  
                          if (url!="") {  
                              plus.runtime.openURL( url, function( e ) {  
                                  plus.nativeUI.alert("本機(jī)未安裝指定的地圖應(yīng)用");  
                              });  
                          }  
                      })  
                  }  
              },  
              openQQ: function (e) {  
                  // console.log("e.detail.value: " + JSON.stringify(e.detail.value));  
                  // 沒有校驗(yàn)qq號是否為空或合法數(shù)字,如果不是可用的qq號,啟動qq后會停留在qq主界面  
                  plus.runtime.openURL('mqqwpa://im/chat?chat_type=' + e.detail.value.qqNumType + '&uin=' + e.detail.value.qqNum,function (res) {  
                      plus.nativeUI.alert("本機(jī)沒有安裝QQ,無法啟動");  
                  });  
              }  
          }  
      };  
      </script>  
      <style>  
      .button {  
          margin: 30upx;  
          color: #007AFF;  
      }  
      </style>  
      

      給自己的App設(shè)置scheme

      可在manifest中可配置。

    2. <script>  
      export default {  
          data() {  
              return {  
                  url: 'https://uniapp.dcloud.io/'  
              };  
          },  
          onLoad(op) {},  
          methods: {  
              open(types) {  
                      plus.runtime.openURL(this.url, function(res) {  
                          console.log(res);  
                      });  
              }  
          }  
      };  
      </script>  
      
    3. 調(diào)用第三方程序

    4. 欄目列表
      推薦內(nèi)容
      熱點(diǎn)內(nèi)容
      展開