一个基于微信SDK的微信分享

2021/04/14 微信 76
一个基于微信SDK的微信分享
  • 首先在根目录下执行命令安装依赖

npm i jweixin-module -s

- 然后有一个js文件,这里是封装的内容
const jwx = require('jweixin-module');
class Wx {
    /**
     * @param {Boolean} debug 是否开启调试模式  [非必填]  [默认false]
     * @param {String} appId appId  [必填]
     * @param {String} timestamp timestamp  [必填]
     * @param {String} nonceStr nonceStr  [必填]
     * @param {String} signature signature  [必填]
     * @param {String} jsApiList jsApiList  [非必填]  [默认空数组]
     * @description (文档地址)[https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html]
     */
    constructor({debug=false,appId,timestamp,nonceStr,signature,jsApiList=[]}){
        this.debug = debug;
        this.appId = appId;
        this.timestamp = timestamp;
        this.nonceStr = nonceStr;
        this.signature = signature;
        this.jsApiList = jsApiList;
    }
    /**
     * @description 判断当前是否是微信浏览器
     * @return {Boolean}
     * */
    isWxBrowser(){
        let isWx = false;
        // #ifndef APP-PLUS
        isWx = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
        // #endif
        return isWx;
    }
    /**
     * @description 微信分享
     * @param {Object} config 微信分享的配置
     * @param {String} config.type 'friend' 或 'zone' 决定了分享到好友还是朋友圈  [必填]
     * @param {String} config.title 分享的标题 [必填]
     * @param {String} config.desc 分享的描述 [必填]
     * @param {String} config.link 分享的链接 [必填]
     * @param {String} config.imgUrl 分享的图片 [必填]
     * @param {Function} config.success 分享成功的回调 [非必填]
     * @param {Function} config.fail 分享失败的回调 [非必填]
     * @return {Object} {code,msg} code为0时分享失败,并返回原因msg
     * */
    share(config){
        let {type,title,desc,link,imgUrl,success,fail} = config;
        let result = {code:1,msg:''}
        // 判断是否是微信浏览器
        if (navigator.userAgent.toLowerCase().indexOf('micromessenger') === -1) {
            result.code = 0;
            result.msg = '当前并非微信浏览器环境';
        }
        // 判断必传的微信配置是否齐全
        for(let k in this){
            if((k !== 'debug') && !this[k]){
                result.code = 0;
                result.msg = '请先传入微信需要的配置,[appId、timestamp、nonceStr、signature、jsApiList]';
            }
        }

        if(result.code == 0) return result;

        jwx.config(this)
        jwx.ready(function() {
            if(type == 'friend'){// 分享到朋友
                if (jwx.updateAppMessageShareData) {
                    jwx.updateAppMessageShareData({
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        success: function(res) {
                            success && success(res)
                        },
                        fail: function(err) {
                            fail && fail(err)
                        }
                    })
                } else {
                    jwx.onMenuShareAppMessage({
                      title:title, // 分享标题
                      desc: desc, // 分享描述
                      link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                      imgUrl: imgUrl, // 分享图标
                      success: function () {
                          success && success()
                      }
                    })
                }
            }else if(type == 'zone'){// 分享到朋友圈
                if (jwx.updateTimelineShareData) {
                    jwx.updateTimelineShareData({
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        success: function(res) {
                            success && success(res)
                        },
                        fail: function(err) {
                            fail && fail(err)
                        }
                    })
                  } else {
                    jwx.onMenuShareTimeline({
                      title: title, // 分享标题
                      link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                      imgUrl:imgUrl, // 分享图标
                      success: function (res) {
                          success && success(res)
                      }
                    })
                  }
            }
        })
    }
}

- 然后在你的html中加入如下代码
<script src="weixin.js"></script>
<script>
    const wx = new Wx({});//记得传参
    wx.share({})//记得传参
</script>