1.关于开发分享
--- 封装为 wxShare.js (这里考虑到可能有的伙伴想直接用,所以直接代码贴上来,复制就行)
import axios from 'axios'
/* eslint-disable */
// 分享配置
let returnAppid = null
window.hiddenShare = function (){
const onBridgeReady = function () {
WeixinJSBridge.call('hideOptionMenu');
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
}
console.log('wxShare文件')
// 标题、描述、链接、图标、
window.shareConfig = function (title, desc, link, imgUrl, wxShareParam, callBack) {
console.log(title, desc, link, imgUrl, '分享');
const uploadImageParam = {
参数:''
}
if (!returnAppid) {
axios({
method: 'GET',
url: '', // 获取验签的接口
params: {
pageUrl:location.href.split('#')[0] // 参数
},
// 两种方式 ↓
// method: 'POST',
// url: '',
// data: JSON.stringify(uploadImageParam),
// headers: {
// 'Content-Type': 'application/json'
// }
}).then(dataJson => {
returnAppid = dataJson.data.data
wx.config({
debug: false,
appId: returnAppid.app_id,
timestamp: returnAppid.timestamp,
nonceStr: returnAppid.nonceStr,
signature: returnAppid.signature,
jsApiList: ['updateTimelineShareData','updateAppMessageShareData','onMenuShareAppMessage', 'hideOptionMenu', 'showMenuItems', 'onMenuShareTimeline']
})
wx.ready(function () {
wx.hideOptionMenu()
wx.checkJsApi({
jsApiList: ['updateTimelineShareData','updateAppMessageShareData','onMenuShareAppMessage', 'hideOptionMenu', 'showMenuItems', 'onMenuShareTimeline'],
success: function (res) { }
})
wx.showMenuItems({
menuList: ['menuItem:share:timeline', 'menuItem:share:appMessage'] // 要显示的菜单项,所有menu项见附录3
})
wx.onMenuShareTimeline({ // 分享到朋友圈
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 分享成功回调 0:好友 1:朋友圈
if(callBack) {callBack(1)}
},
cancel: function () {
}
})
wx.onMenuShareAppMessage({// 分享给朋友
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 分享成功回调 0:好友 1:朋友圈
if(callBack) {callBack(0)}
},
cancel: function () {
}
})
wx.updateTimelineShareData({ // 分享到朋友圈
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 分享成功回调 0:好友 1:朋友圈
if(callBack) {callBack(1)}
},
cancel: function () {
}
})
wx.updateAppMessageShareData({ // 分享到朋友
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 分享成功回调 0:好友 1:朋友圈
if(callBack) {callBack(1)}
},
cancel: function () {
}
})
})
}).catch(error =>{
// console.log('分享请求错误:', error)
})
} else {
// console.log('已有data:',returnAppid)
wx.config({
debug: false,
appId: returnAppid.appId,
timestamp: returnAppid.timestamp,
nonceStr: returnAppid.nonceStr,
signature: returnAppid.signature,
jsApiList: ['updateTimelineShareData','updateAppMessageShareData','onMenuShareAppMessage', 'hideOptionMenu', 'showMenuItems', 'onMenuShareTimeline']
})
wx.ready(function () {
wx.hideOptionMenu()
wx.checkJsApi({
jsApiList: ['updateTimelineShareData','updateAppMessageShareData','onMenuShareAppMessage', 'hideOptionMenu', 'showMenuItems', 'onMenuShareTimeline'],
success: function (res) { }
})
wx.showMenuItems({
menuList: ['menuItem:share:timeline', 'menuItem:share:appMessage'] // 要显示的菜单项,所有menu项见附录3
})
wx.onMenuShareTimeline({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 分享成功回调 0:好友 1:朋友圈
if(callBack) {callBack(1)}
},
cancel: function () {
}
})
wx.onMenuShareAppMessage({// 分享朋友
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 分享成功回调 0:好友 1:朋友圈
if(callBack) {callBack(0)}
},
cancel: function () {
}
})
wx.updateTimelineShareData({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 分享成功回调 0:好友 1:朋友圈
if(callBack) {callBack(1)}
},
cancel: function () {
}
})
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 分享成功回调 0:好友 1:朋友圈
if(callBack) {callBack(1)}
},
cancel: function () {
}
})
})
}
}
/* eslint-disable no-new */
--- index.html 中引用微信 jsdk
--- 用 可能需要在用的地方引用一下也可能不需要,我这里两个项目,一个有引用一个没有都引用
let wxShareParam = { 参数:'' }
// 参数东西 标题、描述、链接、图标、
window.shareConfig(title, desc, url, shareImg, wxShareParam, function (tpyeNum) { console.log(tpyeNum, 'typeNum') })
然后就是关于坑了,挺难受的问题,有比较多的坑存在我这里只写我遇到的,别的问题可以去微信开发社区里找找解决方式
=== 下方图片百度中随便找的例子图
1.微信现在直接在聊天框点击链接进入H5页面,分享没有卡片形式只有链接 例如:
在微信收藏中去点击链接打开,然后再去转发就可以出现卡片形式 例如:
然后就会出现自定义标题 内容 图片的显示问题,首先要确认,分享链接是不是配置过安全域名,打开debug:true 会有这个报错 ,找后端配置安全域名就可以
继续 如果都可以,要确定你自定义的内容 在用的时候是不是都传值了,然后再去手机上测试就可以出现自定义的卡片了 例如:
最后也算一个坑吧,搞的时候遇到的 ==》 使用 这俩即将废弃的onMenuShareAppMessage onMenuShareTimeline debug: true的时候可能不报错 所以可以把新的 updateTimelineShareData updateAppMessageShareData 这俩加上
就这些,后续遇到问题更新。