H5跳轉(zhuǎn)小程序,可以跳轉(zhuǎn)任意小程序,以及任意小程序的頁面地址獲取。

H5跳轉(zhuǎn)小程序。

1登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

2這個JS接口安全域名就是訪問你H5地址的域名。

3通過config接口注入權(quán)限驗(yàn)證配置并申請所需開放標(biāo)簽(簽名算法


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>測試跳轉(zhuǎn)小程序</title>

</head>

<body>

    <h1>下面是按鈕</h1>

    <wx-open-launch-weapp

      id="launch-btn"

      username="gh_64f20a68865d"

      path="__plugin__/wx2b03c6e691cd7370/pages/live-player-plugin.html?room_id=129"

    >

      <template>

        <style>.btn { padding: 12px }</style>

        <button class="btn">打開小程序</button>

      </template>



    </wx-open-launch-weapp>

</body>

{include file="common/wap_js" /}

{notempty name="$signpackage"}

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

<script>

  $(function(){

    wx.config({

      debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。

      appId: '{$signpackage.appId}', // 必填,公眾號的唯一標(biāo)識

      timestamp: '{$signpackage.timestamp}', // 必填,生成簽名的時間戳

      nonceStr: '{$signpackage.nonceStr}', // 必填,生成簽名的隨機(jī)串

      signature: '{$signpackage.signature}',// 必填,簽名

      jsApiList: ['updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage','onMenuShareTimeline'] ,// 必填,需要使用的JS接口列表

      openTagList: ['wx-open-launch-weapp'] // 可選,需要使用的開放標(biāo)簽列表,例如['wx-open-launch-app']

    });

    var btn = document.getElementById('launch-btn');

      btn.addEventListener('launch', function (e) {

        console.log('success');

      });

      btn.addEventListener('error', function (e) {

        console.log('fail', e.detail);

      });

  });

</script>

{/notempty}

</html>

如果上面操作都沒有問題 那么打開頁面會顯示這樣的界面


image.png

這里可以看到config配置都加載出來了,但是按鈕沒有顯示

直接用手機(jī)打開這個網(wǎng)頁


f4afc403ec0bb1860e5960a71c11ce5.jpg

3b72c875e8e55ed17cd8fb443dab306.jpg

好的,測試成功。

有的<template>這個標(biāo)簽不顯示換成<script type="text/wxtag-template">這個試試

如果按鈕手機(jī)上不顯示 檢查下config是否載入 檢查APPID是否是對應(yīng)的服務(wù)號,檢查JS安全域名是否配置了你的H5域名地址。


0.png

如果出現(xiàn)圖上這樣的問題:需要確認(rèn)一下,微信版本要求為:7.0.12及以上。 系統(tǒng)版本要求為:iOS 10.3及以上、Android 5.0及以上。


<wx-open-launch-weapp

      id="launch-btn"

      username="gh_64f20a68865d"

      path="__plugin__/wx2b03c6e691cd7370/pages/live-player-plugin.html?room_id=129"

    >

此標(biāo)簽id為小程序的原始ID,path為小程序的頁面地址后面必須加.html,上面這個地址是我跳轉(zhuǎn)小程序直播間,親測成功。

你可以跳轉(zhuǎn)任意小程序,只需要知到他頁面地址。頁面地址的獲取方法:

image.png

我這里以QQ音樂小程序?yàn)槔?/p>

1.第一步把該小程序添加到我的小程序

2.第二部點(diǎn)擊名稱 查看更多資料獲取到原始ID和APPID

3.進(jìn)入小程序后臺,點(diǎn)擊工具獲取小程序碼,把剛剛得到的APPID放進(jìn)去

image.png
image.png

4.點(diǎn)擊獲取更多頁面路徑,把自己的微信號填進(jìn)去,點(diǎn)擊開啟。然后回到QQ音樂小程序,點(diǎn)擊右上角三個點(diǎn),你會發(fā)現(xiàn)多了個復(fù)制鏈接。


image.png

pages/home/home.html 這個就是獲取到QQ音樂的頁面鏈接。

然后我們把原始ID和這個鏈接填入到剛剛H5標(biāo)簽內(nèi),就可以跳轉(zhuǎn)到QQ音樂了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容