方式一:按钮点击分享

1
2
<button data-src="这个是分享图片地址" data-title="这个是分享标题" open-type="share">发给好友</button>
<button data-src="这个是分享图片地址" data-title="这个是分享标题" open-type="share">发到朋友圈</button>

方式二:uniapp中全局混入分享功能

用uni-app开发的微信小程序要调用分享功能,以下是点击小程序头部胶囊(三个点)时调用的代码,将每一个页面的分享功能弄成组件调用。

1、创建一个js文件。(shere.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
export default{
data(){
return {
//设置默认的分享参数
sharedata:{
title:'ALAPI',
path:'/pages/index/index',
imageUrl:'',
desc:'',
content:''
}
}
},
//发送给朋友
onShareAppMessage(res) {
return {
title:this.sharedata.title,
path:this.sharedata.path,
imageUrl:this.sharedata.imageUrl,
desc:this.sharedata.desc,
content:this.sharedata.content,
success(res){
uni.showToast({
title:'分享成功'
})
},
fail(res){
uni.showToast({
title:'分享失败',
icon:'none'
})
}
}
},

//uniapp微信小程序分享页面到微信朋友圈
onShareTimeline(res) {
return {
title:this.sharedata.title,
query:'',
imageUrl:this.sharedata.imageurl,
success(res){
uni.showToast({
title:'分享成功'
})
},
fail(res){
uni.showToast({
title:'分享失败',
icon:'none'
})
}
}
}
}

2、全局混入。在 main.js 里面 添加全局的 mixin。

1
2
import share from '@/components/....你的路径.../share.js' //自定义分享功能
Vue.mixin(share)

3、使用。在需要的页面中的data中添加(sharedata)。在需要的页面中修改会将默认参数覆盖,即可完成对某个特定的页面进行分享。

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
data(){
return {
//设置默认的分享参数
sharedata:{
title:'ALAPI',
path:'/pages/my/my',
imageUrl:'',
desc:'',
content:''
}
}
}

使用方式二,也是最方便的一种使用方式,在main.js中封装成一个全局函数调用。

main.js

1
2
3
4
5
6
7
Vue.prototype.pub_show_share = function(zhege, l_listdata, xml1,fx_title,fx_path, fx_imageurl, fx_desc, fx_content,xml8) {
if (fx_title){zhege.sharedata.title = '' + fx_title;}
if (fx_path){zhege.sharedata.path = '' + fx_path;}
if (fx_imageurl){zhege.sharedata.imageurl = '' + fx_imageurl;}
if (fx_desc){zhege.sharedata.desc = '' + fx_desc;}
if (fx_content){zhege.sharedata.content = '' + fx_content;}
}

在需要特殊分享页面中,放到created中。

1
2
3
created() {
this.pub_show_share(this, '', '','我的页面','/pages/my/my', '', '', '','');
},

注意:第一个参数一定是 this。