微信小程式轉發onShareAppMessage設定path引數後在onload獲取不到值的原因和解決方法

一 定 會 去 旅 行發表於2023-01-12
微信小程式APP

官方例項：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object

官方例項程式碼如下：

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定義轉發標題'
        })
      }, 2000)
    })
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123',
      promise 
    }
  }
})

直接把該段程式碼複製到你的專案測試，可以開啟分享的轉發。

但是大家現實中實際的需求肯定是想獲取字尾的引數值，官方說在頁面onload中可以獲取到，但是如果我們在以上頁面程式碼的基礎上新增onload後透過轉發的卡片打卡小程式發現根本獲取不到引數值。

在官方例項程式碼基礎上新增onload：

  onLoad(query) {
    console.log("連結引數", query);    
    wx.showToast({
      title: JSON.stringify(query)
    });
  }

 

 

官方說如果自定義promise，則分享資訊以promise結果為準。

透過修改例項中的title值測試發現分享後title確實變化了。

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定義轉發標題promise'
        })
      }, 500)
    })
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123',
      promise 
    }
  }
})

 

 

然而我們並沒有拿到path的引數值，問題出在哪裡呢？

當我把promise刪掉了，發現可以透過開啟分享出去的卡片拿到引數了，所以問題出在這個promise上。

由此推斷：promise覆蓋了預設定義的return的值，當promise裡沒有設定某個值的時候，會使用系統預設的值而不會使用自定義的值。比如上面我們在promise中定義了title值，但是沒有定義path值，此時即使return中定義了path，但promise中的path=null會覆蓋掉return中的path，所以啟用了微信小程式預設的path=當前頁面。

這就可以解釋為什麼有的提問說明明自己定義了path值等於某個頁面，但透過卡片開啟的依然是當前頁面，應該是設定了promise而裡面沒有path路徑。

所以如果要透過介面獲取後端的引數，那麼應該給promise配置完整的path引數，如果需要動態的背景圖那也要在promise中設定imageUrl。

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定義轉發標題promise',
          path: '/pages/test/test?id=1111&uname=test001'
        })
      }, 500)
    })
    return {
      title: '自定義轉發標題',
      path: '/pages/test2/test2?id=123',
      imageUrl: '/imgs/tx.png', // 此處不會生效，會使用當前頁的截圖
      promise 
    }
  }
})

需要注意：官方文件裡提到了，假如promise超過3秒沒有返回結果，那麼就會使用自定義的return值，可以透過設定setTime=3500來測試。

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定義轉發標題promise',
          path: '/pages/test/test?id=1111&uname=test001'
        })
      }, 3500)
    })
    return {
      title: '自定義轉發標題',
      path: '/pages/test2/test2?id=123',
      imageUrl: '/imgs/tx.png', 
      promise 
    }
  }
})

上面即使設定了promise，但因為返回時長為3.5秒，所以不生效，會跳轉到自定義的test2頁面，背景圖為自定義的tx.png。

以上兩種都可以透過path傳遞引數了。

ps：官方例項程式碼裡配置的path路徑是page/user，該方式已經過時，現在的配置方式是/pages/user/user。

 

相關文章