关闭

H5微信JS-SDK实现分享朋友、朋友圈以及QQ自定义分享

时间: 2018-08-08阅读: 2948标签: 微信

1.准备工作

  APPID公众号id、申请好友分享接口、ip白名单、js接口安全域名设置(必须是通过备案)。要先登录微信公众平台进入“公众号设置”的功能设置里填写“js接口域名”


2.引入js

注意:支持使用AMD/CMD标准加载方法

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


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

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需要调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushShate的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题在Android6.2修复)

wx.config({
debug: true, //开启调试模式,调用所有的api的返回值会在客户端alert出来,若要查看传入的参数,可以在PC端打印出来
appId: '', //必填,公账号的唯一标识
timestamp: '', //必填,生成签名的时间戳
nonceStr: '', //必填,生成签名的随机串
signature: '', //必填,签名
jsApiList: [ //必填,需要使用js列表,否则无法分享成功
'onMenuShareTimeline', //朋友圈
'onMenuShareAppMessage', //朋友
'onMenuShareQQ', //QQ
'onMenuShareWeibo', //QQ空间
]
})


4.通过ready接口处理成功验证

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


5.通过error接口处理失败验证

wx.error({
//config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
});


js代码

var data = {
title: '',
summary: '',
pic: '',
url: '',
success: function(){
getWeixin() ;//用户确认分享后执行的回调函数
},
cancel: function(){
//用户取消分享后执行的回调函数
}
}
wx.config({
swapTitleInWX: true,
appId: "<?php echo $weixin_package['appid'];?>",
timestamp: "<?php echo $weixin_package['timestamp'];?>",
nonceStr: "<?php echo $weixin_package['noncestr'];?>",
signature: "<?php echo $weixin_package['signature'];?>",
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
]
})
wx.ready(function () {
wx.onMenuShareTimeline(data);
wx.onMenuShareAppMessage(data);
wx.onMenuShareQQ(data)
wx.onMenuShareWeibo(data)
})

注意点:

title,建议在14个字以内图片尺寸: 300*300像素;图片格式:大小不超过10kB,不支持GIF格式;会取当前页面body内最前面的一张符合条件的图片对标题简要解读,建议20字以内link:'', //分享链接,改链接域名或路径必须与当前页面对应的公账号JS安全域名一致


二、QQ分享 

  QQ是通过head里面的标签来识别分享的图标和标题,涉及到h5微数据的一个属性itemprop,

<meta itemprop="name" content="标题"/>
<meta itemprop="description" name="description" content="描述"/>

在js中的应用:获取完数据后自定义分享

/*QQ分享*/
var shareName = '分享标题';
var shareDesc= '分享描述';
var sharePic= '分享图片路径';
var metaStr = '<meta itemprop="name" content="'+shareName+'"/><meta name="description" itemprop="description" content="'+shareDesc+'"/><meta itemprop="image" content="'+sharePic+'"/>';
$('head').append(metaStr);
$('title').html(shareName);



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/994

关闭

套路!陌生美女加微信好友,提出激情裸聊,然后……

一个月黑风高的晚上,你独自刷着朋友圈,突然一个陌生女子要求。添加好友,你第一反应是什么?更要命的是没聊几句话,对方居然要求“裸聊”!

QQ/微信里域名经常被举报二屏蔽?微信/QQ屏蔽域名举报按钮的实现方式

近很多老哥问我,为啥自己的域名在QQ/微信里面很容易被封?1、页面里面的内容违规或者诱导被举报而导致的拦截;2、用户和同行举报;3、腾讯等定期会检查;

微信投票找人拉票怎么算价格?微信买投票多少钱

首先大家为了取得一个良好的名次是可以理解的,但是需要合理的去操作,为什么这么说呢,如果你找到一个不负责的商家不给你控量,或者胡乱操作,往往无得其反,因小失大就不好,所以投票这个还是需要找一个专业的团队

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

微信h5页面下拉露出网页来源的解决办法

微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉,备注:要加上 passive: false,不然会出现以下报错

微信跳转外部浏览器打开的代码实现

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能,目前ios只能通过遮罩层来提示用户,对于安卓可以直接跳转外面默认浏览器

微信开发-自定义分享卡片-node.js实现

本篇主要讲述,如何在微信中打开自家的页面,在然后在用户分享的时候,能由我们自定义分享出去后,展示的页面卡片中的页面标题、页面描述、页面图片和分享链接。

Ios中微信页面返回上一页去除缓存几种常见思路

开发微信H5页面的时候,在Ios微信内置浏览器中点击返回按钮返回上一页时,上一页面不会被刷新。在浏览器缓存机制中,在返回上一页的操作中, html/js/css/接口等动静态资源不会重新请求

微信h5 input输入框软键盘关闭后,页面无法回到正常位置

在ios微信里面打开h5页面,当遇到input输入框调出软键盘时候。用户输入完成失去焦点,键盘收回后,会发现input输入框的位置发现变化的情况。这里需要监听失焦事件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!