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

AaronYuan 发布于2019-08-23 15:15 / 1304人阅读

摘要：引入微信当前最新版本相关代码移动端实测需做老版本兼容这里如果采用的并非当前页可能会出错，具体原因有待查找分享显示的小图实测可以使用其它比列，最好使用小尺寸正方形域名也要在安全域名之下数据请求，根据项目需求更改这是请求配置项的接口是否

create-at 2019-02-16

引入微信JS-SDK 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...

欢迎交流 Github

云服务器 GPU云服务器手机端微信分享php 微信分享微信分享参数微信php分享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101750.html

微信二次分享

摘要：接下来通过详细的步骤介绍如何接入微信二次分享操作。不要尝试在中使用异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用的回包会还没有返回用户点击分享到朋友圈已分享已取消此时微信二次分享就已经大功告成了。微信二次分享效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何运行项目 ...

Betta 2019-08-02 11:54 评论0 收藏0
微信二次分享

摘要：接下来通过详细的步骤介绍如何接入微信二次分享操作。不要尝试在中使用异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用的回包会还没有返回用户点击分享到朋友圈已分享已取消此时微信二次分享就已经大功告成了。微信二次分享效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何运行项目 ...

NusterCache 2019-08-29 17:09 评论0 收藏0
微信二次分享

摘要：接下来通过详细的步骤介绍如何接入微信二次分享操作。不要尝试在中使用异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用的回包会还没有返回用户点击分享到朋友圈已分享已取消此时微信二次分享就已经大功告成了。微信二次分享效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何运行项目 ...

Kahn 2019-08-23 12:42 评论0 收藏0
移动弹窗基础知识浅析——IOS弹窗体系

摘要：尤其是遇到二次确认等场景因此，打算从头整理移动弹窗的基础知识，以弹窗体系为切入点，从定义出发，对移动弹窗进行分类，然后分别分析每一类弹窗的应用场景，以及在使用过程中需要注意的点。摘要：最为常见的【弹窗】反而是最捉摸不定的东西。各种类型的弹窗傻傻分不清楚，不知道在什么场景下应该用哪种弹窗。尤其是遇到二次确认等场景…… 因此，打算从头整理移动弹窗的基础知识，以iOS弹窗体系为切入点，从...

jas0n 2019-06-28 10:58 评论0 收藏0