微信分享，二次分享(移动web端)

Myth丶恋晨 2022-03-07 07:46 234阅读 0赞

> create-at 2019-02-16

引入微信JS-SDK [http://res.wx.qq.com/open/js/...][http_res.wx.qq.com_open_js_...] (当前最新版本)

js 相关代码 (移动端实测, 需做老版本兼容)

function weChatShare(title,desc) {
        var link = window.location.href;
        var serverUrl = encodeURIComponent(link);
        var imgUrl = '分享显示的小图'; //80*80 实测可以使用其它比列，最好使用小尺寸正方形,域名也要在安全域名之下
    
        // 数据请求，根据项目需求更改
        function ajaxFn() {
            var xhr = new XMLHttpRequest()
    
            xhr.open('get', '这是请求配置项的接口?url=' + serverUrl, true)
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                    wxConfig(JSON.parse(xhr.responseText))
                }
            }
            xhr.send()
        }
    
        function wxConfig(res) {
            wx.config({
                // 是否开启调试（会返回一些错误原因）
                debug: true,
                // 公众号的唯一标识
                appId: res.appId,
                // 签名的时间戳
                timestamp: res.timestamp,
                // 签名的随机串
                nonceStr: res.nonceStr,
                // 签名
                signature: res.signature,
                // 需要调用的JS接口
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'onMenuShareAppMessage',
                    'onMenuShareTimeline'
                ]
            });
    
            // config 验证后会执行ready方法
            wx.ready(function () {
                var shareConfig = {
                    title: title,
                    desc: desc,
                    link: link,
                    imgUrl: imgUrl
                };
    
                // 目前新版方法存在问题，所以如果有老方法，优先选择老方法
                if(wx.onMenuShareAppMessage){
                    wx.onMenuShareAppMessage(shareConfig);
                    wx.onMenuShareTimeline(shareConfig);
                } else {
                    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
                    wx.updateAppMessageShareData(shareConfig);
                    // 朋友圈
                    wx.updateTimelineShareData(shareConfig);
                }
            });
    
            wx.error(function (res) {
                // config信息验证失败
                console.log(res);
            });
        }
    
        ajaxFn()
    }
    
    weChatShare('tit', 'des')

本篇文章只是做了方法整合，详见 [https://mp.weixin.qq.com/wiki...][https_mp.weixin.qq.com_wiki...]

> 交流 [Github blog issues][]

[http_res.wx.qq.com_open_js_...]: http://res.wx.qq.com/open/js/jweixin-1.4.0.js
[https_mp.weixin.qq.com_wiki...]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432
[Github blog issues]: https://github.com/NameHewei/blog/issues

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关微信分享

index.js import wxapi from '@/utils/wxapi' import { getWxShare } from '@/api/i

╰+哭是因爲堅強的太久メ/ 2022年12月13日 01:48/ 0 赞/ 220 阅读

相关 Android 微信分享

Android微信分享准备工作微信示例程序使用微信SDK部署自己的第三方应用

灰太狼/ 2022年08月18日 00:41/ 0 赞/ 331 阅读

相关移动端地图技术分享

该文章属于<简书 — 刘小壮>原创，转载请注明： [<简书 — 刘小壮> http://www.jianshu.com/p/41179be5893a][_ _ http_

青旅半醒/ 2022年07月16日 08:14/ 0 赞/ 212 阅读

相关移动端微信分享

微信分享，咋一看好像很复杂，实则非常简单。只需要调用微信官方出的微信jssdk，加上些许配置，就可以实现h5页面在微信上的分享，官方文档地址为：https://mp.w

柔情只为你懂/ 2022年05月14日 10:06/ 0 赞/ 165 阅读

相关 java开发-微信二次分享

> 今天踩了一个很大的坑。。我发现微信坑真多啊。微信做的东西真的不屑于评论啊。刚开始坑公众号开发，然后坑微信支付开发，然后坑小程序开发。我真的走不出来了。。。。关键还没办法。

悠悠/ 2022年04月03日 08:51/ 0 赞/ 280 阅读

相关微信分享，二次分享(移动web端)

> create-at 2019-02-16 引入微信JS-SDK [http://res.wx.qq.com/open/js/...][http_res.wx.qq.com

Myth丶恋晨/ 2022年03月07日 07:46/ 0 赞/ 235 阅读

相关 H5前端实现微信分享(处理二次分享问题)

下面是我的核心代码 1、引入微信的js文件。 <script type="text/javascript" src="https://res.wx.qq.c

阳光穿透心脏的1/2处/ 2022年02月22日 16:56/ 0 赞/ 1761 阅读

相关微信分享接口

微信分享接口主要以公众号文档为标准下载微信分享的sdk文件包 DEMO页面： http://demo.open.weixin.qq.com/jssdk

太过爱你忘了你带给我的痛/ 2021年11月02日 17:32/ 0 赞/ 426 阅读

相关微信分享

WxHandler.ashx using System; using System.Text; using System.Web; usi

末蓝、/ 2021年06月26日 16:06/ 0 赞/ 599 阅读

相关 js微信分享

微信于2014年12月30日发布了《微信公众平台关于整顿诱导分享及诱导关注行为的公告》，原有的微信分享功能不能用了（下面文章内容），但是微信于2015年1月10日即时发布...

朱雀/ 2020年06月19日 08:30/ 0 赞/ 913 阅读