html5调用app,HTML5调用URL接口

HTML5网页如何调用浏览器APP的微信分享功能

一、html5手机网站调用微信分享包括 ：

创新互联是一家专业提供方城企业网站建设,专注与网站建设、成都网站设计、H5高端网站建设、小程序制作等业务。10年已为方城众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

获取网络类型。

调起客户端的图片播放组件。

调用微信扫描二维码。

判断是否安装对应的应用。

发送邮件。

分享到微信朋友圈。

二、代码如下：

[html] view plain copy

!DOCTYPE html  

html  

head  

meta charset="utf-8"  

meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"  

titleHTML5网页如何调用浏览器APP的微信分享功能/title  

meta name="viewport" content="width=device-width, initial-scale=1" /  

link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /  

link rel="stylesheet" type="text/css" href="css/test.css" /  

style type="text/css"  

html,  

body {  

margin: 0;  

padding: 0;  

}  

/style  

/head  

body  

span class="shareBtn" id="toshare"点击分享到/span  

div id="nativeShare"/div  

script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"/script  

script type="text/javascript" src="js/nativeShare.js"/script  

script type="text/javascript"  

$("#toshare").bind("click", function() {  

var config = {  

url: '', //分享url  

title: '', //内容标题  

desc: '', //描述  

img: '', //分享的图片  

img_title: '', //图片名称  

from: '' //来源  

};  

var share_obj = new nativeShare('nativeShare', config);  

$(".am-share").addClass("am-modal-active");  

if ($(".sharebg").length  0) {  

$(".sharebg").addClass("sharebg-active");  

} else {  

$("body").append('div class="sharebg"/div');  

$(".sharebg").addClass("sharebg-active");  

}  

$(".sharebg-active,.share_btn").click(function() {  

$(".am-share").removeClass("am-modal-active");  

setTimeout(function() {  

$(".sharebg-active").removeClass("sharebg-active");  

$(".sharebg").remove();  

}, 300);  

})  

});  

/script  

/body  

/html

三、输出结果：

四、其他分享接口：

A.获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。

wx.onMenuShareTimeline({

title: '', // 分享标题

link: '', // 分享链接

imgUrl: '', // 分享图标

success: function () { 

// 用户确认分享后执行的回调函数

},

cancel: function () { 

// 用户取消分享后执行的回调函数

}

});

B.获取“分享给朋友”按钮点击状态及自定义分享内容接口。

wx.onMenuShareAppMessage({

title: '', // 分享标题

desc: '', // 分享描述

link: '', // 分享链接

imgUrl: '', // 分享图标

type: '', // 分享类型,music、video或link，不填默认为link

dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

success: function () { 

// 用户确认分享后执行的回调函数

},

cancel: function () { 

// 用户取消分享后执行的回调函数

}

});

C.获取“分享到QQ”按钮点击状态及自定义分享内容接口。

wx.onMenuShareQQ({

title: '', // 分享标题

desc: '', // 分享描述

link: '', // 分享链接

imgUrl: '', // 分享图标

success: function () { 

// 用户确认分享后执行的回调函数

},

cancel: function () { 

// 用户取消分享后执行的回调函数

}

});

D.获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。

wx.onMenuShareWeibo({

title: '', // 分享标题

desc: '', // 分享描述

link: '', // 分享链接

imgUrl: '', // 分享图标

success: function () { 

// 用户确认分享后执行的回调函数

},

cancel: function () { 

// 用户取消分享后执行的回调函数

}

});

E.获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({

title: '', // 分享标题

desc: '', // 分享描述

link: '', // 分享链接

imgUrl: '', // 分享图标

success: function () { 

// 用户确认分享后执行的回调函数

},

cancel: function () { 

// 用户取消分享后执行的回调函数

}

});

html5 怎么调用原生app

生App vs 移动Web App

Git@OSC 的 Android 和 iOS 客户端全面开源

每当你打算开发移动应用程序时，都要考虑你的应用如何创建以及如何部署。如今已有两个主要的方向：原生App 以及 移动Web App。那么在今天这篇文章中就来比较一下两者的区别来供大家参考。

原生App vs 移动Web App ： 定义

什么叫做原生App?

原生App是专门针对某一类移动设备而生的，它们都是被直接安装到设备里，而用户一般也是通过网络商店或者卖场来获取例如 The App Store 与 Android Apps on Google Play .

随便说几个原生App的例子，比如 iOS 的 Camera+ 以及 Android 的 KeePassDroid

什么叫做移动Web App?

一般说来，移动Web App都是都是需要用到网络的，它们利用设备上的浏览器(比如iPhone的Safari)来运行，而且它们不需要在设备上下载后安装。

原生App 与 移动Web App的比较

用户界面

有些公司为同样的产品制作了原生App与移动Web App，下图就是Facebook的原生App与移动Web App的界面比较：

注意这两者的不同地方会产生不同的用户体验结果。

开发方面

原生App

每一种移动操作系统都需要独立的开发项目

每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等

需要使用各自的软件开发包，开发工具以及各自的控件

移动Web App

因为运行在移动设备的浏览器上，所以只需要一个开发项目

这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成（PHP,Ruby on Rails,Python）

这里可没有标准的SDK，基本任意选择

别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

能力方面

原生App

能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等

移动Web App

只能使用有限的移动硬件设备功能。

赢利

原生App

可以使用专门的移动平台的广告，比如AdMob

移动Web App

基本没有限制，但也没什么优势

注意原生App能够直接在对应的官方商店进行定价就能马上赢利，然而移动Web App需要你自己完成付款的系统，这可不是一件简单的事情。

获取方法

原生App

直接下载到设备

以独立的应用程序运行(并不需要浏览器)

用户必须手动去下载并安装这些原生App

有一些商店与卖场来帮助用户寻找你的App

移动Web App

从移动设备上的浏览器访问

不需要安装额外的软件

软件更新只需要服务器就够了

因为现在没有什么商品或卖场提供这种App，所以如何搜索这些移动Web App相当不简单

版本控制

原生App

用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况

移动Web App

所有的用户都是用同样的版本

优势

原生App

比移动Web App运行快

一些商店与卖场会帮助用户寻找原生App

官方卖场的应用审核流程会保证让用户得到高质量以及安全的App

官方会发布很多开发工具或者人工支持来帮助你的开发

移动Web App

跨平台开发

用户不需要去卖场来下载安装App

任何时候都可以发布App，因为根本不需要官方卖场的审核

如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进(这也是优势？)

缺陷

原生App

开发成本高，尤其是当需要多种移动设备来测试时

因为是不同的开发语言，所以开发，维护成本也高

因为用户使用的App版本不同，所以你维护起来很困难

官方卖场审核流程复杂且慢，会严重影响你的发布进程

移动Web App

无法使用很多移动硬件设备的独特功能

要同时支持多种移动设备的浏览器让开发维护的成本也不低

如果用户使用更多的新型浏览器，那问题就更不好处理了

对于用户来说，这种App很难被用户发现

原生App vs 移动Web App : 你如何选择？

所以在你准备做移动App时，你应该先问问自己以下几个问题：

你的应用是否需要使用某些设备的特殊功能，比如摄像头，摄像头闪光灯或者重力加速器

你的开发预算

你的应用是否一定需要网络

你的应用的目标硬件设备是所有的移动设备还是仅仅只是一部分而已

你自己已经熟悉的开发语言

这个应用对于性能要求是否苛刻

如何靠这个应用赢利

我想这几个问题应该能让你做出明智的选择。

结论

你的选择是原生App还是移动Web App，主要受商业目标，目标用户，以及技术需要这些因素影响的。其实更多时候你也不要为选择那种App模式烦恼，正如上文提到，类似Facebook这样的公司就为用户提供了两种选择。然而对于大部分人来说，预算，资源限制将会逼迫我们只能选择其中一种（或者只能以其中一种为重点）。

html5 怎么打开一个app

首先为了保证能够打开你的app，你必须要在androidManifest.xml中配置的filter中data的属性表述。

data

android:pathprefix="/taoge/open" android:scheme="xttblog"/data

androidManifest.xml

代码如下：

XML/HTML Code

?xml version="1.0" encoding="utf-8"?

manifest xmlns:android=""

package="com.taoge"

android:versionCode="2"

android:versionName="3.24.03"

uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="17" /

application

android:allowBackup="true"

android:configChanges="orientation|screenSize"

android:icon="@drawable/logo"

android:label="@string/app_name"

android:logo="@drawable/logo"

android:sharedUserId="android.uid.system"

android:theme="@android:style/Theme.Light.NoTitleBar"

activity

android:name="xttblog.WelcomeActivity"

android:excludeFromRecents="true"

android:screenOrientation="portrait"

android:theme="@android:style/Theme.Light.NoTitleBar"

intent-filter

action android:name="android.intent.action.MAIN" /

category android:name="android.intent.category.LAUNCHER" /

/intent-filter

intent-filter

action android:name="android.intent.action.VIEW" /

category android:name="android.intent.category.BROWSABLE" /

category android:name="android.intent.category.DEFAULT" /

data android:pathPrefix="/taoge/open"

android:scheme="xttblog" /

/intent-filter

/activity

activity

android:name="xttblog.AntRepairActivity"

android:label="@string/title_activity_ant_repair"

/activity

/application

/manifest

其次，你要在你的网页中访问xttblog://taoge/open。可以使用的元素有很多，如：script，iframe，img等。使用它们的src属性，访问xttblog://taoge/open。html5代码如下：

XML/HTML Code复制内容到剪贴板

!DOCTYPE HTML

html

script

function openapp(){

document.getElementById('xttblog').innerHTML='iframe src="xttblog://taoge/open"/iframe';

}

/script

body

div style="display:none;" id="xttblog"/div

input type="button" value="打开app" onclick="openapp();"

/body

/html

html5页面可以启动手机上的app吗

html中其实是无法判断应用是否安装，除非在webview中通过js bridge，这里通过一种方式达到此目的。

1、编辑AndroidManifest.xml：

主要是增加第二个intent-filter，myapp用来标识schema，最好能保证手机系统唯一，那样就可以打开应用，而不是弹出一个选择框。

android:pathPrefix标识url的path，可以附带自己的数据通过string传递到activity，比如完整url为 myapp://xxx/openwith?data=mydata

[html] view plaincopy

activity  

android:name="com.abc.MainActivity"  

android:configChanges="orientation|keyboardHidden|navigation|screenSize"  

android:screenOrientation="landscape"  

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"   

intent-filter  

action android:name="android.intent.action.MAIN" /  

category android:name="android.intent.category.LAUNCHER" /  

/intent-filter  

intent-filter  

action android:name="android.intent.action.VIEW" /  

category android:name="android.intent.category.BROWSABLE" /  

category android:name="android.intent.category.DEFAULT"/  

data android:scheme="myapp" android:pathPrefix="/xxx/openwith" /  

/intent-filter  

t;/activity

然后通过activity获得data数据：

[java] view plaincopy

public void onCreate(Bundle savedInstanceState) {  

Uri uridata = this.getIntent().getData();  

String mydata = uridata.getQueryParameter("data");  

...  

}

2、编写html页面：

整个页面也许是某个app的详细介绍，这里只写出关键的js代码：

[javascript] view plaincopy

function openApp() {  

if (/android/i.test(navigator.userAgent)) {  

var isrefresh = getUrlParam('refresh'); // 获得refresh参数  

if(isrefresh == 1) {  

return  

}  

window.location.href = 'myapp://xxx/openwith?data=mydata';  

window.setTimeout(function () {  

window.location.href += 'refresh=1' // 附加一个特殊参数，用来标识这次刷新不要再调用myapp:// 了  

}, 500);  

}  

}

上面代码可以达到这样一个目的，先请求 myapp:// ,如果系统能处理，或者说已经安装了myapp表示的应用，那么就可以打开，另外，如果不能打开，直接刷新一下当前页面，等于是重置location。