方式一：按钮点击分享

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。