美文网首页
Taro 分享页面到微信和朋友圈

Taro 分享页面到微信和朋友圈

作者: blossom_6694 | 来源:发表于2020-03-03 17:24 被阅读0次

1、小程序

onShareAppMessage(_: { from: string; target?: any; webViewUrl?: string }) {
        const { detail } = this.store
        return {
            title: `¥${detail.price} ${detail.space} ${detail.houseTitle}`,
            desc: 'Aster share description',
            imageUrl: detail.shareImageUrl, // 分享背景截图
            path: `pages/house_detail/index?bizType=${this.mBizType}&id=${this.mId}&styleId=${this.mStyleId}` // 注意这里需要传递页面参数
        }
    }

直接写在当前分享页面。
2、h5

import Taro from '@tarojs/taro'
import * as http from '@/utils/http'

function initShare(title: string, url: string, imageUrl: string) {
    getConfigInfo(title, url, imageUrl)
}

async function getConfigInfo(title: string, url: string, imageUrl: string) {
    const href = Taro.getSystemInfoSync().platform === 'iPhone' ? Taro.getStorageSync('entryUrl') : window.location.href

    try {
        const res = await http.get<{ appId: string, nonceStr: string, signature: string, timestamp: string }>('wx/shareInfo', {
            url: encodeURIComponent(href)
        })
        initConfig(title, url, imageUrl, res.appId, res.timestamp, res.nonceStr, res.signature)
    } catch (error) {
        
    }
}

function initConfig(title: string, url: string, imageUrl: string, appId: string, timestamp: string, nonceStr: string, signature: string) {

    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: appId, // 必填,公众号的唯一标识
        timestamp: timestamp, // 必填,生成签名的时间戳
        nonceStr: nonceStr, // 必填,生成签名的随机串
        signature: signature,// 必填,签名
        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"] // 必填,需要使用的JS接口列表
    });

    wx.ready(() => {
        wx.updateAppMessageShareData({
            title: title, // 分享标题
            desc: '', // 分享描述
            link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imageUrl, // 分享图标
            success: function () {
                // 设置成功
            }
        })

        wx.updateTimelineShareData({
            title: title, // 分享标题
            link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imageUrl, // 分享图标
            success: function () {
                // 设置成功
            }
        })

        //旧版,用来适配Android
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: '', // 分享描述
            link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imageUrl, // 分享图标
            success: function () {
                // 设置成功
            }
        })

        wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imageUrl, // 分享图标
            success: function () {
                // 设置成功
            }
        })
    })

    wx.error(function () { })
}

export {
    initShare
}

相关文章

网友评论

      本文标题:Taro 分享页面到微信和朋友圈

      本文链接:https://www.haomeiwen.com/subject/dgohlhtx.html