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

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
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容