微信公众号-- 微信分享功能(分享到朋友和朋友圈显示图片和简介)

简介: 页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片

1.效果图对比

04c053ddef9ad994592c9939b0a4686822cdb970

2.之前踩过的坑

页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片

链接:blog.csdn.net/aoshilang22…

c970c0d4c0c9aab3b57009032baee825deb7256b

结果: 并没有什么效果,原因:微信对自定义分享内容作了限制,最终还是要依靠配置wx.config。

3.详细看了一边官方的文档:

链接:mp.weixin.qq.com/wiki?t=reso…ain&id=mp1421141115

0747e77b604d2f4c3676c979ea0594cd1a004ba0

看一遍,觉得自己的智商似乎下线了,一脸蒙状态

4.摸索半天,+++无数次骚扰度娘以后,差不多摸清楚了,everybody跟我走起哈(自己的项目是react框架,主要差不多,其他的根据自己的需求自行调整哈)

(1)准备,设置js接口安全域名

7788a0d7df0108558b1264aa1972598ad3c13ad3


(2)引入JS文件

9e6cda482f5a2f9b6283104c9b3b432c631ff137

(4)根据分享的要求,按照官方的接口调取写法,自由发挥啦啦啦~~~~


  wx.config({
                debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: json.appId, // 必填,公众号的唯一标识
                timestamp:json.timestamp , // 必填,生成签名的时间戳
                nonceStr: json.nonceStr, // 必填,生成签名的随机串
                signature: json.signature,// 必填,签名
                jsApiList: [
                    'onMenuShareTimeline', 'onMenuShareAppMessage',
                    'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'
                ] // 必填,需要使用的JS接口列表
            });
            wx.ready(function() {
                // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,
                // 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
                //分享到朋友圈
                wx.onMenuShareTimeline({
                    title:shareTitle, // 分享标题
                    link:location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl:"https://jinshang-hz.oss-cn-hangzhou.aliyuncs.com/data/share/images/recruit_action.jpg", // 分享图标
                    success: function () {
                        // 用户点击了分享后执行的回调函数
                        console.log("11");
                    },
                });
                //分享给朋友
                wx.onMenuShareAppMessage({
                    title:shareTitle, // 分享标题
                    desc:mySlogon, // 分享描述
                    link:location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "https://jinshang-hz.oss-cn-hangzhou.aliyuncs.com/data/share/images/recruit_action.jpg", // 分享图标
                    type: '', // 分享类型,music、video或link,不填默认为link
                    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                    success: function () {
                      // 用户点击了分享后执行的回调函数
                        console.log("22");
                    }
                });

5.参考文章

(1)[http://www.cnblogs.com/stoneniqiu/p/6286599.html]()
(2)[https://blog.csdn.net/HaleyLiu123/article/details/78002835?locationNum=4&fps=1]()
复制代码

灰常感谢前面踩坑的前辈们的分享~~~~



原文发布时间为:2018年06月26日
原文作者: 汪小蓉
本文来源:  掘金  如需转载请联系原作者
相关文章
|
8月前
|
算法 iOS开发 CDN
“企业微信iPad协议”第 0x04 天:当朋友圈接口在凌晨 2:14 突然返回 404
新品上线紧急任务:300位经销商朋友圈同步海报。突破官方限制,利用企业微信iPad协议私有接口,自动化上传发布。凌晨遭遇404,迅速定位并修复算法版本问题,最终高效完成推送,点赞超4200。技术在文档之外,也在边界之内。
368 0
|
8月前
|
iOS开发
“企业微信iPad协议”第0x0B次编译:当朋友圈接口在凌晨悄然返回空数组
新品海报发布失败,排查发现企业微信iPad端因本地时间偏差超60秒,导致`ext_ticket`校验失败。NTP校准后恢复正常。问题根源:独立加签逻辑对时间敏感,且错误不提示。精准时间成合规关键。
427 0
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2306 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
10月前
微信养号脚本,自动加好友定时看朋友圈,发动态点赞评论
这个工具其实是我之气那在某公司上班时候给领导开发的,其实前期还是花了不少时间,估计半个月时间
|
人工智能 自然语言处理
使用企业微信或公众号自动回复图片消息
AppFlow支持企业微信和公众号接收图片消息,并提供两种回复方式。方式一:直接回复图片消息,用户发送图片后立即收到回复,但无法继续追问。方式二:先保存图片,待用户发送文字后再一并处理并回复。配置步骤包括选择模板、配置鉴权信息、设置执行动作参数及发布连接流。详细操作可参考相关文档。
1678 1
使用企业微信或公众号自动回复图片消息
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
3995 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
3447 0
|
算法 小程序 Java
java制作海报三:获取微信二维码详情,并改变大小,合成到海报(另一张图片)上
这篇文章介绍了如何使用Java获取微信小程序的二维码,并将其调整大小后合成到海报(另一张图片)上。
360 0
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。

热门文章

最新文章