微信公众号自定义分享

article/2025/9/22 0:36:30

效果图：

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.datawx.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可以在这里更新签名。});})})

你以为写完代码就可以了吗，其实还差一步