scheme.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <view>
  3. <page-head title="通过scheme打开三方app示例"></page-head>
  4. <button class="button" @click="openBrowser('https://uniapp.dcloud.io/h5')">使用浏览器打开指定URL</button>
  5. <button class="button" @click="openMarket()">使用应用商店打开指定App</button>
  6. <button class="button" @click="openMarket('com.tencent.android.qqdownloader')">强制使用应用宝打开指定App</button>
  7. <button class="button" @click="openTaobao('taobao://s.taobao.com/search?q=uni-app')">打开淘宝搜索页面</button>
  8. <button class="button" @click="openMap()">打开地图并指定地点</button>
  9. <view class="uni-divider">
  10. <view class="uni-divider__content">打开QQ</view>
  11. <view class="uni-divider__line"></view>
  12. </view>
  13. <view class="uni-padding-wrap">
  14. <form @submit="openQQ">
  15. <view>
  16. <view class="uni-title">请输入聊天对象QQ号:</view>
  17. <view class="uni-list">
  18. <view class="uni-list-cell">
  19. <input class="uni-input" name="qqNum" type="number"/>
  20. </view>
  21. </view>
  22. </view>
  23. <view>
  24. <view class="uni-title">请选择QQ号类型:</view>
  25. <radio-group class="uni-flex" name="qqNumType">
  26. <label>
  27. <radio value="wpa" checked=""/>普通QQ号</label>
  28. <label>
  29. <radio value="crm" />营销QQ号(无需加好友直接聊天)</label>
  30. </radio-group>
  31. </view>
  32. <view class="uni-btn-v uni-common-mt">
  33. <button class="button" formType="submit">打开qq并到指定聊天界面</button>
  34. </view>
  35. </form>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. export default {
  41. data() {
  42. return {
  43. };
  44. },
  45. methods: {
  46. openBrowser(url){
  47. plus.runtime.openURL(url)
  48. },
  49. openMarket(marketPackageName) {
  50. var appurl;
  51. if (plus.os.name=="Android") {
  52. appurl = "market://details?id=io.dcloud.hellouniapp";//可能部分应用商店没有收录
  53. }
  54. else{
  55. appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253";
  56. }
  57. if (typeof(marketPackageName)=="undefined") {
  58. plus.runtime.openURL(appurl, function(res) {
  59. console.log(res);
  60. });
  61. } else{//强制指定某个Android应用市场的包名,通过这个包名启动指定app
  62. if (plus.os.name=="Android") {
  63. plus.runtime.openURL(appurl, function(res) {
  64. plus.nativeUI.alert("本机没有安装应用宝");
  65. },marketPackageName);
  66. } else{
  67. plus.nativeUI.alert("仅Android手机才支持应用宝");
  68. }
  69. }
  70. },
  71. openTaobao(url){
  72. plus.runtime.openURL(url, function(res) {
  73. uni.showModal({
  74. content:"本机未检测到淘宝客户端,是否打开浏览器访问淘宝?",
  75. success:function(res){
  76. if (res.confirm) {
  77. plus.runtime.openURL("https://s.taobao.com/search?q=uni-app")
  78. }
  79. }
  80. })
  81. });
  82. },
  83. openMap(){
  84. var url = "";
  85. if (plus.os.name=="Android") {
  86. var hasBaiduMap = plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',action:'baidumap://'});
  87. var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'});
  88. var urlBaiduMap = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";
  89. var urlAmap = "androidamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0"
  90. if (hasAmap && hasBaiduMap) {
  91. plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"百度地图"},{title:"高德地图"}]}, function(e){
  92. switch (e.index){
  93. case 1:
  94. plus.runtime.openURL(urlBaiduMap);
  95. break;
  96. case 2:
  97. plus.runtime.openURL(urlAmap);
  98. break;
  99. }
  100. })
  101. }
  102. else if (hasAmap) {
  103. plus.runtime.openURL(urlAmap);
  104. }
  105. else if (hasBaiduMap) {
  106. plus.runtime.openURL(urlBaiduMap);
  107. }
  108. else{
  109. url = "geo:39.96310,116.340698?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";
  110. plus.runtime.openURL(url); //如果是国外应用,应该优先使用这个,会启动google地图。这个接口不能统一坐标系,进入百度地图时会有偏差
  111. }
  112. } else{
  113. // iOS上获取本机是否安装了百度高德地图,需要在manifest里配置,在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加(如urlschemewhitelist:["iosamap","baidumap"])
  114. plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"Apple地图"},{title:"百度地图"},{title:"高德地图"}]}, function(e){
  115. console.log("e.index: " + e.index);
  116. switch (e.index){
  117. case 1:
  118. 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";
  119. break;
  120. case 2:
  121. url = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";
  122. break;
  123. case 3:
  124. url = "iosamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0";
  125. break;
  126. default:
  127. break;
  128. }
  129. if (url!="") {
  130. plus.runtime.openURL( url, function( e ) {
  131. plus.nativeUI.alert("本机未安装指定的地图应用");
  132. });
  133. }
  134. })
  135. }
  136. },
  137. openQQ: function (e) {
  138. // console.log("e.detail.value: " + JSON.stringify(e.detail.value));
  139. // 没有校验qq号是否为空或合法数字,如果不是可用的qq号,启动qq后会停留在qq主界面
  140. plus.runtime.openURL('mqqwpa://im/chat?chat_type=' + e.detail.value.qqNumType + '&uin=' + e.detail.value.qqNum,function (res) {
  141. plus.nativeUI.alert("本机没有安装QQ,无法启动");
  142. });
  143. }
  144. }
  145. };
  146. </script>
  147. <style>
  148. .button {
  149. margin: 30rpx;
  150. color: #007AFF;
  151. }
  152. </style>