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

1. 下载js:   https://unpkg.com/[email protected]/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等数据。

你可能感兴趣的:(uni-app)