uni-app H5微信公众号实现自定义分享

npm安装微信JS-SDK

npm install jweixin-module --save

通过网址下载:

https://unpkg.com/browse/jweixin-module@1.6.0/lib/index.js


//微信js-sdk引入
var jweixin = require('jweixin-module')


// 微信公众号自定义分享
    /**
     * @description  获取微信jsconfig参数
     * <br/>success回调方法的参数就是返回的原始数据
     * @param {string} title   分享标题
     * @param {string} linkUrl 分享页面路径
     * @param {string} imgUrl  图片路径(网络图片路径)
     * @param {string} desc    分享文字描述  
     * @param {function} success 成功后回调的方法
     */
    weixinJSConfig: function(title, linkUrl, imgUrl,desc) {
        var url = window.location.href; //H5当前页面路径
        console.info('------------url--------------');
        console.info(url);
        uni.request({
            url:  'https://xxx.com/xxx/getWeixinJSConfig', //请求后台接口获取权限验证配置参数
            data: {
                url: url
            },
            method: 'POST',
            timeout: 600000,
            success: (res) => {
                console.info('----------------------------jsconfig--------------------------');
                console.info(res.data);
                 
                //微信分享权限验证配置参数构造
                var config = {
                    debug: false, //是否启用调试
                    appId: res.data.appId, //微信公众号appID
                    timestamp: res.data.timestamp, //时间戳
                    nonceStr: res.data.nonceStr,    //签名的随机串
                    signature: res.data.signature,  //签名
                    jsApiList: [                    //需要使用的JS接口列表
                        'checkJsApi',
                        'updateTimelineShareData',
                        'updateAppMessageShareData',
                        'hideMenuItems'
                    ]
                };
 
                console.info('--------------------------jsconfig Value---------------');
                console.info(config);
 
                //微信注入权限验证配置
                jweixin.config(config);
 
                //需在用户可能点击分享按钮前就先调用
                jweixin.ready(function() {
                    jweixin.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
                                           menuList: ['menuItem:originPage','menuItem:openWithSafari','menuItem:openWithQQBrowser','menuItem:editTag','menuItem:copyUrl','menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone','menuItem:openWithSafari']
                    });
                    //分享到朋友圈
                    jweixin.updateTimelineShareData({
                        title: title, // 分享标题
                        link: 'H5部署域名' + linkUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        success: function() {
                            // alert("updateTimelineShareData");
                        }
                    })
 
                    //分享给朋友
                    jweixin.updateAppMessageShareData({
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: 'H5部署域名' + linkUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        success: function() {
                            // alert("updateAppMessageShareData");
                        }
                    })
                });
            }
        });
    },

 

页面调用:

onLoad() {
	this.weixinJSConfig('分享标题','https://xxx.com/pages/tab/index.html', 'https://xxx.com/image.jpg','分享描述')
},

 

 
posted @ 2021-10-19 20:37  编程民工  阅读(2266)  评论(0编辑  收藏  举报