APP跳轉小程序，小程序跳轉APP

關注公共號，搜索 "APP跳轉小程序，小程序跳轉APP",查看原文

 

 

前置條件：

1. 開發環境：windows

2. 開發框架：uni-app , H5+，nativeJS，mpvue

3. 編輯器：HbuilderX

         4. 兼容版本：安卓已作測試,IOS未測試

    App開發用的是uni-app

    小程序開發用的是mpvue

1.  APP 跳轉小程序

文檔地址:

https://uniapp.dcloud.io/api/plugins/share

相關錯誤代碼：

https://ask.dcloud.net.cn/article/287

 

1.1 首先需要在微信開放者平台將APP和微信小程序關聯起來

1.2 如果需要APP直接跳轉小程序，小程序內無需其他操作和參數傳遞，建議調用示例代碼中 toweChats 方法；如果從APP內跳轉到小程序，需要做一些邏輯操作和傳遞參數，建議使用示例代碼中 shareWeChats 方法

1.3 shareWeChats 里面的參數建議從后端獲取，這樣方便維護

1.4 使用 shareWeChats 方法跳轉APP傳參，如果小程序內沒有接收到傳遞的參數，可以在miniProgram對象里面添加 query:"" 的屬性，小程序那邊成功接收到參數以后，就可刪除 query 屬性了

 

2. 在APP內：需要跳轉到小程序的頁面調用如下代碼:

2.1 此處跳轉到小程序的index頁面，傳遞的參數是 pid=49&name=雲上的日子

// APP 跳轉小程序
var appToWtchats={
  // 直接跳轉跳轉到微信小程序(直接跳轉，小程序無法返回到APP)
  toweChats:function(appId){
    if(appId==undefined){
      appId="gh_123456";
    }
    //獲取當前顯示的webview
    var pages = getCurrentPages()
    var page = pages[pages.length - 1]
    var currentWebview = page.$getAppWebview()
    //調用H5+APP的擴展API
    var shares=null;
    // let that = this
    var pusher = plus.share.getServices(function(s){
      shares={};
      for(var i in s){
        var t=s[i];
        shares[t.id]=t;
      }
      var sweixin=shares['weixin'];
      // 此處appId為小程序的原始id
      sweixin.launchMiniProgram({
        id:appId //要跳轉小程序的原始ID
      })
    }, function(e){
      console.log("獲取分享服務列表失敗："+e.message);
    });
    //放入當前的webview
    currentWebview.append(pusher);
  },
  // app 分享到小程序（小程序可以返回到APP）
  shareWeChats:function(obj){
    obj = obj || {}
    uni.share({
        provider:'weixin',
        // 分享出去的場景 WXSceneSession、WXSenceTimeline 
        scene:obj.scene || "WXSceneSession",
        /*
         分享形式 0 圖文 5小程序
         僅支持分享微信小程序到微信聊天界面，想進入朋友圈需改為分享圖片方式，在圖片中包含小程序碼。一般通過canvas繪制圖片，插件市場有很多生成圖片的插件
         https://uniapp.dcloud.io/api/plugins/share
         */
        type:obj.type || 5,
        // 縮略圖，小於20Kb的圖片
        imageUrl:obj.imageUrl || 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
        // 分享標題
        title:obj.title || '歡迎體驗地毯匯小程序',
        miniProgram: {
            // 小程序原始ID 
            id:obj.miniProgram.id || 'gh_2bcfe97e74d5',
            /* 
            小程序打開的頁面，路徑以pages/index開頭
            */
            path:obj.miniProgram.path || 'pages/index/main?pid=49&name=雲上的日子',
            // 微信小程序版本類型，可取值：0-正式版；1-測試版；2-體驗版。默認值為0。
            type:obj.miniProgram.type || 2,
            query:"",
            /*
             兼容低版本的網頁鏈接
             微信公眾平台里面配置的域名或者接口，webUrl必傳，可以為空
             webUrl 屬性不存在，會無法分享
             */
            webUrl:obj.miniProgram.webUrl || 'https://www.123456.net'
        },
        success: ret => {
            console.log("分享到小程序成功",ret);
        },
        fail: err => {
          console.log("分享到小程序失敗",err);
        }
    });
  }
}

3. 小程序跳轉APP 

3.1 在小程序頁面周期函數，onLoad里面接收app內傳遞過來的參數

3.2 小程序跳轉APP，必須是從APP分享出來的小程序頁面，小程序無法直接跳轉APP

文檔地址：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html

在小程序內：需要跳轉到APP使用如下代碼：

// 在小程序內
// index頁面
 <button open-type="launchApp" app-parameter="小程序傳遞過來的參數" @error="launchAppError">跳轉APP</button>
 // js
 onLoad(e) {
      console.log("app內傳遞到小程序的參數的參數", e)
  }, 
  methods: {
        // 監聽小程序跳轉APP發生錯誤
        launchAppError(e) {
            console.log("打開APP", e)
        }
  }

4. app內獲取小程序傳遞的參數，在onShow里面執行如下代碼：

4.1 通過 plus.runtime.arguments 獲取小程序內傳遞來的參數

文檔地址：
https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.arguments

相關博文：

https://ask.dcloud.net.cn/question/65322

// app內 
// index頁面
onShow() {     
  console.log("接收小程序傳遞過來的參數1",plus.runtime.arguments);      
},