美文网首页
微信H5分享配置

微信H5分享配置

作者: 陌夏线 | 来源:发表于2019-07-16 14:38 被阅读0次
    微信分享代码示例

    1.页面在需要调用JS接口的页面引入微信JS文件(支持https),推荐1.4.0,低版本有些分享接口即将废弃,具体参考:
    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    

    2.切记参与后台签名的URL地址一定要与分享页的URL地址一致,即location.href.split('#')[0]得到的地址,否者签名一直通不过,之前在这个上面卡了很久。具体分享代码如下(H5无法唤起分享,只能改变分享的标题,描述,图片等信息):

    /**
     * http://res.wx.qq.com/open/js/jweixin-1.4.0.js
     * 调用1.4.0版本微信分享
     */
    let wxTitle = '分享标题'// 分享标题
    let wxDesc = '分享描述'// 分享描述
    let wxImgUrl = 'http://www.baidu.com/1.png'// 分享图标
    let wxShareUrl = 'http://www.baidu.com'// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    
    let ua = window.navigator.userAgent.toLowerCase()
    if (ua.indexOf('micromessenger') > 0) {//微信环境
    
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: 'appid', // 必填,公众号的唯一标识
            timestamp: 'timestamp', // 必填,生成签名的时间戳
            nonceStr: 'nonceStr', // 必填,生成签名的随机串
            signature: 'signature',// 必填,签名,见附录1
            jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData'
            ]
        })
    
        wx.ready(function () {
            //分享给朋友
            wx.updateAppMessageShareData({
                title: wxTitle, 
                desc: wxDesc, 
                link: wxShareUrl, 
                imgUrl: wxImgUrl, 
                type: 'link', // 分享类型,music、video或link,不填默认为link
                dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                }
            })
    
            //分享到朋友圈
            wx.updateTimelineShareData({
                title: wxTitle, 
                link: wxShareUrl, 
                imgUrl: wxImgUrl, 
                success: function () {
                    // 用户确认分享后执行的回调函数
                }
            })
    
        })
        
    }
    

    相关文章

      网友评论

          本文标题:微信H5分享配置

          本文链接:https://www.haomeiwen.com/subject/vcftlctx.html