uniapp H5 自定义分享出去的图片文字样式

先看看最后的效果 ios注意分享出去的链接传参不能带汉字哦!!!!uniapp H5 自定义分享出去的图片文字样式_第1张图片
引微信js-sdk 可以用 npm 安装 (npm install weixin-js-sdk --save
配置wx.config 信息一定要正确

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

//引入js-sdk
import wx from '@/node_modules/jweixin-module/lib/index.js'
//引入request,这里WxOpenApp是自己封装的接口方法(可以直接用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群 :325021815

大功告成 撒花~

你可能感兴趣的:(uni-app,app,js,jsp)