HTML5網(wǎng)頁如何調(diào)用瀏覽器APP的微信分享功能

一、html5手機(jī)網(wǎng)站調(diào)用微信分享包括 ：

創(chuàng)新互聯(lián)是一家專業(yè)提供方城企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為方城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

獲取網(wǎng)絡(luò)類型。

調(diào)起客戶端的圖片播放組件。

調(diào)用微信掃描二維碼。

判斷是否安裝對(duì)應(yīng)的應(yīng)用。

發(fā)送郵件。

分享到微信朋友圈。

二、代碼如下：

[html]?view?plain?copy

!DOCTYPE?html??

html??

head??

meta?charset="utf-8"??

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

titleHTML5網(wǎng)頁如何調(diào)用瀏覽器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"點(diǎn)擊分享到/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:?'',?//內(nèi)容標(biāo)題??

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

三、輸出結(jié)果：

四、其他分享接口：

A.獲取“分享到朋友圈”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口。

wx.onMenuShareTimeline({

title:?'',?//?分享標(biāo)題

link:?'',?//?分享鏈接

imgUrl:?'',?//?分享圖標(biāo)

success:?function?()?{?

//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

},

cancel:?function?()?{?

//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)

}

});

B.獲取“分享給朋友”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口。

wx.onMenuShareAppMessage({

title:?'',?//?分享標(biāo)題

desc:?'',?//?分享描述

link:?'',?//?分享鏈接

imgUrl:?'',?//?分享圖標(biāo)

type:?'',?//?分享類型,music、video或link，不填默認(rèn)為link

dataUrl:?'',?//?如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空

success:?function?()?{?

//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

},

cancel:?function?()?{?

//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)

}

});

C.獲取“分享到QQ”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口。

wx.onMenuShareQQ({

title:?'',?//?分享標(biāo)題

desc:?'',?//?分享描述

link:?'',?//?分享鏈接

imgUrl:?'',?//?分享圖標(biāo)

success:?function?()?{?

//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

},

cancel:?function?()?{?

//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)

}

});

D.獲取“分享到騰訊微博”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口。

wx.onMenuShareWeibo({

title:?'',?//?分享標(biāo)題

desc:?'',?//?分享描述

link:?'',?//?分享鏈接

imgUrl:?'',?//?分享圖標(biāo)

success:?function?()?{?

//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

},

cancel:?function?()?{?

//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)

}

});

E.獲取“分享到QQ空間”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口

wx.onMenuShareQZone({

title:?'',?//?分享標(biāo)題

desc:?'',?//?分享描述

link:?'',?//?分享鏈接

imgUrl:?'',?//?分享圖標(biāo)

success:?function?()?{?

//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

},

cancel:?function?()?{?

//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)

}

});

html5 怎么調(diào)用原生app

生App vs 移動(dòng)Web App

Git@OSC 的 Android 和 iOS 客戶端全面開源

每當(dāng)你打算開發(fā)移動(dòng)應(yīng)用程序時(shí)，都要考慮你的應(yīng)用如何創(chuàng)建以及如何部署。如今已有兩個(gè)主要的方向：原生App 以及 移動(dòng)Web App。那么在今天這篇文章中就來比較一下兩者的區(qū)別來供大家參考。

原生App vs 移動(dòng)Web App ： 定義

什么叫做原生App?

原生App是專門針對(duì)某一類移動(dòng)設(shè)備而生的，它們都是被直接安裝到設(shè)備里，而用戶一般也是通過網(wǎng)絡(luò)商店或者賣場(chǎng)來獲取例如 The App Store 與 Android Apps on Google Play .

隨便說幾個(gè)原生App的例子，比如 iOS 的 Camera+ 以及 Android 的 KeePassDroid

什么叫做移動(dòng)Web App?

一般說來，移動(dòng)Web App都是都是需要用到網(wǎng)絡(luò)的，它們利用設(shè)備上的瀏覽器(比如iPhone的Safari)來運(yùn)行，而且它們不需要在設(shè)備上下載后安裝。

原生App 與 移動(dòng)Web App的比較

用戶界面

有些公司為同樣的產(chǎn)品制作了原生App與移動(dòng)Web App，下圖就是Facebook的原生App與移動(dòng)Web App的界面比較：

注意這兩者的不同地方會(huì)產(chǎn)生不同的用戶體驗(yàn)結(jié)果。

開發(fā)方面

原生App

每一種移動(dòng)操作系統(tǒng)都需要獨(dú)立的開發(fā)項(xiàng)目

每種平臺(tái)都需要獨(dú)立的開發(fā)語言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等

需要使用各自的軟件開發(fā)包，開發(fā)工具以及各自的控件

移動(dòng)Web App

因?yàn)檫\(yùn)行在移動(dòng)設(shè)備的瀏覽器上，所以只需要一個(gè)開發(fā)項(xiàng)目

這種應(yīng)用可以使用HTML5,CSS3以及JavaScript以及服務(wù)器端語言來完成（PHP,Ruby on Rails,Python）

這里可沒有標(biāo)準(zhǔn)的SDK，基本任意選擇

別忘了有一些跨平臺(tái)的開發(fā)工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

能力方面

原生App

能夠與移動(dòng)硬件設(shè)備的底層功能，比如個(gè)人信息，攝像頭以及重力加速器等等

移動(dòng)Web App

只能使用有限的移動(dòng)硬件設(shè)備功能。

贏利

原生App

可以使用專門的移動(dòng)平臺(tái)的廣告，比如AdMob

移動(dòng)Web App

基本沒有限制，但也沒什么優(yōu)勢(shì)

注意原生App能夠直接在對(duì)應(yīng)的官方商店進(jìn)行定價(jià)就能馬上贏利，然而移動(dòng)Web App需要你自己完成付款的系統(tǒng)，這可不是一件簡(jiǎn)單的事情。

獲取方法

原生App

直接下載到設(shè)備

以獨(dú)立的應(yīng)用程序運(yùn)行(并不需要瀏覽器)

用戶必須手動(dòng)去下載并安裝這些原生App

有一些商店與賣場(chǎng)來幫助用戶尋找你的App

移動(dòng)Web App

從移動(dòng)設(shè)備上的瀏覽器訪問

不需要安裝額外的軟件

軟件更新只需要服務(wù)器就夠了

因?yàn)楝F(xiàn)在沒有什么商品或賣場(chǎng)提供這種App，所以如何搜索這些移動(dòng)Web App相當(dāng)不簡(jiǎn)單

版本控制

原生App

用戶可以自由地選擇是否更新軟件版本，所以會(huì)出現(xiàn)不同用戶同時(shí)使用不同版本的情況

移動(dòng)Web App

所有的用戶都是用同樣的版本

優(yōu)勢(shì)

原生App

比移動(dòng)Web App運(yùn)行快

一些商店與賣場(chǎng)會(huì)幫助用戶尋找原生App

官方賣場(chǎng)的應(yīng)用審核流程會(huì)保證讓用戶得到高質(zhì)量以及安全的App

官方會(huì)發(fā)布很多開發(fā)工具或者人工支持來幫助你的開發(fā)

移動(dòng)Web App

跨平臺(tái)開發(fā)

用戶不需要去賣場(chǎng)來下載安裝App

任何時(shí)候都可以發(fā)布App，因?yàn)楦静恍枰俜劫u場(chǎng)的審核

如果你已經(jīng)有了一個(gè)Web App，你可以使用 responsive web design來輔助改進(jìn)(這也是優(yōu)勢(shì)？)

缺陷

原生App

開發(fā)成本高，尤其是當(dāng)需要多種移動(dòng)設(shè)備來測(cè)試時(shí)

因?yàn)槭遣煌拈_發(fā)語言，所以開發(fā)，維護(hù)成本也高

因?yàn)橛脩羰褂玫腁pp版本不同，所以你維護(hù)起來很困難

官方賣場(chǎng)審核流程復(fù)雜且慢，會(huì)嚴(yán)重影響你的發(fā)布進(jìn)程

移動(dòng)Web App

無法使用很多移動(dòng)硬件設(shè)備的獨(dú)特功能

要同時(shí)支持多種移動(dòng)設(shè)備的瀏覽器讓開發(fā)維護(hù)的成本也不低

如果用戶使用更多的新型瀏覽器，那問題就更不好處理了

對(duì)于用戶來說，這種App很難被用戶發(fā)現(xiàn)

原生App vs 移動(dòng)Web App : 你如何選擇？

所以在你準(zhǔn)備做移動(dòng)App時(shí)，你應(yīng)該先問問自己以下幾個(gè)問題：

你的應(yīng)用是否需要使用某些設(shè)備的特殊功能，比如攝像頭，攝像頭閃光燈或者重力加速器

你的開發(fā)預(yù)算

你的應(yīng)用是否一定需要網(wǎng)絡(luò)

你的應(yīng)用的目標(biāo)硬件設(shè)備是所有的移動(dòng)設(shè)備還是僅僅只是一部分而已

你自己已經(jīng)熟悉的開發(fā)語言

這個(gè)應(yīng)用對(duì)于性能要求是否苛刻

如何靠這個(gè)應(yīng)用贏利

我想這幾個(gè)問題應(yīng)該能讓你做出明智的選擇。

結(jié)論

你的選擇是原生App還是移動(dòng)Web App，主要受商業(yè)目標(biāo)，目標(biāo)用戶，以及技術(shù)需要這些因素影響的。其實(shí)更多時(shí)候你也不要為選擇那種App模式煩惱，正如上文提到，類似Facebook這樣的公司就為用戶提供了兩種選擇。然而對(duì)于大部分人來說，預(yù)算，資源限制將會(huì)逼迫我們只能選擇其中一種（或者只能以其中一種為重點(diǎn)）。

html5 怎么打開一個(gè)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

其次，你要在你的網(wǎng)頁中訪問xttblog://taoge/open。可以使用的元素有很多，如：script，iframe，img等。使用它們的src屬性，訪問xttblog://taoge/open。html5代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

!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頁面可以啟動(dòng)手機(jī)上的app嗎

html中其實(shí)是無法判斷應(yīng)用是否安裝，除非在webview中通過js bridge，這里通過一種方式達(dá)到此目的。

1、編輯AndroidManifest.xml：

主要是增加第二個(gè)intent-filter，myapp用來標(biāo)識(shí)schema，最好能保證手機(jī)系統(tǒng)唯一，那樣就可以打開應(yīng)用，而不是彈出一個(gè)選擇框。

android:pathPrefix標(biāo)識(shí)url的path，可以附帶自己的數(shù)據(jù)通過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數(shù)據(jù)：

[java]?view?plaincopy

public?void?onCreate(Bundle?savedInstanceState)?{??

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

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

...??

}

2、編寫html頁面：

整個(gè)頁面也許是某個(gè)app的詳細(xì)介紹，這里只寫出關(guān)鍵的js代碼：

[javascript]?view?plaincopy

function?openApp()?{??

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

var?isrefresh?=?getUrlParam('refresh');?//?獲得refresh參數(shù)??

if(isrefresh?==?1)?{??

return??

}??

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

window.setTimeout(function?()?{??

window.location.href?+=?'refresh=1'?//?附加一個(gè)特殊參數(shù)，用來標(biāo)識(shí)這次刷新不要再調(diào)用myapp://?了??

},?500);??

}??

}

上面代碼可以達(dá)到這樣一個(gè)目的，先請(qǐng)求 myapp:// ,如果系統(tǒng)能處理，或者說已經(jīng)安裝了myapp表示的應(yīng)用，那么就可以打開，另外，如果不能打開，直接刷新一下當(dāng)前頁面，等于是重置location。

新聞標(biāo)題：html5調(diào)用app,HTML5調(diào)用URL接口
地址分享：http://chinadenli.net/article45/dseihhi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、軟件開發(fā)、商城網(wǎng)站、做網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)