微信內(nèi)H5頁面打開手機(jī)APP功能，使用開放標(biāo)簽
手機(jī)瀏覽器跳轉(zhuǎn)APP是可以用UrlScheme的，但是在微信打開的頁面中確不能使用UrlScheme，原因在于微信將UrlScheme功能給禁用了，那么怎么解決呢，微信雖然禁了該方式，但是給咱們開放了另外一種方式，也就是按照微信官方文檔的步驟來，畢竟是別人的地盤，咱只能照做，不過官方文檔寫的并不詳細(xì)，而且非常多的坑，稍不注意就掉進(jìn)去了，這里我對該功能進(jìn)行了總結(jié)，希望能幫助到大家。
實(shí)現(xiàn)的需求app分享到微信的H5卡片網(wǎng)頁(https的網(wǎng)頁)，用戶打開該網(wǎng)頁后上方有一個打開APP的按鈕，如果手機(jī)已經(jīng)安裝了APP，則直接打開APP，如果未安裝則跳轉(zhuǎn)到應(yīng)用市場進(jìn)行下載
實(shí)現(xiàn)原理利用微信提供的開放標(biāo)簽wx-open-launch-app，來進(jìn)行跳轉(zhuǎn)，通過該標(biāo)簽還能夠得知當(dāng)前手機(jī)是否安裝app，如果已安裝則打開app，未安裝則跳轉(zhuǎn)應(yīng)用寶，在ios下應(yīng)用寶會自動跳轉(zhuǎn)AppStore去，我們可以巧妙的利用這個功能。官方文檔-開放標(biāo)簽說明
準(zhǔn)備工作微信公眾號(已認(rèn)證的服務(wù)號)，拿到開發(fā)者ID(AppID)和開發(fā)者密碼(AppSecret)，并設(shè)置IP白名單(計(jì)算簽名的服務(wù)器IP)
該服務(wù)號必須綁定JS接口安全域名，也就是移動端H5頁面的域名
關(guān)聯(lián)移動應(yīng)用(APP)的綁定關(guān)系，微信開放平臺準(zhǔn)備一個賬號，主體需要和微信公眾的服務(wù)號一致，并將服務(wù)號綁定在微信開放平臺賬號下，并在開放平臺內(nèi)綁定app，并設(shè)置域名與所需跳轉(zhuǎn)的app，并拿到綁定的移動應(yīng)用的AppID。關(guān)聯(lián)說明文檔
準(zhǔn)備工作完成后應(yīng)該拿到的3樣?xùn)|西，不清楚的看準(zhǔn)備工作章節(jié)開發(fā)者ID(AppID)，開發(fā)者密碼(AppSecret)
移動應(yīng)用關(guān)聯(lián)的APPID
開始開發(fā)app開發(fā)人員也需要提前接入SDK，才能使用，否則跳轉(zhuǎn)不生效，接入文檔，接入后可以分享頁面到微信，以卡片的形式展示(只有分享的頁面才能使用打開app功能，在微信內(nèi)容通過點(diǎn)擊鏈接是不行的)
前后端開發(fā)流程說明
由于實(shí)現(xiàn)整個過程需要后端來計(jì)算一個簽名，所以需要先后端開發(fā)一個接口給前端，前端需要將當(dāng)前頁面的url傳到后端參與簽名，后端將簽名信息返回給前端。具體請查看以下內(nèi)容
后端開發(fā)工作簽名步驟
獲取access_token官方文檔
appid和secret參數(shù)就是開發(fā)者ID(AppID)，開發(fā)者密碼(AppSecret)GET?https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET成功后會拿到access_token
{"access_token":"sdfad.....1561","expires_in":7200}獲取jsapi_ticket，用第一步拿到的access_token采用httpGET方式請求獲得jsapi_ticket（有效期2小時，后端需要對jsapi_ticket全局緩存，微信有請求次數(shù)限制）
GET?https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi成功后會得到ticket
{??"errcode":0,??"errmsg":"ok",??"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",??"expires_in":7200}計(jì)算簽名，官方文檔
拼接參數(shù)
jsapi_ticket參數(shù)為上一個步驟拿到的ticket，noncestr為隨機(jī)字符串，timestamp為當(dāng)前時間戳，url為當(dāng)前前端頁面的URL地址(不包含#后面的字符，所以這里最好做成活的，讓前端傳過來)，字段名和字段值都采用原始值，不進(jìn)行URL轉(zhuǎn)義
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value對拼接后的字符串進(jìn)行sha1簽名，得到signature
0f9de62fce790f9a083d5c99e95740ceb90c27ed將下面的參數(shù)返回給前端即可
{??appId:?'',?//?開發(fā)者ID(AppID)??timestamp:?,?//?生成簽名的時間戳??nonceStr:?'',?//?生成簽名的隨機(jī)字符串??signature:?'',//?sha1簽名}前端開發(fā)工作請求后端提供的接口獲取簽名
引入JS-SDK
<script?src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>通過SDK的config方法將請求后端得到的簽名信息傳入配置項(xiàng)
wx.config({??debug:?true,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印??appId:?'',?//?必填，公眾號的唯一標(biāo)識??timestamp:?,?//?必填，生成簽名的時間戳??nonceStr:?'',?//?必填，生成簽名的隨機(jī)串??signature:?'',//?必填，簽名??jsApiList:?['checkJsApi'],?//?必填，需要使用的JS接口列表,沒有就隨便填一個??openTagList:?['wx-open-launch-app']?//必填，?要申請的開放標(biāo)簽名稱})將調(diào)試模式打開，當(dāng)在微信內(nèi)打開分享的該H5頁面后，頁面彈出?ok?字樣就說明驗(yàn)證成功了
在vue項(xiàng)目內(nèi)使用開放標(biāo)簽appid就是移動應(yīng)用關(guān)聯(lián)的APPID，extinfo為需要傳遞給app的參數(shù)(僅支持字符串類型)，launch事件為用戶點(diǎn)擊了跳轉(zhuǎn)app按鈕，error為跳轉(zhuǎn)app失敗事件
<wx-open-launch-app??appid="關(guān)聯(lián)的app應(yīng)用id"?:extinfo="extinfo"?@launch="wxlaunchFn"?@error="wxerrorFn">??????<script?type="text/wxtag-template">???????????<style>.btn?{padding:?12px;}</style>?????????<p?class="btn">在APP內(nèi)打開</button>??????</script></wx-open-launch-app>注意事項(xiàng)：只有在簽名，域名，都驗(yàn)證成功后，開放標(biāo)簽才會顯示，否則什么都看不見
可以在打開失敗的事件下，做判斷，如果未安裝app，則跳轉(zhuǎn)應(yīng)用市場讓用戶選擇下載安裝app
{"access_token":"sdfad.....1561","expires_in":7200}0其它補(bǔ)充只有在簽名，域名，都驗(yàn)證成功后，開放標(biāo)簽才會顯示，否則是看不見開放標(biāo)簽按鈕的
開放標(biāo)簽的樣式只能寫在里面的style標(biāo)簽內(nèi)，寫在外面是不生效的
可以將開放標(biāo)簽外面套一個div，然后div定位到需要的地方，用自己的按鈕顯示在那個位置，然后將開放標(biāo)簽內(nèi)的按鈕設(shè)置成透明，蓋在上面，這樣方便調(diào)試樣式（原理：用戶看見的是我們自己的按鈕，實(shí)際點(diǎn)擊到的是微信的開放標(biāo)簽按鈕）
為了便于調(diào)試可以使用微信開發(fā)者工具-公眾網(wǎng)頁-下進(jìn)行調(diào)試，調(diào)試時是需要將代碼放到JS安全域名下的服務(wù)器上的，所以每修改代碼都要提交到服務(wù)器，非常繁瑣，（可以通過配置host來實(shí)現(xiàn)本地調(diào)試，將安全域名映射到本地服務(wù)器然后搭配微信開發(fā)者工具進(jìn)行預(yù)覽調(diào)試）
注意，當(dāng)公司有多個服務(wù)號的時候，容易搞混賬號這3個參數(shù)開發(fā)者ID(AppID)，AppSecret，應(yīng)用APPID，導(dǎo)致驗(yàn)證失敗，這個特別注意
注意，如果有人刪了微信公眾號內(nèi)的安全域名，剛刪除時簽名校驗(yàn)也會提示Ok，但是但是點(diǎn)擊打開app是沒有反應(yīng)的，所以如果代碼沒有改動而點(diǎn)擊打開app沒反應(yīng)那么首先去檢查安全域名是否被正確
手機(jī)短信可以喚醒APP嗎
可以實(shí)現(xiàn)喚醒APP，并且部分安卓手機(jī)支持跳轉(zhuǎn)指定頁面。小源科技開發(fā)的信析寶產(chǎn)品，可以幫企業(yè)實(shí)現(xiàn)發(fā)送出的短信品牌露出，顯示名稱及標(biāo)識，支持底部菜單，可喚醒APP、打開H5頁面、喚醒撥號盤等操作。
常用移動端產(chǎn)品對比:APP、小程序、H5
移動端產(chǎn)品涵蓋了微信小程序、APP（安卓、IOS）以及H5頁面。具體來說：小程序可在微信APP內(nèi)直接打開，無需下載安裝；APP則是基于安卓和IOS系統(tǒng)開發(fā)，可在智能手機(jī)上運(yùn)行；H5頁面則是運(yùn)行于移動端的Html網(wǎng)頁。本文將從運(yùn)行環(huán)境、系統(tǒng)權(quán)限、推廣方式、運(yùn)營手段、支付能力、登錄方式、用戶體驗(yàn)、抗風(fēng)險能力、...
網(wǎng)頁轉(zhuǎn)app(網(wǎng)頁轉(zhuǎn)app在線)
2、好像有這樣的軟件系把電腦的網(wǎng)頁轉(zhuǎn)成PPT的軟件，你可以搜一下轉(zhuǎn)成app，通過電腦客戶端來下載這樣的軟件，然后在電腦上進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換完以后再把它發(fā)送到手機(jī)上。3、首先打開一個木函，然后在軟件中找到視頻提取音頻功能；點(diǎn)擊進(jìn)入視頻庫，里面顯示了手機(jī)中的所有視頻內(nèi)容；選擇一個視頻之后就會自動...
APP是怎樣被開發(fā)出來的
1、原生app開發(fā) 原生app就是利用手機(jī)本地操作系統(tǒng)開發(fā)的手機(jī)app，目前手機(jī)系統(tǒng)主要分為安卓和蘋果iOS兩種，雙方都有各自的編程開發(fā)語言及工具，原生app開發(fā)就是利用官方的開發(fā)工具進(jìn)行分別開發(fā)。可以實(shí)現(xiàn)的功能多，性能優(yōu)，但是需要人力投入多、周期長、成本高。2、web app開發(fā) web app開發(fā)主要是利用h5網(wǎng)頁...
Scheme碼,讓微信外的手機(jī)應(yīng)用都可跳轉(zhuǎn)到小程序
t= *TICKET*，其中可自定義頁面路徑、攜帶參數(shù)，甚至設(shè)置有效期，有助于活動推廣和渠道跟蹤。但請注意，Scheme碼僅對國內(nèi)非個人主體小程序有效，安卓手機(jī)需通過H5頁面中轉(zhuǎn)，而iOS則可直接在短信中跳轉(zhuǎn)。盡管Scheme碼無法在微信內(nèi)部使用，如聊天、朋友圈等，但在微信外的手機(jī)應(yīng)用，如瀏覽器、郵件等，只需...
微信分享sdk?
通過使用微信JS-SDK,網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)。 例子為在vue中使用微信JS-SDK,步驟如下: 先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”...
H5頁面喚起手機(jī)撥打電話(撥號)
在移動端頁面開發(fā)中，偶爾會需要喚起用戶手機(jī)的打電話功能，撥打客服電話，此時我們可以按照以下操作實(shí)現(xiàn)打電話功能：1）index.html在<head><\/head>中加入這一段：<meta name="format-detection" content="telephone=yes"\/> 2）js中設(shè)置點(diǎn)擊事件：window.location.href = 'tel:4000-000-000';或者直接...
H5\/短信\/瀏覽器如何跳轉(zhuǎn)小程序任意頁面?
H5\/短信\/瀏覽器如何跳轉(zhuǎn)小程序任意頁面？實(shí)現(xiàn)步驟如下：第一步：借助蝦果創(chuàng)建鏈接 由于無法直接在外部打開小程序，需要借助蝦果實(shí)現(xiàn)一鍵跳轉(zhuǎn)。登錄蝦果后，找到跳轉(zhuǎn)小程序功能。第二步：進(jìn)行小程序授權(quán) 授權(quán)方式有兩種，一為管理員掃碼授權(quán)，二為填寫小程序AppSecret及ID。以填寫ID和小程序AppSecret為例，...
微信h5頁面是怎樣分享的?如何提高h(yuǎn)5的打開率?
-鏈接分享：頁面提供分享按鈕，用戶可直接分享至好友、微信群或生成二維碼供掃描。-朋友圈分享：在微信頁面內(nèi)利用內(nèi)置功能，將內(nèi)容分享至朋友圈，擴(kuò)大曝光。-微信群分享：通過分享鏈接至微信群，實(shí)現(xiàn)小范圍傳播。-卡片分享：設(shè)計(jì)分享卡片圖片，搭配鏈接，通過微信圖片消息分享。提高微信H5頁面打開率，需注意以下...
APP和公眾號的區(qū)別 小程序與H5、APP、公眾號有什么區(qū)別
運(yùn)行環(huán)境不一樣，H5可以在任何開放的容器中運(yùn)行，微信小程序則只能在微信中運(yùn)行，盡管未來可能會擴(kuò)展。開發(fā)方式不一樣，H5可以使用任何網(wǎng)頁開發(fā)技術(shù)，而微信小程序必須遵循微信的規(guī)定，開發(fā)體驗(yàn)類似于App，但不需要像App那樣強(qiáng)的適配。獲取權(quán)限不一樣，H5在瀏覽器內(nèi)運(yùn)行，權(quán)限受到限制，而微信小程序可以獲得...
相關(guān)評說：
日喀則地區(qū)變速： ______ “好”在于內(nèi)容多樣、獲取容易、輸出簡單.而制作H5的過程也很簡單的呢,沒有錢也可以做一個閃閃發(fā)光的H5微頁喲! 1、找一個制作H5頁面的平臺、注冊賬號(以凡科微傳單為例); 2、進(jìn)入管理微傳單界面,挑選一款自己喜歡的樣板進(jìn)入編輯頁面; 3、接下來要做的就是對整體頁面的各個欄目進(jìn)行編輯,例如模板中的圖片和文字等,預(yù)覽OK、點(diǎn)擊保存,之后掃描二維碼到微信端,即可一鍵分享到各個移動社交平臺了.
日喀則地區(qū)變速： ______ 經(jīng)常有朋友找我咨詢H5的問題,但是在和他們溝通的過程中,我發(fā)現(xiàn)很多人對H5的理解都是停留在用戶層面,邀請函、小游戲、品牌展示、抽獎等等.其實(shí)如果上升到營銷層面的話,僅在用戶層面去思考是遠(yuǎn)遠(yuǎn)不夠的,因?yàn)槿魏蝹鞑ザ家紤]...
日喀則地區(qū)變速： ______ 1. 無論是公共號還是H5開發(fā)都是使用的網(wǎng)頁開發(fā),本質(zhì)上是一樣的,差別可能在于有對使用環(huán)境做限制;2. 比如公共號里面的網(wǎng)頁可能限制了只能在客戶端里面打開,才可以實(shí)現(xiàn)微信登錄,支付等等功能;但H5可能就沒有這些限制;3. H5還可以內(nèi)嵌在APP殼子里面,成為一個獨(dú)立的APP,完全脫離微信客戶端,就可以獨(dú)立實(shí)現(xiàn)一些原生APP才有的功能;如果是H5可以試一試一門APP打包;
日喀則地區(qū)變速： ______ 判斷方法:長按頁面,如果出現(xiàn)文字選擇、粘貼功能的是H5頁面,否則是native頁面,我在我們自己的App里面試了一下是可以判斷的.但是有一種情況,如果H5頁面就是一張圖片,那么是不能通過這個方法驗(yàn)證的.
日喀則地區(qū)變速： ______ 很多小伙伴還不知該怎么把H5放到微信公眾號上2113,這里就來說一說其方法. 1、在微信圖文區(qū)域編輯5261好活動推薦圖文. 2、一般H5都有屬于自己的唯一二維碼.將4102H5的二維碼放到文章里面,群發(fā)出1653去. 3、編寫好之后,可看到原文專下面有一個“原文鏈接”,勾選“原文鏈接”,將H5頁面的鏈接粘貼到方框之內(nèi). 4、挑選樣式尺寸,完善圖文信屬息即可.
日喀則地區(qū)變速： ______ H5的特效、動畫設(shè)置的太多了,手機(jī)貿(mào)然運(yùn)行會卡頓很正常,打開H5等一會兒在翻頁可能會好點(diǎn)
日喀則地區(qū)變速： ______ H5頁面全稱是HTML5頁面 是專門用來編寫網(wǎng)頁的一種標(biāo)記語言 不是編程語言噢.像C語言JAVA都屬于編程語言的范疇 HTML5應(yīng)用非常廣泛的,比如眾所周知的QQ空間就是用HTML5編寫的 所以微信也會有想要用HTML5這個新興而且備受關(guān)注和喜愛的語言創(chuàng)作的想法吧 HTML5是非常好的語言呢.
日喀則地區(qū)變速： ______ 可以添加,不過不能作為推送,用來朋友圈展示還是挺不錯的,網(wǎng)上很多好的免費(fèi)制作網(wǎng)站,悠云輕故事、初頁之類的.
日喀則地區(qū)變速： ______ 有些H5頁面需要調(diào)用微信的接口才能正常顯示 .有些第三方的游覽器之類的不支持這些功能所以就不能顯示了.
日喀則地區(qū)變速： ______ 微信只是類似一個瀏覽器, 任何頁面都可以在微信內(nèi)打開,不管是不是h5的,所以沒有所謂的微信H5 .
