微信小程序開發----分享

分享是小程序中使用最多的功能,包括小程序原生頁面的分享和使用webview打開的h5頁面的分享。

原生頁面分享:直接在原生頁面使用onShareAppMessage函數, 當你點擊右上角的三個點下的轉發會自動執行該函數,關於該函數需要注意:

  • 該函數是同步函數,裏面涉及到的分享參數不能通過異步函數獲取,如果想異步獲取,需要在點擊分享之前準備好相應參數
  • 分享參數要做好容錯,不然很容易出現奇奇怪怪問題。我遇到過分享參數沒有做邊界處理,導致在某種邊界條件下分享參數取值時候報錯,但是報錯不會提示,他會使用上次取到的正確的分享參數給你完成分享,這就很坑,所以遇到分享出去的頁面,在進入時候出現問題,console下分享參數。。

h5頁面的分享:
在小程序裏面通過webview打開的頁面,在點擊右上角分享的時候如果想讓頁面成功被分享,需要在h5裏面寫分享函數,需要使用微信提供的js-sdk

    // 設置微信小程序分享卡片(這裏主要是設置分享title, text, url, img等)
    setMiniProgramShare = () => {
        let {
            BasicInfo,
            productId,
            ruleId
        } = this.store.getState()
        if (!this.isInWXApplets()) return
        let queryParams = { productId,  isMiniCardShare: true }
        let shareImage = `https://m.ctrip.com/tour/service/getMiniShareImg?productId=${productId}`
        let shareTitle = BasicInfo.Title
        let shareText = BasicInfo.Title
        let shareUrl = `${
            HTTPS_HOSTS[this.context.env]
        }/webapp/vacations/diysh/detail?${querystring.stringify(queryParams)}`
        this.setMiniProgramShareData(shareTitle, shareUrl, shareText,shareImg)
    }
     // 設置小程序H5分享(把用戶設置的分享參數,調用js-sdk提供的分享的方法進行分享)
    setMiniProgramShareData(title, url, desc, img) {
        url = url || location.href
        let data = {
            url: encodeURIComponent(url),
        }
        let path = '/cwx/component/cwebview/cwebview?data=' + JSON.stringify(data)
       window.ijWeixin.postMessage({
            data: {
                shareData: {
                    bu: 'jid',
                    title: title || '旅遊',
                    path: path,
                    desc: desc,
                    imageUrl: img || '',
                },
                type: 'onShare',
            },
        })
    }


window.ijWeixin是微信官方提供的js-jdk文件,使用前需要配置(簽名,時間戳啥的),因爲存在異步請求、和對應的小程序建立關聯等步驟,會涉及到config,ready的使用(暫時沒涉及,後邊補上)setMiniProgramShareData中的path是你小程序內部封裝的webview的路徑,也就是你的分享參數將要傳遞給小程序webview來處理並展示分享之後的頁面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章