资讯专栏INFORMATION COLUMN

定制微信分享的内容(备忘)

Java_oldboy / 1939人阅读

摘要:微信分享的内容,从视觉上看有三个部分标题描述图片。声明年月日,微信宣布未接入的网站将统一显示默认缩略图所以在某些时候,订制内容是极为必要的。

微信分享的内容,从视觉上看有三个部分:标题、描述、图片。
如果不使用微信的 jssdk 进行订制的话,微信会截取一张大概 300*300 并且距离 标签最近的一张图片作为需要的图片;标题会选取中的内容;描述则会是该页面的 URL。

声明:2017年3月29日,微信宣布未接入 JSSDK 的网站将统一显示默认缩略图

所以在某些时候,订制内容是极为必要的。
需要做的事情也很简单
首先需要和微信服务器交互以获得以下字段,这些字段通常由服务端获取并传递给前端:
appId 公众号的唯一标识
timestamp生成签名的时间戳
nonceStr生成签名的随机串
signature签名(获取签名比获取其他字段稍微麻烦一点)

获取了之后,在你的标签中写如下的代码

 wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: yourAppId, // 必填,公众号的唯一标识
                timestamp: yourtimestamp, // 必填,生成签名的时间戳
                nonceStr: yournonceStr, // 必填,生成签名的随机串
                signature: yoursignature,// 必填,签名
                jsApiList: [
                    "checkJsApi",
                    "onMenuShareTimeline",
                    "onMenuShareAppMessage",
                    "onMenuShareQQ",
                    "onMenuShareWeibo"
                ] // 必填,需要使用的JS接口列表(此处接入了四个用于分享的接口),所有JS接口列表见官方文档
            });
            
            window.share_config = {
                "share": {
                    "title" : "",//分享卡片标题
                    "desc" : " ",//摘要,只有发给朋友才显示摘要。
                    "imgUrl": "",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。
                    "link": window.location.href,//分享出去后的链接,这里可以将链接设置为另一个页面。
                    "success":function(){
                        //分享成功后的回调函数
                    },
                    "cancel": function () { 
                        // 用户取消分享后执行的回调函数
                    }
                }
            };  
            wx.ready(function () {
                wx.onMenuShareAppMessage(share_config.share);//分享给好友
                wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
                wx.onMenuShareQQ(share_config.share);//分享给手机QQ
                wx.onMenuShareWeibo(share_config.share);//分享给微博
            });

把以上代码写进去就 ok 啦,

参考文章:
官方文档:http://mp.weixin.qq.com/wiki/...
http://meiminjun.github.io/20...
http://chitanda.me/2015/06/19...

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

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

相关文章

  • 撸一个会话备忘小程序

    摘要:最终实现的撮图目的借助小程序记录微信日常会话中的重要信息,数据在本地缓存中操作,纯前端无后台,不用担心信息泄露问题。 最终实现的撮图:showImg(https://raw.githubusercontent.com/WGinit/Assets/master/images/memo/1.jpg);showImg(https://raw.githubusercontent.com/WGi...

    leon 评论0 收藏0
  • 100行代码,轻松搞定文本编辑器中草稿箱

    摘要:本文节选自设计模式就该这样学使用备忘录模式实现草稿箱功能大家都用过网页中的富文本编辑器,编辑器通常都会附带草稿箱撤销等操作。首先创建发起人角色编辑器类。 本文节选自《设计模式就该这样学》1 使用备忘录模式实现草稿箱功能大家都用过网页中的富文本编辑器,编辑器通常都会附带草稿箱、撤销等操作。下面用一段代码来实现一个...

    番茄西红柿 评论0 收藏2637
  • 来 DIY 个机器人 - 收藏集 - 掘金

    摘要:能不能省掉这些烦琐的步骤,让开发人员自己完成呢现在好了,你可以用和把聊天机器人接入微信工具资源掘金今晚看了个电影,回得有点迟。 小花猫-网页聊天机器人 - 前端 - 掘金 基于图灵机器人API的网页聊天机器人,输入二维码+你要说的话有惊喜哦~~~(菜单中的功能尚未开发完成,玩玩聊天功能就好了~)代码开源在https://github.com/ColorfulCa... 了~... (英...

    mrli2016 评论0 收藏0
  • 80亿大单!数据港又签下阿里哪些数据中心?

    摘要:近日,数据港发布公告表示,公司已与阿里巴巴顺利签署了关于等五个云计算数据中心基地园区项目的合作备忘录。此次数据港与阿里巴巴亿大单的签订标志着数据港业务规模将会大幅增长。近日,数据港发布公告表示,公司已与阿里巴巴顺利签署了关于ZH13等五个云计算数据中心基地园区项目的合作备忘录。备忘录明确约定了包括项目合作内容、项目合作周期、费用结算、违约罚则、法律效力及生效条款等所有主要商务条款。据悉,20...

    XiNGRZ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<