微信小程序开发----分享

分享是小程序中使用最多的功能,包括小程序原生页面的分享和使用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来处理并展示分享之后的页面。

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