美文网首页
封装公众号h5项目中用到的微信分享函数(js-sdk)

封装公众号h5项目中用到的微信分享函数(js-sdk)

作者: 微笑是我_f8bb | 来源:发表于2020-03-19 14:50 被阅读0次

    先要下载weixin-js-sdk
    npm i weixin-js-sdk
    新建js文件命名为share.js写如下代码

    import wx from 'weixin-js-sdk'
    export function config(params, success, fail) {
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: params.appId, // 必填,公众号的唯一标识
            timestamp: params.timestamp, // 必填,生成签名的时间戳
            nonceStr: params.nonceStr, // 必填,生成签名的随机串
            signature: params.signature, // 必填,签名
            jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData',
                'onMenuShareAppMessage', 'hideMenuItems'
            ] // 必填,需要使用的JS接口列表
        })
    
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        wx.ready(success)
    
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        wx.error(fail)
    }
    
    export function shareFriends(params, success) {
          if (!params) {
             params = {
               title: '百度', // 分享标题
               desc: '欢迎您', // 分享描述
               link: 'http://baidu.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
               imgUrl: '', // 分享图标
             }
          }
        if (wx.updateAppMessageShareData) {
            wx.updateAppMessageShareData({
                title: params.title, // 分享标题
                desc: params.desc, // 分享描述
                link: params.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: params.imgUrl, // 分享图标
                success: success
            })
        } else {
            wx.onMenuShareAppMessage({
                title: params.title, // 分享标题
                desc: params.desc, // 分享描述
                link: params.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: params.imgUrl, // 分享图标
                success: success
            });
        }
    }
    
    export function shareTimeline(params, success) {
          if (!params) {
             params = {
               title: '微信分享', // 分享标题
               desc: '欢迎您', // 分享描述
               link: 'http://baidu.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
               imgUrl: '', // 分享图标
             }
          }
        if (wx.updateTimelineShareData) {
            wx.updateTimelineShareData({
                title: params.title, // 分享标题
                desc: params.desc, // 分享描述
                link: params.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: params.imgUrl, // 分享图标
                success: success
            })
        } else {
            wx.onMenuShareTimeline({
                title: params.title, // 分享标题
                desc: params.desc, // 分享描述
                link: params.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: params.imgUrl, // 分享图标
                success: success
            });
        }
    }
    
    export default {
        config,
        shareFriends,
        shareTimeline
    }
    

    使用时引入上述js
    import share from 'share.js'
    需要先获取微信js签名 拿到config中需要的配置参数

    share.config(res.data, () => { // res.data是获取js签名后拿到的返回参数appId、timestamp、nonceStr、signature
                                let shareParams = {
                                title: '标题', // 分享标题
                                desc: '描述', // 分享描述
                                link: 'www.baidu.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl:  this.thumb// 分享图标
                              }
                                share.shareFriends(shareParams, () => {
                                        console.log('朋友设置成功')
                                      })
                                share.shareTimeline(shareParams, () => {
                                    console.log('朋友圈设置成功')
                                  })
                                 }
    

    相关文章

      网友评论

          本文标题:封装公众号h5项目中用到的微信分享函数(js-sdk)

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