微信小程序分享好友和朋友圈的功能

「爱情、让人受尽委屈。」 2021-07-25 00:22 507阅读 0赞

在做好小程序后，看到右上角三点的分享好友和朋友圈是暗灰色的不能点。如图![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]

> 新建share.js文件全局引入  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70]

export default { 
    	data() { 
    		return { 
    			//设置默认的分享参数
    			sharedata: { 
    				title: '*************',
    				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'
    				})
    			}
    		}
    	}
    
    }

> main.js 全局引入

import share from './util/share.js'
    Vue.mixin(share)

这样子就可以用了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/03c6211816ba4ac6ba4cbb230ff7a26d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70]: /images/20210724/b86e2e80e2a84338933f87cdaf869ed2.png