uni-app h5 分享好友与朋友圈等功能

向右看齐 2021-11-05 14:18 426阅读 0赞

1. 下载js:   [https://unpkg.com/jweixin-module@1.4.1/out/index.js][https_unpkg.com_jweixin-module_1.4.1_out_index.js]

2.  在根目录下创建文件夹jweixin，然后把下载的js放进去，命名index.js。

3. 新建一个js或者直接在main.js中写：(我这个是直接在mian.js中使用的)

var jweixin = require('./jweixin')
    
    uni.request({
    	url: '请求接口地址',
    	method: 'GET',
    	data: {
    		url: location.href
    	},
    	success(res) {
    		let s = res.data
    		jweixin.config({
    			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    			appId: s.appId, // 必填，公众号的唯一标识
    			timestamp: s.timestamp, // 必填，生成签名的时间戳
    			nonceStr: s.nonceStr, // 必填，生成签名的随机串
    			signature: s.signature,// 必填，签名
    			jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ"] // 必填，需要使用的JS接口列表
    		});
    		jweixin.ready(function () {
    			//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
    			jweixin.onMenuShareAppMessage({
    				title: getMessage(location.href).title, // 分享标题
    				desc: getMessage(location.href).desc, // 分享描述
    				link: location.href, // 分享链接
    				imgUrl: getMessage(location.href).imgUrl, // 分享图标
    				type: '', // 分享类型,music、video或link，不填默认为link
    				dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    				success: function () {
    				
                    }
                })
    //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
    	        jweixin.onMenuShareTimeline({
    			    title: getMessage(location.href).title, // 分享标题
    				desc: getMessage(location.href).desc, // 分享描述
    				link: location.href, // 分享链接
    				imgUrl: getMessage(location.href).imgUrl, // 分享图标
    				type: '', // 分享类型,music、video或link，不填默认为link
    				dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    				success: function () {
    				
                    }
                })
            })
        }
    })
    
    function getMessage(url) {
    	if(url == '') {
    		return {
    			title: '',
    			desc: '。',
    			imgUrl: ''
    		}
    	} else if(url == '') {
    		return {
    			title: '',
    			desc: '',
    			imgUrl: ''
    		}
    	} else {
    		return {
    			title: '',
    			desc: '',
    			imgUrl: ''
    		}
    	}
    }

在跳转到需要分享的页面时需要使用window.location.href来跳转。否则iphone手机分享会有问题。

若有多个页面需要分享时，可以自己写一个方法去判断location.href。然后返回不同title，desc，imgUrl等数据。

[https_unpkg.com_jweixin-module_1.4.1_out_index.js]: https://unpkg.com/jweixin-module@1.4.1/out/index.js