正文
html5调用app,HTML5调用URL接口
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML5网页如何调用浏览器APP的微信分享功能
一、html5手机网站调用微信分享包括 ：
获取网络类型。
调起客户端的图片播放组件。
调用微信扫描二维码。
判断是否安装对应的应用。
发送邮件。
分享到微信朋友圈。
二、代码如下：
[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 () {
// 用户取消分享后执行的回调函数
}
});
相关问答
Q1: 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这样的公司就为用户提供了两种选择。然而对于大部分人来说，预算，资源限制将会逼迫我们只能选择其中一种（或者只能以其中一种为重点）。
Q2: 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
Q3: 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。
