admin管理员组文章数量:1564178
项目场景:把某个h5页面分享到微信里
API参考:概述 | 微信开放文档
1. 使用npm 安装或者在.html 文件里 <script src="" ></script >引入
npm install weixin-js-sdk
2. 引入微信的SDK
import wx from 'weixin-js-sdk'
3. 请求后端接口,在接口成功的回调函数中,通过wx的config接口注入权限验证配置
封装 .js
export const wechatShare = function (shareData, url) {
console.log(shareData);
fetch(baseUrl + "/gzh/jsapi?url=" + url, {
// 请求配置 // 根据后台配置填写
method: "GET",
}).then(async (res) => {
const data = await res.json();
const Data = data.data;
wx.config({
debug: false,// 是否开启调试模式
appId: Data.appId, //必填,公众号的唯一标识
timestamp: Data.timestamp, // 必填,生成签名的时间戳
nonceStr: Data.nonceStr, // 必填,生成签名的随机串
signature: Data.signature, // 必填,签名
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
// 必填,需要使用的JS接口列表,可以查看文档,根据项目需求填加
});
});
wx.ready(() => {
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
wx.updateAppMessageShareData({
title: shareData.title,
desc: shareData.desc,
link: shareData.url,
imgUrl: shareData.image,
success: function () {
console.log(shareData, "shareData");
// 设置成功
},
cancel: function () {
console.log("分享取消");
},
});
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
wx.updateTimelineShareData({
title: shareData.title,
desc: shareData.desc,
link: shareData.url,
imgUrl: shareData.image,
success: function () {
// 设置成功
},
cancel: function () {
console.log("分享取消");
},
});
});
};
4. 组件里使用刚刚封装的 .js里的函数,内容自己配置
componentDidMount() {
const id = this.getParams(Router.router.asPath)
this.getDetail(id)
const currentUrl = window.location.href.split('#')[0]
wechatShare({
title: '******网站', // 标题
desc: '*****千万家',// 描述
url: location.href, // 跳转地址
image: 'https://img.nbsjfr/shangjingu.png' // 图片
}, currentUrl)
}
Tips:title,desc,imgURL,根据自己需求进行配置
版权声明:本文标题:H5 移动端浏览器调用微信的分享功能 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727476030a1116503.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论