借花献佛--十分钟搞定uniapp微信小程序的发送给朋友和分享到朋友圈的图文展示

由于我之前的分享功能都是微信原生小程序分享的，现在要找微信小程序uniapp的vue2的自定义分享，网上找了一圈没啥简单的，然后我在代码里找到我的项目使用到了uview2,发现uview2有提供share的功能，那么我们直接拿来即用。

一、看看你的项目配置了微信开放平台的appId了没？

具体在项目根目录的manifest.json里，请看此图，没有这个appId的请去注册一个。

二、使用uview的提供的share功能

编辑项目根目录的main.js,加入下面code

// 分享功能
let mpShare = require('components/uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)

你如果没有安装uview，需要使用npm安装一下，我的版本是 “uview-ui”: “^1.8.8”，安装完成后，默认的引入路径为

let mpShare = require('uview-ui/libs/mixin/mpShare.js');

是我把uview文件夹为了分包，移动到了components目录下面，所以引入变成了components目录下。

1、我们最后再看一下引入文件mpShare.js长什么样子？

module.exports = {
	onLoad() {
		// 设置默认的转发参数
		this.$u.mpShare = {
			title: '', // 默认为小程序名称
			path: '', // 默认为当前页面路径
			imageUrl: '' // 默认为当前页面的截图
		}
	},
	onShareAppMessage() {
		return this.$u.mpShare
	},
	// #ifdef MP-WEIXIN
	onShareTimeline() {
		return this.$u.mpShare
	}
	// #endif
}

会发现只需要修改title属性，我们把它改成我们小程序的描述信息，即可正常使用。
最后贴一个uview2的share使用官方地址：https://uviewui.com/js/mpShare.html

三、在页面元素中加入分享

oh，亲爱的观众朋友们，忘了和大家说了，如果不想点击右上角那三个小点然后去分享给别人，要在页面中加入分享功能，微信小程序其实也是支持的，但是微信小程序也有两点要求:

1、元素必须是一个button
2、button必须要加一个属性：open-type=“share”

下面是我的htm片段：

<button open-type="share" @click="share" class="atten-btn share" hover-class="navigator-hover">分享</button>

vue片段：

share() {
	let jishi = this.data.jishi;
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneSession', //表示发送给朋友
		type: 0,
		href: 'https://developers.weixin.qq.com',
		title: jishi.js_name,
		summary: jishi.js_skill,
		imageUrl: jishi.js_img.img_url,
		success: function(res) {
			console.log('success:' + JSON.stringify(res));
		},
		fail: function(err) {
			console.log('fail:' + JSON.stringify(err));
		}
	});
}