移动端H5微信分享功能,可以使项目更好地传播。

微信官方教程文档:  微信JS-SDK说明文档

步骤一:绑定域名

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

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

步骤二:引入JS文件

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

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

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

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});

步骤四:通过ready接口处理成功验证

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

步骤五:通过error接口处理失败验证

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

干货:微信js文件升级到1.4后,原有的一些分享接口即将被废弃,下面讲解最新的两个分享接口的使用

var domain ="http://"+ document.domain;
s_link = window.location.href;
s_py_title ="分享朋友圈标题";
s_title ="分享标题";
s_desc="分享描述";
s_imgurl="分享图片"; setTimeout(function(){
$.ajax({
url:"后台人员编写接口的地址",
data:{url:window.location.href},
dataType:'jsonp',
type:'POST',
success:function(res) {
var data = res.data;
initwxConfig(data.signature, data.appId, data.nonceStr, data.timestamp);
}
}); },200) function initwxConfig(signature, appId, nonceStr, timestamp) {
try {
wx.config({
debug: false,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'checkJsApi',
'updateTimelineShareData',
'updateAppMessageShareData',
]
});
wx.ready(function() {
try {
initwxshare();
} catch(e) {
//alert('wxready:'+e);
}
});
} catch(e) {
//alert(e);
}
} function initwxshare(){
wx.updateTimelineShareData({
title: s_py_title, //
link: s_link, //
imgUrl: s_imgurl, //
success: function (e) {
//“分享到朋友圈”及“分享到QQ空间”
},
cancel: function (e) { }
}); wx.updateAppMessageShareData({
desc:s_desc, //
title: s_title, //
link: s_link, //
imgUrl: s_imgurl, //
success: function (e) {
//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
},
cancel: function (e) { }
});
}

 操作:创建一个share.js文件,把上面代码复制进去,然后配置相关信息,需要后台人员编写对应接口,然后在页面引入js文件!

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

 <script src="js/share.js"></script>

 

移动端H5微信分享的更多相关文章

  1. h5微信分享

    h5分享的步骤(前端需要完成的部分) 1.绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 2.引入Js文件 在需要调用JS接口的页面引入如下JS文件,(支持ht ...

  2. ionic2+Angular web端 实现微信分享以及如何跳转回分享出去的页面

    微信分享,首先参考微信JS-SDK开发文档. step1:在启动文件index.html中引入微信js文件: <script src="http://res.wx.qq.com/ope ...

  3. H5微信分享相关规范

    微信分享 用户调用微信的分享功能,可以自定义分享的title和描述,以及小图标和链接.可以分享到群.好友.朋友圈.QQ.QQ空间等. 分享设计规范 分享标题:14字以内,建议使用朋友般亲切的口吻 分享 ...

  4. h5 微信分享朋友和朋友圈

    生成JS-SDK权限验证签名 实现发送给朋友和分享到朋友圈时内容参数自定义 一.微信JS-SDK 1. 获得Access Token access token的获得方法在前面有介绍,详情见 微信公众平 ...

  5. H5页面微信分享和手Q分享设置

    RT: 一. 手Q分享: 如下代码所示:设置好 description,name,image,即可,唯一注意的是image最好是200*200,要不然过小不美观,过大加载太慢 <head> ...

  6. H5页面分享微信自定义分享title和img

    前端开发H5 需分享到朋友圈和发给好友,想自定义分享的title和图表还有简短一句话,还需调用微信的api 首先需获取到微信的appId,timestamp,nonceStr,signature 微信 ...

  7. 移动端H5多平台分享实践--摘抄

    作者:大漠 日期:2018-01-20 点击:628 mobile 编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货. 点击 ...

  8. h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)

    h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...

  9. 亲历H5移动端游戏微信支付接入及那些坑(二)——获取Openid和授权

    第一篇中将一些坑说明,那么这篇开始正式进入接入步骤.具体的参数说明,我不会列出,毕竟微信官方文档都有,我想大家都看的懂,而且这接口也有可能微信会变动,所以不列出来,也是不想引起大家的误解,接入步骤只起 ...

随机推荐

  1. Ceph的参数mon_osd_down_out_subtree_limit细解

    前言 之前跟一个朋友沟通一个其他的问题的时候,发现了有一个参数 mon osd down out subtree limit 一直没有接触到,看了一下这个参数还是很有作用的,本篇将讲述这个参数的作用和 ...

  2. asp.net core 使用 TestServer 来做集成测试

    asp.net core 使用 TestServer 来做集成测试 Intro 之前我的项目里的集成测试是随机一个端口,每次都真实的启动一个 WebServer,之前也有看到过微软文档上 TestSe ...

  3. [从源码学设计]蚂蚁金服SOFARegistry之程序基本架构

    [从源码学设计]蚂蚁金服SOFARegistry之程序基本架构 0x00 摘要 之前我们通过三篇文章初步分析了 MetaServer 的基本架构,MetaServer 这三篇文章为我们接下来的工作做了 ...

  4. 你真的能分清putc()函数和fputc()函数吗?

    最近小编在讲关于C语言文件部分内容,讲到了fputc()函数.前面在讲字符串的时候,我们还学习过putc()函数,我们知道,putc()函数一般用于标准输出,fputc()函数一般用于文件读写.刚才呢 ...

  5. Dnscat2实现DNS隐蔽隧道反弹Shell

    DNS介绍 DNS是域名系统(Domain Name System)的缩写,是因特网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住能够被 ...

  6. weblogic ssrf 漏洞笔记

    CVE-2014-4210 Oracle WebLogic web server即可以被外部主机访问,同时也允许访问内部主机.比如有一个jsp页面SearchPublicReqistries.jsp, ...

  7. 常见web漏洞修复方法

    方法如下: 漏洞修复.(输入过滤,输出转义) 1.在连接数据库时,在接收参数后进行转义,$id = mysql_real_escape_string($id); 2.在网页源码中在接收参数后可用htm ...

  8. 关于Java集合框架,这篇讲的还算不错了,建议大家看看!

    集合框架 为什么要用集合而非数组: 虽然数组是保存一组对象最有效的方式,但是数组具有固定尺寸,但在写程序时并不知道将需要多少个对象.而集合能够自动地调整自己的尺寸. 打印数组时,必须使用Arrays. ...

  9. Guitar Pro小课堂——如何进行消音

    在我们弹吉他时,消音技术是必须掌握的一项吉他技能.在我们遇到休止符时.乐曲结束时.乐段,乐句中止时.吉他旋律的分句,呼吸处:变换和弦时的低音(尤其是空弦低音).断奏.弹奏强音时其他空弦被激起的共鸣音( ...

  10. 能否安装 CrossOver 上没有的软件

    系统兼容软件CrossOver可以像虚拟机一下帮助我们在Mac或者Linux上运行Windows应用程序,快速实现跨平台文件互通,所以我们也称它为类虚拟机. 不需要安装Windows操作系统的Cros ...