最近在开发三个端的分享功能，所以也百度查了一些资料，发现没有一篇有比较详情的去说一下三端的分享功能，大部分都是针对单一的某个端去说，所以功能开发完之后，还是想整理一下分享出来，希望能给大家一点帮助！！！，如果觉得有帮助麻烦点个赞，加关注，加评论，这个是不是要求有点多了，呵呵，废话不多说，直接正文了。
小程序端的页面分享
里面包括了分享好友，分享朋友圈，在要分享的页面加上这两个方法
onLoad(options) {
this.pageType = options.type;
this.id = options.id;
this.getData(options.id, options.type)
this.share = options.share
},
// 设置分享发送给朋友
onShareAppMessage(options){
var that = this;
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: this.detail.title, // 默认是小程序的名称(可以写slogan等)
path: `/pages/train/detail?type=${this.pageType}&id=${this.id}&share=1`, // 默认是当前页面，必须是以‘/'开头的完整路径
// imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
};
return shareObj;
},
//用户点击右上角分享朋友圈
onShareTimeline: function () {
return {
title: this.detail.title,
query: `type=${this.pageType}&id=${this.id}&share=1`,
imageUrl: ''
}
},
app端 内嵌h5页面分享功能
这个做了微信好友，朋友圈、qq、复制链接分享，一共是四种分享功能
把分享做成了一个组件，这里的分享功能用的app端提供的api方法调用，我们只要把参数传进去就可以了
分享组件
<template>
<uni-popup ref="sharePopup" type="bottom" background-color="#fff">
<view class="shareView">
<view class="list">
<view class="item" @click="itemClick(item)" v-for="(item, index) in list" :key="index">
<image class="icon" :src="item.icon" mode="aspectFill"></image>
<view class="text">{{item.text}}</view>
</view>
</view>
<view class="cancel-btn" @click="close">取消</view>
</view>
</uni-popup>
</template>
\
<script>
import uniPopup from "@/components/uni-popup/index.vue"
export default {
props: {
addList: {
type: Array,
default: () => []
}
},
components: {
uniPopup
},
data () {
return {
shareItem: {
linkUrl: "", // 网页链接地址
title: "", // 网页链接标题
thumbBitmapUrl: "", // 网页缩略图图片地址
description: "" // 网页链接描述
},
list: [
{id: 1, icon: require("@/static/images/wechat.png"), text: "微信好友", platform: "WEIXIN", shareType: 0},
{id: 2, icon: require("@/static/images/friend.png"), text: "朋友圈", platform: "WEIXIN_CIRCLE", shareType: 1},
{id: 4, icon: require("@/static/images/qq.png"), text: "QQ", platform: "QQ", shareType: 2},
{id: 5, icon: require("@/static/images/link.png"), text: "复制链接", shareType: 3}
]
}
},
methods: {
open(data) {
this.shareItem = data;
this.$refs.sharePopup.open();
},
close(){
this.$refs.sharePopup.close();
},
itemClick(item) {
const {linkUrl, title, thumbBitmapUrl, description} = this.shareItem;
if (item.id == 5) {
// 复制链接
try {
window.NativeHandler.copyLink(linkUrl)
} catch (error) {
window.webkit.messageHandlers.copyLink.postMessage({linkUrl})
}
} else {
// 分享
try {
window.NativeHandler.shareLinkWithPlatform(linkUrl, title, thumbBitmapUrl, description, item.platform)
} catch (error) {
window.webkit.messageHandlers.shareLinkWithPlatform.postMessage({linkUrl, title, thumbBitmapUrl, description, platform: item.platform})
}
}
this.$refs.sharePopup.close();
},
}
}
</script>
页面调用和传参
<view class="share" @click="rightButtomTap()">分享</view>
methods: {
// 分享的方法
rightButtomTap(){
this.$refs.share.open({
linkUrl: `链接地址`, // 网页链接地址
title: '标题', // 网页链接标题
thumbBitmapUrl: '图片地址', // 网页缩略图图片地址
description: '网页链接描述', // 网页链接描述
});
},
}
小程序端 内嵌h5页面分享功能
web-view吧，其实微信官方应该是非常不支持在小程序上嵌套web的，它希望你直接用小程序上的代码，而放弃web的实现，这个时候如果要传递数据的情况的话，就得用到wx.miniProgram.postMessage通过这个方法去传递参数了，实例如果下：
wx.miniProgram.postMessage({ data:{ shareData } })
// webview页面接收
<web-view :src="url" @message="getMessage"></web-view>
getMessage(event) {
console.log('event', event)
}
这个就是一个完整的传递数据和接收数据全部过程了，下面进入分享功能的实现。
页面端
postMsg(){
console.log("description: this.detail.subtitle",`${location.href}&share=1&type=share`)
console.log("this.detail",this.detail)
let shareData = {
linkUrl: `网页链接地址`, //
title: "网页链接标题", //
thumbBitmapUrl: "网页缩略图图片地址", //
description: "网页链接描述", //
}
wx.miniProgram.postMessage({ data:{ shareData } })
},
onLoad（）{
// 判断是不是微信打开的
if(this.$store.state.isWX){
this.postMsg()
}
}
webview文件
<web-view :src="url" @message="getMessage"></web-view>
methods: {
getMessage(event) {
console.log(event.detail)
const willDo = event.detail.data[event.detail.data.length - 1]
if (willDo.shareData) this.shareData = willDo.shareData
},
}
// 分享微信朋友的方法
onShareAppMessage: function (options) {
if (this.shareData) {
return {
title: this.shareData.title,
path: '/pages/component/u-webview/u-webview?url=' + encodeURIComponent(this.shareData.linkUrl),
imageUrl: this.shareData.thumbBitmapUrl
}
} else {
return {
title: '红管家小程序',
path: '/pages/component/u-webview/u-webview?url=' + encodeURIComponent(optionsData.url)
}
}
},
