为用户创造价值

始终追求工匠精神,是您靠谱的H5开发、小程序开发、微信开发供应商

微信H5开发分享添加图片 标题 描述的方法

2019-08-28 02:05:16

在微信里不是所有的网页都可以按照微信友好的分享形式分享的,对于一般的网页来说(如非被微信屏蔽掉)是可以分享传播的,但仅限于分享转发(就是默认的没图片 默认标题 链接显示)

如果想要更好看,自定义标题 图片 描述,可以。必须要微信认证过,加到自己的白名单里就可以了 说白点就是要掏钱购买公众号,在公众号里绑定Js安全域名。


1 绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限

2 引入js文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如果是和我一样是Vue的在 index.html 文件中的引入

<scripttype="text/javascript"src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

3 通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用
(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用)

也就是说如果你所分享的是多页面的并且都想让别人从H5 入口页面进入那么你只需要进入时配置一次信息就可以了,并不需要每个页面配置一次.

1 首先你需要从后台获取分享配置信息

你需要上传你要分享的的网页链接的 # 以前的
对当前页面链接以# 切割获取# 以前部分进行编码(后台需要相应的解码)

var localUrl = encodeURIComponent(location.href.split('#')[0])

然后传给后台获取配置信息。(因为签名是根据你当前的分享链接 和时间戳生成的),其实这样我们分享出去的链接是被微信加过签名参数的链接,和我们看的链接有点不一样了

 httpGet('xforh5/service/sys/wechat/js/config?url=' + localUrl, {}).then(response => {  //在这里获取到配置信息 进行配置 }

获取回来的配置信息

{
"status": 0,
"result": {
"appId": "wx9e3d362372762cc1",
"timestamp": 1563269390,
"nonStr": "u1n8BylqEcBBlkZ7",
"signature": "72a46eac7b1505e51b148b0949f1f8e90e5ef9ab"
}
}

获取到配置信息后就已完成大半了,接下来就要用的引入的微信 JS Api

wx.config({

})

wx.config({            debug: false, //默认为false 为true的时候是调试模式,开启调试模式,调用的所有api的返回值会在客户端alert出            appId: appId,//必填,公众号的唯一标识            timestamp: timestamp,// 必填,生成签名的时间戳            nonceStr: nonStr,// 必填,生成签名的随机串            signature: signature,// 必填,签名// 必填,需要使用的JS接口列表            jsApiList: [              'checkJsApi',              'onMenuShareTimeline',              'onMenuShareAppMessage',              'onMenuShareQQ',              'onMenuShareWeibo',              'onMenuShareQZone',              'updateAppMessageShareData',              'updateTimelineShareData',            ],          });

需要的JS接口列表 根据公司分享需要选择接口

wx.ready(function () {

})
上面 config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

wx.ready(function () {            wx.onMenuShareAppMessage(window.share_config.share); // 微信好友            wx.onMenuShareTimeline(window.share_config.share); // 微信朋友圈            wx.onMenuShareQQ(window.share_config.share); // QQ            wx.updateAppMessageShareData(window.share_config.share);              wx.updateTimelineShareData(window.share_config.share);          });
window.share_config.share 挂载的分享的配置信息

//配置自定义分享内容
window.share_config = {
share: {
title:  自定义标题, // 这是分享展示卡片的标题
desc: 自定义描述, // 这是分享展示的摘要
link: 要分享的链接, // 这里是分享的网址
imgUrl: 右下角显示图标, // 这里是需要展示的图标
success: function (rr) {
分享成功回调 可以在这儿加 alert 打印 便于调试
console.log('成功' + JSON.stringify(rr))
},
cancel: function (tt) {
分享失败回调 可以在这儿加 alert 打印 便于调试
console.log('失败' + JSON.stringify(tt));
}
}
};

wx.error(function (res) {

})
在error 函数中可获取的错误信息,尤其是配置信息的错误,因为需要先配置配置信息然后微信验证,验证通过后再调用  wx.ready() 里的分享配置信息(其实验证不通过也会走 应该是异步的)

所以在这里看错误信息很重要 可以加 alert  当然如果是调试模式它自己也会跳出alert 提示

注意

发生错误信息检查
1 公众号 appid是否绑对了
2 安全域名是否改了
3 就是取配置信息的时候是否取到并且上传对了(我就是以为对着api字段就没事儿,结果有个字段和后台传过来的不一致然后一直配置信息失败 提示 invalid signature)

最后附上完整分享函数  只需要在你获取到需要分享的必要信息在调用(记得修改里面的参数)

share() {        //对url 进行编码var localUrl = encodeURIComponent(location.href.split('#')[0]);//// //url传到后台的格式// var url = 'URL=' + localUrl;// //这几个参数都是后台从微信公众平台获取到的// var nonceStr,signature,timestamp,appId,shareUrl;//+ this.$route.query.viewidlet currentUrl = location.href        httpGet('xforh5/service/sys/wechat/js/config?url=' + localUrl, {}).then(response => {          const {appId, nonStr, signature, timestamp} = response.result          //通过微信config接口注入配置          wx.config({            debug: false, //默认为false 为true的时候是调试模式,会打印出日志            appId: appId,            timestamp: timestamp,            nonceStr: nonStr,            signature: signature,            jsApiList: [              'checkJsApi',              'onMenuShareTimeline',              'onMenuShareAppMessage',              'onMenuShareQQ',              'onMenuShareWeibo',              'onMenuShareQZone',              'updateAppMessageShareData',              'updateTimelineShareData',            ],          });          //配置自定义分享内容window.share_config = {            share: {              title:  `自定义标题`, // 这是分享展示卡片的标题              desc: `自定义描述`, // 这是分享展示的摘要              link: `要分享的链接`, // 这里是分享的网址              imgUrl: `右下角显示图标`, // 这里是需要展示的图标              success: function (rr) {             ` 分享成功回调 可以在这儿加 alert 打印 便于调试`console.log('成功' + JSON.stringify(rr))              },              cancel: function (tt) {              ` 分享失败回调 可以在这儿加 alert 打印 便于调试`console.log('失败' + JSON.stringify(tt));              }            }          };          // config          wx.ready(function () {            wx.onMenuShareAppMessage(window.share_config.share); // 微信好友            wx.onMenuShareTimeline(window.share_config.share); // 微信朋友圈            wx.onMenuShareQQ(window.share_config.share); // QQ            wx.updateAppMessageShareData(window.share_config.share);              wx.updateTimelineShareData(window.share_config.share);          });          wx.error(function (res) {          });        });      }



蓝畅信息技术有限公司成功为多家世界财富500强企业以及其他著名品牌提供优质服务,是您靠谱的互联网开发供应商。

服务客户遍及北京、上海、杭州、深圳、广州、天津、青岛、南京、宁波、苏州、无锡、厦门、重庆、西安等大中型城市及地区    主要业务:H5开发,H5设计,H5外包,微信开发外包,H5商城开发,小程序商城开发,网站开发外包,H5游戏开发,小程序开发外包,小程序设计、APP开发外包,UI设计,视频后期制作等


 
上一篇:EDM电子邮件营销的两种形式
下一篇:H5移动端页面设计须知

相关阅读推荐:

微信7.0.7内测新版本, 新加入了多个全新的功能

为什么要做SEO?网站做SEO的好处

H5设计没灵感?H5案例参考汇总来了

H5开发移动应用的优势是什么

H5游戏开发指南

h5开发的优势是什么?

完全个性化设计,专属定制研发应用软件,安全技术运维服务!