微信小程序、微信公眾號、H5之間相互跳轉[轉]


 
 

微信小程序、微信公眾號、H5之間相互跳轉

一、小程序和公眾號

答案是:可以相互關聯。

在微信公眾號里可以添加小程序。

    可關聯已有的小程序或快速創建小程序。已關聯的小程序可被使用在自定義菜單和模版消息等場景中。

    公眾號可關聯同主體的10個小程序及不同主體的3個小程序。同一個小程序可關聯最多50個公眾號。

 

1、公眾號跳小程序

比如說 “豐巢快遞櫃” 公眾號關聯的小程序:豐巢寄快遞。

2、小程序跳公眾號

打開“豐巢寄快遞”,點擊右上角的菜單選項,然后點擊”關於豐巢寄快遞“,就可以看見關聯的公眾號了。

二、小程序和H5

答案是:可以相互跳轉。

 

 

1、小程序跳H5

之前一直是有限制,就在11月2號晚上終於公布,小程序可以跳H5的好消息了(前提小程序管理后台配置域名白名單),忍不住哈哈哈哈哈哈哈哈。

小程序也更新了相應的文檔:
圖片描述

web-view 組件是一個可以用來承載網頁的容器,會自動鋪滿整個小程序頁面。但個人類型與海外類型的小程序暫不支持使用。

注:基礎庫 1.6.4 開始支持,低版本需做兼容處理。

 

2、H5跳小程序

小程序的URL Scheme的結構為 weixin://dl/business/?t= *TICKET*,其中TICKET由服務端接口返回的。服務端接口區分兩種形式:HTTPS調用雲開發調用

HTTPS調用

1-獲取ACCESS_TOKEN , 對應的APPID和APPSECRET換成自己對應的小程序即可。

請求地址:

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

返回的數據結構如下:

{
 "access_token": "ACCESS_TOKEN",
 "expires_in": 7200
}

2.獲取URL Scheme

請求地址:POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN

請求參數:

 

屬性 類型 默認值 必填 說明
access_token string   接口調用憑證
jump_wxa Object   跳轉到的目標小程序信息。
is_expire boolean false 生成的scheme碼類型,到期失效:true,永久有效:false。
expire_time number   到期失效的scheme碼的失效時間,為Unix時間戳。生成的到期失效scheme碼在該時間前有效。最長有效期為1年。生成到期失效的scheme時必填。

 

jump_wxa 的結構

 

屬性 類型 默認值 必填 說明
path string   通過scheme碼進入的小程序頁面路徑,必須是已經發布的小程序存在的頁面,不可攜帶query。path為空時會跳轉小程序主頁。
query string   通過scheme碼進入小程序時的query,最大128個字符,只支持數字,大小寫英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~

 

請求示例:

{
 "jump_wxa": {
  "path": "/pages/index/index",
  query": ""
 },
 "is_expire": true,
 "expire_time": 1606737600
}

返回結果

{
 "errcode": 0,
 "errmsg": "ok",
 "openlink": Scheme,
}

參考

喜大普奔,微信終於支持外網打開小程序啦!==》https://blog.csdn.net/qq_34998786/article/details/113623278

 

模式一 https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

模式二 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

 

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html

 


圖片描述

只要引入路徑為https://res.wx.qq.com/open/js/jweixin-1.3.0.js的js文件,然后在執行以下代碼就可以了。

wx.miniProgram.navigateTo({url: '/path/to/page'})

 

H5跳轉微信小程序的三種方式==>www.mpgcw.com/8299.html

聊聊從H5頁面跳轉到小程序的幾種實現方案(附常見坑點)==>https://www.uoften.com/article/220251.html

談談從H5頁面跳轉到小程序的幾種實現方案附常見坑點 (h5跳微信小程序) 轉==>https://www.cnblogs.com/whatlonelytear/p/17532599.html

 

在微信里h5只能跳正式版小程序, 不能跳體驗版和開發版小程序  https://zhujicankao.com/74527.html

但在瀏覽器里面是可以跳體驗版小程序的

 

 

 

 

 

 

三、公眾號和H5

答案是:可以相互跳轉。

1、公眾號跳H5

這個好像一直都是支持的,公眾號的自定義菜單呀、自定義消息呀,這些都可以放H5鏈接跳轉,這就沒啥好討論了,下面說下H5怎么跳轉公眾號吧。

2、H5跳公眾號

本身來說這是不可以的,但也有間接的做法,那就是跳轉到公眾號的歷史消息頁面,然后再進入微信公眾號,這是目前大概最好的做法了。

還是以”豐巢快遞櫃“這個公眾號為例,打開公眾號,點擊”查看歷史消息“,進入歷史消息頁面。可以把這個頁面的地址復制出來,然后放到H5頁面里就ok啦。

四、小程序和小程序

答案是:可以相互跳轉。

打開微信小程序開發文檔,有一個新增的API可以實現。
圖片描述

但得注意2點:

1、低版本需要做兼容處理。

2、相互跳轉的小程序必須是同一公眾號下關聯的。

至此,微信小程序、微信公眾號和H5之間能否相互跳轉就說完了,有什么不對的地方請指出哈,不勝感激~~


作者: 嬌嬌jojo 
鏈接:https://www.imooc.com/article/22900
來源:慕課網
本文原創發布於慕課網 ,轉載請注明出處,謝謝合作

 

 

 

小程序跳小程序

wx.navigateToMiniProgram({
      appId: 'youappid', // 微信實名小程序 APPID(固定值)
      path: 'pages/index/index?cshopUrl=h5PageName', // 需要打開微信實名小程序的目標 URL(固定值)
      extraData: {
          
      },
      envVersion: 'release', // 要打開微信小程序的版本 develop(開發版),trial(體驗版),release(正式版)
      success(res) {
        // 打開成功
        console.log('navigateToMiniProgram 跳轉成功!')

      }
    })

 

小程序跳小程序

  • 小程序與小程序之間互相可以跳轉,形成流量的循環.在小程序中怎么實現的呢
  • 小程序中提供了兩種方式實現小程序與小程序之間的跳轉

 

如何實現小程序與小程序之間的跳轉==>https://www.cnblogs.com/tsalita/p/16188073.html

 

使用標簽方式跳轉


<view>
 <navigator
  target="miniProgram"
  open-type="navigate"
  app-id="wx66d9cf3762c49a1a"
  path="pages/index/index"
  version="release"
  >打開綁定的小程序</navigator>
</view>

 

整體代碼

<template>
  <view>
    <view class="container"><view @tap="onJumpMin">打開跳轉到其他小程序方式1</view></view>
    <view>
      <navigator
        target="miniProgram"
        open-type="navigate"
        app-id="wx2ac2313767a99df9"
        path="pages/index/index"  <!-- 可去掉 -->
        version="release"
      >
        打開綁定的小程序方式2
      </navigator>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      
    };
  },
  methods: {
    onJumpMin() {
      wx.navigateToMiniProgram({
       appId: 'wx9fbad659d526c9bc', // 需要跳轉到指定的小程序appid
       path: 'pages/home/home',   // 打開的頁面 - 可不要
       extraData:{ //額外參數
        
       },
       envVersion: 'release',//要打開微信小程序的版本 develop(開發版), trial(體驗版) ,release(正式版)
       success(res) {
        // 打開成功
        console.log("navigateToMiniProgram 跳轉成功");
        console.log(res);
       }
      })
     }
  }
};
</script>

 

更多傳參方式

<template>
  <view>
    <view class="container"><view @tap="onJumpMin(item.id)">打開跳轉到其他小程序方式1</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list2:[
        {src:'...',title:'...',id:'wx9fbad659d526c9bc'},
		]
    };
  },
  methods: {
    onJumpMin(id) {
      uni.navigateToMiniProgram({
        appId: id, // 需要跳轉到指定的小程序appid
        envVersion: 'release'
      });
    }
  }
};
</script>

 

 

使用標簽的方式跳轉,非常簡單,只需要在wxml中使用target,open-type,app-id,path,指定相應的參數就可以實現跳轉了的

查看小程序id

一、移動端查看微信小程序APPID方法

小程序id怎么查看?有兩種方式,一種是在手機上,一種是在電腦上,下面是具體的查看方法。

1.首先在微信上打開任意微信小程序的任意頁面,點擊小程序右上角的【...】分享按鈕,再點擊小程序名稱進入即可。

2.其次進入小程序詳情頁,點擊更多資料,進入即可

3.最后進入小程序后台,第三欄就是微信小程序APPID賬號,如圖所示:

 

 

 

app跳小程序

官方最新說法

https://developers.weixin.qq.com/community/develop/article/doc/0002aec12ccf18c57e4a798e25b013

對於已通過認證的開放平台賬號,其移動應用可以跳轉至任何合法的小程序,且不限制跳轉的小程序數量。
對於未通過認證的開放平台賬號,其移動應用僅可以跳轉至同一開放平台賬號下小程序。
注意:若移動應用未上架,則最多只能跳轉小程序100次/天,用於滿足調試需求。

Android示例

微信開放文檔
  https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/Android_Development_example.html

Ios示例

微信開放文檔
  https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/iOS_Development_example.html

官方鏈接

功能介紹 | 微信開放文檔
  https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/Launching_a_Mini_Program.html

 

android源碼跳轉app樣例

private void launchMiniProgram(String path) {
        String appId = "應用appid"; 
        // 填寫移動應用的appId, 這個 應用appid 是微信開放平台的, 不是小程序的appid
        // 2020-04-30 官方回復 :對於已通過認證的開放平台賬號,其移動應用可以跳轉至任何合法的小程序,且不限制跳轉的小程序數量。
        IWXAPI api = WXAPIFactory.createWXAPI(context, appId);
    
        WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
        req.userName = "原始id"; // 填小程序原始id , 注意不是小程序的 appid
        req.path = path; //拉起小程序頁面的路徑,可帶參數,不填默認拉起小程序首頁
        req.miniprogramType = WXLaunchMiniProgram.Req.MINIPROGRAM_TYPE_PREVIEW;// MINIPROGRAM_TYPE_TEST 開發版 ,MINIPROGRAM_TYPE_PREVIEW 體驗版, MINIPTOGRAM_TYPE_RELEASE 正式版
        api.sendReq(req);
    }

 

蘋果.........

 

  • req.userName 參數是小程序原始id,不是小程序的appid,不然會提示跳轉失敗。
  • req.path 參數是小程序里面的頁面路徑,及json文件里面的路徑,比如:/pages/index/index?id=1
  • req.miniprogramType 小程序的版本 ,  MINIPROGRAM_TYPE_TEST 開發版    MINIPROGRAM_TYPE_PREVIEW 體驗版, MINIPTOGRAM_TYPE_RELEASE 正式版

 

回調WXEntryActivity

	@Override
    public void onResp(BaseResp baseResp) {
        // baseresp.getType 1:第三方授權, 2:分享
        LogUtil.i("baseresp.getType = " + baseResp.getType());
        switch (baseResp.getType()) {
            case 1:
              
                break;
            case 2:
              
                break;
            case ConstantsAPI.COMMAND_LAUNCH_WX_MINIPROGRAM:
                WXLaunchMiniProgram.Resp launchMiniProResp = (WXLaunchMiniProgram.Resp) baseResp;
                //獲取參數
                String extraData = launchMiniProResp.extMsg; //對應小程序組件 <button open-type="launchApp"> 中的 app-parameter 屬性
                break;
        }
      }

 

 

 舊版說法(仍有參考價值) 但意義不大,主要看

APP跳轉小程序,小程序跳轉APP==>https://www.cnblogs.com/ts119/p/14468591.html

ios app跳轉微信小程序==>https://www.cnblogs.com/gaozhang12345/p/9228310.html

APP跳轉小程序,小程序跳轉APP==>https://www.cnblogs.com/ts119/p/14468591.html

↓Android APP拉起小程序、分享小程序、小程序打開APP==>https://cloud.tencent.com/developer/article/2019830 

 

 

app內嵌的H5喚起微信小程序

蘋果app跳小程序使用 urllink    的 location.href="https://wxaurl.cn/Ss9TuKRttbt" , 可以直接喚起微信小程序

蘋果app跳小程序使用 a標簽 <a href="weixin://dl/business/?t=aMDDWVeO75d" > jump </a>    , 可以直接喚起微信小程序,會先喚起自帶默認瀏覽器, 再通過瀏覽器喚起對應小程序 (本條為猜測, 未親測)

蘋果app跳小程序使用 urlschema 的 location.href="weixin://dl/business/?t=aMDDWVeO75d" 不可以喚起微信小程序

蘋果app跳小程序使用 a標簽 <a href="weixin://dl/business/?t=aMDDWVeO75d" > jump </a>  可以直接喚起微信小程序,會先喚起自帶默認瀏覽器, 再通過瀏覽器喚起對應小程序

 

安卓app跳小程序使用 urllink    的 location.href="https://wxaurl.cn/Ss9TuKRttbt" , 不可以喚起微信小程序

安卓app跳小程序使用 a標簽 <a href="weixin://dl/business/?t=aMDDWVeO75d" > jump </a>    , 可以直接喚起微信小程序,會先喚起自帶默認瀏覽器, 再通過瀏覽器喚起對應小程序 (本條為猜測, 未親測)

安卓app跳小程序使用 urlschema 的 location.href="weixin://dl/business/?t=aMDDWVeO75d" 不可以喚起微信小程序

安卓app跳小程序使用 a標簽 <a href="weixin://dl/business/?t=aMDDWVeO75d" > jump </a>  可以直接喚起微信小程序,會先喚起自帶默認瀏覽器, 再通過瀏覽器喚起對應小程序

 

 

app分享小程序

官網說明 , 在文章末尾處  https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317340&token=ae4e632e7dcc175a183ce11346e0dfcd98399d82&lang=zh_CN

    private void shareMiniProgram(String url) {
        WXMiniProgramObject miniProgramObj = new WXMiniProgramObject();
        miniProgramObj.webpageUrl = url; // 兼容低版本的網頁鏈接
        miniProgramObj.miniprogramType = WXMiniProgramObject.MINIPROGRAM_TYPE_PREVIEW;// 正式版:0,測試版:1,體驗版:2
        miniProgramObj.userName = "原始id";     // 小程序原始id
        miniProgramObj.path = "/pages/home/home";        //小程序頁面路徑

        WXMediaMessage msg = new WXMediaMessage(miniProgramObj);
        msg.title ="分享的標題"; // 小程序消息title
        msg.description = "分享的描述";   // 小程序消息desc
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pindan);
        msg.thumbData = bmpToByteArray(bitmap, true);   // 小程序消息封面圖片,小於128k

        SendMessageToWX.Req req = new SendMessageToWX.Req();
        req.transaction = buildTransaction("webpage");
        req.message = msg;
        req.scene = SendMessageToWX.Req.WXSceneSession;  // 目前支持會話
        api.sendReq(req);
    }

 

 

小程序打開APP(基本不支持)


因為微信小程序本身是不推薦引流到外部的,所以正規的方法其實都是被禁止掉的。

1.wx.openUrl可直接打開內置瀏覽器頁面 (2021年時可以使用,現在已被禁用)

2.通過原生按鈕跳轉到小程序客服,客服發送鏈接卡片,通過卡片的鏈接進入。

3.跳轉到公眾號文章 ,文章底部的查看全文可以跳轉到任意鏈接。

 

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打開APP</button>
  • open-type=“launchApp” 開放能力
  • app-parameter=“wechat” 傳參
  • binderror=“launchAppError” 失敗回調

 

Page({
  launchAppError (e) {
    console.log(e.detail.errMsg)
  }
})

另附:微信分享打開App:使用魔窗SDK實現,實際是網頁打開App,蘋果倒是可以直接打開App,安卓只能用網頁打開分享再打開App。具體實現可以查看官網文檔。我是在unity游戲項目上實現的,安卓需要添加一個透明Activity作為初始界面,不然沒有分配link的界面會實現不了吧,IOS是同事配置的。

 
 

參考

微信小程序、微信公眾號、H5之間相互跳轉==>https://www.cnblogs.com/colorful-paopao1/p/8608609.html

APP和小程序互相跳轉==>https://blog.csdn.net/m0_71272694/article/details/127600021


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM