uniapp H5 自定義分享出去的圖片文字樣式

先看看最後的效果
引微信js-sdk 可以用 npm 安裝 （npm install weixin-js-sdk --save）
配置wx.config 信息一定要正確

1.在根目錄common文件下新建wechat.js 配置wx.config

//引入js-sdk
//引入request（可以直接用uni.request）
export default {
	getConfig(infoTitle, infoDesc, infoLink, infoImg) {  //自定義分享所需要的參數
		WxOpenApp({
			targetUrl: 'https:/xxx.xxx.xxx/share/' //傳給後臺的參數
		}).then(res => {
			wx.config({
				debug: false,  //測試時候用true 能看見wx.config的狀態是否是config:ok
				appId: res.data.appid, // 必填，公衆號的唯一標識（公衆號的APPid）
				timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
				nonceStr: res.data.noncestr, // 必填，生成簽名的隨機串
				signature: res.data.signature, // 必填，簽名
				jsApiList: [
					'onMenuShareTimeline', // 分享給好友
					'onMenuShareAppMessage', // 分享到朋友圈
					'updateAppMessageShareData', // 分享給好友1.4
					'updateTimelineShareData' // 分享到朋友圈1.4
				], // 必填，需要使用的JS接口列表
				openTagList: ['wx-open-launch-app'] // 可選，需要使用的開放標籤列表，例如['wx-open-launch-app']
			});
			wx.ready(function() {
				var shareData = {
					title: infoTitle, // 分享標題
					desc: infoDesc, // 分享描述
					link: infoLink, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
					imgUrl: infoImg, // 分享圖標
					success: function(res) {}
				};
				//自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容（1.4.0）
				wx.updateTimelineShareData(shareData);
				//自定義“分享給朋友”及“分享到QQ”按鈕的分享內容（1.4.0）
				wx.updateAppMessageShareData(shareData);
			})
		});
	}
}

2.main.js注入

import wechat from './common/wechat.js'
Vue.prototype.$wx = wechat

3.分享頁面onload使用

let title = '自定義標題'
let infoDesc='自定義副標題'
let infoLink = '分享鏈接'
let infoImg='自定義分享圖片'
this.$wx.getConfig(title, infoDesc, infoLink, infoImg);

有問題可以聯繫qq: 178668653，備註uniapp、

大功告成 撒花~