效果图:
1、登录微信公众号(需要已经认证过的公众号)
进入“设置与开发”→“公众号设置”→“功能设置”→“JS接口安全域名”,将文件下载下来,上传至与将要分享的页面相同的域名服务器中,上传成功后再在下面填写你的域名。
2、在“设置与开发”→“基本配置”→“IP白名单”中配置你的IP地址,这里的IP地址是获取签名步骤时需要访问的IP地址。
3、在“设置与开发”→“基本配置”中拿到APPID及密钥(也就是开发者密码AppSecret),这里在获取签名时需要用到。
4、实现代码
首先先要引入一个文件
我把这个js文件放在了components文件夹里,如图:
也可以这样引入, 如下:
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
然后开始写代码
import wx from '../../components/jweixin-1.4.js' let param = window.location.href.split('#')[0]; this.$myRequest({ url: '/index/wxshare/callback', data: { url: urlone } }) .then((res) =>{ console.log(res.data.data) let s = res.data.data wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: s.appId, // 必填,公众号的唯一标识 timestamp: s.timestamp, // 必填,生成签名的时间戳 nonceStr: s.nonceStr, // 必填,生成签名的随机串 signature: s.signature,// 必填,签名 jsApiList: ["updateTimelineShareData","updateAppMessageShareData",'checkJsApi',"onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ"] // 必填,需要使用的JS接口列表 }); wx.ready(function() { wx.onMenuShareTimeline({ //生成微信朋友圈的 title: `${_this.list.goodsName}`, // 分享标题 desc: 'sssssss', // 分享描述 link: '', // 分享链接 imgUrl: "https://cdn.llscdn.com/thumbnail.jpg", // 分享图标 success: function () { }, }) wx.onMenuShareAppMessage({ 生成微信朋友的 title: `${_this.list.goodsName}`, // 分享标题 desc: '订单中心分享朋友自定义', // 分享描述 link: '', // 分享链接 imgUrl: "https://cdn.llscdn.com/thumbnail.jpg", // 分享图标 success: function () { } }) wx.error(function(res){ alert(res.errMsg); //config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 }); }) })
你以为写完代码就可以了吗,其实还差一步
5、注意
打开H5链接的时候,需要在公众号里面打开,你也可以随便找个公众号把你的链接发给它,然后从这个公众号打开自己的链接就可以了
到此微信自定义分享就完成啦