<video id="h99qi"><ins id="h99qi"><span id="h99qi"></span></ins></video>

        <var id="h99qi"><td id="h99qi"></td></var>
        1. <acronym id="h99qi"></acronym>
          <wbr id="h99qi"><code id="h99qi"><span id="h99qi"></span></code></wbr>

          1. <var id="h99qi"><th id="h99qi"></th></var>
            0712-2888027 189-8648-0214
            微信公眾號

            孝感風信網絡科技有限公司微信公眾號

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

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

            時間:2024-05-14來源:風信官網 點擊: 10482次

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

            App不像網頁可以使用http超鏈接互相跳轉,但手機os設計了scheme機制,可以通過特殊的鏈接互相調起。

            比如手機淘寶,其安裝后會在手機os中會注冊一個scheme協議,taobao://。

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

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

            這個功能小程序并不支持,屬于App端的擴展API。

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

            打開第三方程序

            打開第三方程序,我們需要使用 runtime 模塊,下面我羅列兩個相關的方法。其他操作請詳讀文檔。

            1. 調用外部瀏覽器打開指定的URL

            plus.runtime.openURL( url, errorCB, identity );  
            • url: ( String ) 必選 要打開的URL地址
              字符串類型,各平臺支持的地址類型存在差異,參考平臺URL支持表。
            • errorCB: ( OpenErrorCallback ) 可選 打開URL地址失敗的回調
              打開指定URL地址失敗時回調,并返回失敗信息。
            • identity: ( String ) 可選 指定打開URL地址的程序名稱
              在iOS平臺此參數被忽略,在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 ) 必選 啟動第三方程序操作失敗的回調函數
              啟動第三方程序失敗時回調,并返回失敗信息。
                <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: '優酷',  
                    pname: 'com.youku.phone',  
                    scheme: 'youku://'  
                }  
            ]  
            

            更多實用例子

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

            • 使用應用商店打開指定App,可用于引導評分
            • 強制使用應用寶打開指定App
            • 打開淘寶搜索頁面。需要你要做淘寶客,需要向淘寶申請自己的scheme參數并傳入。
            • 打開地圖并指定地點
            • 打開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()">使用應用商店打開指定App</button>  
                    <button class="button" @click="openMarket('com.tencent.android.qqdownloader')">強制使用應用寶打開指定App</button>  
                    <button class="button" @click="openTaobao('taobao://s.taobao.com/search?q=uni-app')">打開淘寶搜索頁面</button>  
                    <button class="button" @click="openMap()">打開地圖并指定地點</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應用商店,所以此處打開了另一個示例應用  
                        }  
                        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{//強制指定某個Android應用市場的包名,通過這個包名啟動指定app  
                            if (plus.os.name=="Android") {  
                                plus.runtime.openURL(appurl, function(res) {  
                                    plus.nativeUI.alert("本機沒有安裝應用寶");  
                                },marketPackageName);  
                            } else{  
                                plus.nativeUI.alert("僅Android手機才支持應用寶");  
                            }  
                        }  
                    },  
                    openTaobao(url){  
                        plus.runtime.openURL(url, function(res) {  
                            uni.showModal({  
                                content:"本機未檢測到淘寶客戶端,是否打開瀏覽器訪問淘寶?",  
                                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:"選擇地圖應用",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); //如果是國外應用,應該優先使用這個,會啟動google地圖。這個接口不能統一坐標系,進入百度地圖時會有偏差  
                            }  
                        } else{  
                            // iOS上獲取本機是否安裝了百度高德地圖,需要在manifest里配置,在manifest.json文件app-plus->distribute->apple->urlschemewhitelist節點下添加(如urlschemewhitelist:["iosamap","baidumap"])  
                            plus.nativeUI.actionSheet({title:"選擇地圖應用",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("本機未安裝指定的地圖應用");  
                                    });  
                                }  
                            })  
                        }  
                    },  
                    openQQ: function (e) {  
                        // console.log("e.detail.value: " + JSON.stringify(e.detail.value));  
                        // 沒有校驗qq號是否為空或合法數字,如果不是可用的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("本機沒有安裝QQ,無法啟動");  
                        });  
                    }  
                }  
            };  
            </script>  
            <style>  
            .button {  
                margin: 30upx;  
                color: #007AFF;  
            }  
            </style>  
            

            給自己的App設置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. 調用第三方程序

          4. 欄目列表
            推薦內容
            熱點內容
            展開
            亚洲精品在线视频_18禁无码毛片精品久久久久久_精品熟妇无码av免费久久_午夜福利片