美文网首页
微信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 页面在微信端的分享

    微信分享,咋一看好像很复杂,实则非常简单。只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在...

  • 微信分享

    微信分享,咋一看好像很复杂,实则非常简单。只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在...

  • js处理微信分享配置

    整理一下通过h5做微信分享相关配置。 流程介绍 公众号配置(AppID、IP白名单、JS接口安全域名) 网页授权 ...

  • 微信h5页面 ios wx.chooseImage无效

    具体流程:vue项目,几个微信h5页面,A页面(隐藏了微信分享)跳转到B页面(隐藏了微信分享),使用 a链接跳转 ...

  • 公众号H5中wx.config()踩坑

    微信公众号H5在配置微信参数的时候提示config:fail,Error: 系统错误错误码63002,invali...

  • html5仿微信界面|h5仿微信聊天实战项目

    html5+css3高仿微信聊天|h5仿微信界面|仿微信朋友圈|仿微信红包|h5仿微信支付键盘|h5仿微信群聊 近...

  • 2020开发H5还能赚钱吗?

    H5:简单、简约、好看、兼价 H5=HTML5? H5=微信网页? H5在国内火于微信,16年微信H5非常火,过了...

  • 微信H5分享配置

    微信分享代码示例 1.页面在需要调用JS接口的页面引入微信JS文件(支持https),推荐1.4.0,低版本有些分...

  • 介绍

    什么场景下使用微信分享 线下推广、线上传播 分享渠道:H5、小程序、App 分享方式:微信好友、朋友圈、QQ好友、...

  • 微信H5页面分享失败问题

    遇到的问题:微信H5分享到QQ成功、分享到朋友圈、好友是一个链接 具体问题:在微信聊天界面使用链接打开写好的H5页...

网友评论

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

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