首頁 學習資料網絡教程正文

【微信】微信內H5頁面打開手機APP功能,使用開放標簽

【微信】微信內H5頁面打開手機APP功能,使用開放標簽

前言

手機瀏覽器可以使用Url Scheme跳轉APP,但是微信打開的頁面不能使用Url Scheme,因為微信已經禁用了Url Scheme功能,如何解決?雖然微信已經禁止了這種方式,但是另一種方式是向我們開放的,那就是按照微信官方文檔的步驟進行操作。畢竟是別人的地盤,我們只能做。不過官方文檔沒有寫詳細,坑很多。陷入其中,在這里總結一下功能,希望對大家有所幫助。

滿足的需求

應用分享到微信的H5卡片網頁(https網頁)。用戶打開網頁后,有一個打開APP的按鈕。如果手機上已經安裝了APP,則直接打開APP。如果沒有安裝,會跳轉到應用市場下載。

實施原則

使用微信提供的打開標簽wx-open-launch-app進行跳轉,通過這個標簽還可以知道當前手機是否安裝了該應用微信小程序button跳轉頁面,如果安裝則打開該應用,如果沒有安裝,跳轉到應用寶,ios下的應用寶會自動跳轉到App Store,我們可以巧妙的使用這個功能。

準備

微信公眾號(認證服務號),獲取開發者ID(AppID)和開發者密碼(AppSecret),設置IP白名單(計算簽名的服務器IP)

【微信】微信內H5頁面打開手機APP功能,使用開放標簽

服務號必須綁定JS接口安全域名,也就是移動H5頁面的域名

【微信】微信內H5頁面打開手機APP功能,使用開放標簽

關聯移動應用(APP)的綁定關系,微信開放平臺準備賬號,主題需與微信公眾服務號一致,服務號綁定微信開放平臺賬號,應用綁定在開放平臺上。并設置域名和要重定向的應用,獲取綁定的移動應用的AppID。相關文件

【微信】微信內H5頁面打開手機APP功能,使用開放標簽

準備工作完成后應該拿到的3樣東西,不清楚的可以看準備工作章節開始開發

應用開發者也需要提前接入SDK才能使用,否則跳轉不生效,訪問文檔,訪問后可以將頁面分享到微信,并以卡片的形式展示(僅限共享頁面可以使用打開應用功能,在微信內容中點擊鏈接不可用)

《前后端開發流程說明》

由于整個流程的實現需要后端計算簽名,所以需要開發一個到前端的接口。前端需要將當前頁面的url傳遞給后端參與簽名,后端將簽名信息返回給前端。詳情請看以下

后端開發工作簽約步驟

獲取 access_token 官方文檔

appid和secret參數就是開發者ID(AppID),開發者密碼(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通過http GET請求jsapi_ticket(有效期2小時,后臺需要全局緩存jsapi_ticket,微信有請求次數限制)

GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功后,您將獲得一張票

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

計算簽名,

拼接參數

jsapi_ticket參數為上一步得到的ticket,noncestr為隨機字符串,timestamp為當前時間戳,url為當前前端頁面的url地址(不包含#后面的字符,所以最好讓它活著,讓前端通過),字段名和字段值都是原始值,沒有URL轉義

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value

對連接的字符串執行sha1簽名以獲得簽名

0f9de62fce790f9a083d5c99e95740ceb90c27ed

將以下參數返回到前端

{
  appId: '', // 開發者ID(AppID)
  timestamp: , // 生成簽名的時間戳
  nonceStr: '', // 生成簽名的隨機字符串
  signature: '',// sha1簽名
}

前端開發工作

請求后端提供的接口獲取簽名

介紹JS-SDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>

通過 SDK 的 config 方法將從請求后端獲取的簽名信息傳入配置項

wx.config({
  debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印
  appId: '', // 必填,公眾號的唯一標識
  timestamp: , // 必填,生成簽名的時間戳
  nonceStr: '', // 必填,生成簽名的隨機串
  signature: '',// 必填,簽名
  jsApiList: ['checkJsApi'], // 必填,需要使用的JS接口列表,沒有就隨便填一個
  openTagList: ['wx-open-launch-app'] //必填, 要申請的開放標簽名稱
})

開啟調試模式,在微信中打開分享的H5頁面時,頁面彈出ok字樣,表示驗證成功

在 vue 項目中使用開放標簽

appid為移動應用關聯的APPID,extinfo為需要傳遞給app的參數(僅支持string類型),launch事件為用戶點擊跳轉app按鈕,error為跳轉app失敗事件

<wx-open-launch-app  appid="關聯的app應用id" :extinfo="extinfo" @launch="wxlaunchFn" @error="wxerrorFn"> 
     <script type="text/wxtag-template">  
         <style>.btn {padding: 12px;}style>
         <p class="btn">在APP內打開button>
      script>
wx-open-launch-app>

注意:只有簽名和域名驗證成功后,才會顯示open標簽,否則什么都看不到。

您可以在無法打開的情況下做出判斷。如果沒有安裝應用,跳轉到應用市場,讓用戶選擇下載安裝應用。

  wxerrorFn(e){
      //console.log('fail' , e);
      if(e.detail.errMsg === 'launch:fail') {
        //console.log('未安裝app, 跳轉應用寶地址');
        window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=xxxx";
      } else if(e.detail.errMsg === 'launch:fail_check fail'){
        //console.log('appid未綁定未關聯到微信');
      }
    },

其他補充劑

只有簽名和域名驗證成功后才會顯示打開標簽,否則看不到打開標簽按鈕

open標簽的樣式只能寫在style標簽里面,寫在外面不會生效

可以在open label外面放一個div,然后定位到需要的那個div,在那個位置顯示自己的button,然后把open label里面的button設置為透明并覆蓋,方便調試樣式(原理:用戶看到的是我們自己的按鈕,實際點擊的是微信的打開標簽按鈕)

為了方便調試,可以使用微信開發者工具-公共網頁-進行調試。調試的時候需要把代碼放在服務器上的JS安全域名下,所以每次修改代碼都必須提交到服務器,非常麻煩。配置主機實現本地調試,將安全域名映射到本地服務器,然后使用微信開發者工具進行預覽調試)

注意,當公司有多個服務ID時微信小程序button跳轉頁面,很容易混淆賬號、開發者ID(AppID)、AppSecret、應用APPID這三個參數,導致驗證失敗。特別注意這一點

注意如果有人刪除了微信公眾號中的安全域名,剛刪除的時候簽名驗證也會提示Ok,但是點擊打開app是沒有反應的,所以如果不改密碼點擊app打開app沒反應,先檢查一下安全域名是否正確?

隨機文章

十八禁动漫肉肉无遮挡无码