前端实现微信分享

JAY.LIN 收录于微信分享前端 Js

2025-01-02 约 786 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=72866841

前端实现微信分享

前端实现微信分享。

1.申请微信公众平台中的JS接口安全域名

2.配置开发环境

3.调用js-sdk开放的微信分享接口

4.实现分享

引入微信开发js

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

配置环境。注意事项：使用到哪些接口需要在jsApiList中列出来。

wx.config({
        debug : false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId : 'wx622ca8545e5c354b', //必填，公众号的唯一标识
        timestamp : timestamp, //必填，生成签名的时间戳
        nonceStr : nonceStr, //必填，生成签名的随机串
        signature : signature,//必填，签名，见附录1
        jsApiList : [ 'onMenuShareAppMessage','onMenuShareTimeline' ]//必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

调用接口。注意事项：处理事件放在wx.ready()中。

wx.ready(function(){
        wx.onMenuShareTimeline({
            title: $('#friendGroupTittle').val(),
            link: $('#friendGroupLink').val(),
            imgUrl: $('#friendGroupsUrl').val(),
            success: function () { 
                // 用户确认分享后执行的回调函数
                 alert('分享到朋友圈成功');
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
                 alert('你没有分享到朋友圈');
            }
        });
        wx.onMenuShareAppMessage({
              title: $('#friendGroupTittle').val(),
              desc: $('#friendGroupContent').val(),
              link: $('#friendGroupLink').val(),
              imgUrl: $('#friendGroupsUrl').val(),
              trigger: function (res) {
                // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
              },
              success: function (res) {
                  alert('分享给朋友成功');
              },
              cancel: function (res) {
                alert('你没有分享给朋友');
              },
              fail: function (res) {
                alert(JSON.stringify(res));
              }
            });
    });

要分享的内容

<input type="hidden" value="分享到朋友圈的内容" id="friendGroupContent"/>
<input type="hidden" value="分享到朋友圈的图片路径" id="friendGroupsUrl"/>
<input type="hidden" value="分享到朋友圈的标题" id="friendGroupTittle"/>
<input type="hidden" value="分享到朋友圈的链接" id="friendGroupLink"/>

目录

前端实现微信分享

前端实现微信分享