移动端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. Python _PyQt5 【总】

    http://www.cnblogs.com/archisama/p/5442071.html QtCore QtGui QtWidgets QtMultimedia QtBluetooth QtNe ...

  2. 入坑 docsify,一款神奇的文档生成利器!

    layout: postcategory: javatitle: 入坑 docsify,一款神奇的文档生成利器!tagline: by 沉默王二tags: - java Guide 哥是我认识的一个非 ...

  3. 分享用MathType编辑字母与数学公式的技巧

    利用几何画板在Word文档中画好几何图形后,接着需要编辑字母与数学公式,这时仅依靠Word自带的公式编辑器,会发现有很多公式不能编辑,所以应该采用专业的公式编辑器MathType,下面就一起来学习用M ...

  4. 在线思维导图Ayoa共享功能使用教程

    Ayoa是一个制作思维导图的软件,除了导图制作,小编在使用过程中还发现了一些令人惊喜的功能,这些功能使得Ayoa有了更大的亮点以吸引用户. 下面就为大家简单介绍几个小编认为Ayoa中较为实用的共享功能 ...

  5. sentinel--初级使用篇

    1.官方资料 github官网地址:https://github.com/alibaba/Sentinel wiki:https://github.com/alibaba/Sentinel/wiki/ ...

  6. 3.深入Istio:Pilot配置规则ConfigController

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 本文使用的Istio源码是 release 1.5. Config Controller ...

  7. pyhon的6大基本数据类型

    1.数字型(Number) 1.1 整型(int) 整型包括所有的正整数,负整数还有0. 在python中所有的整型数据全部默认采用十进制进行表示,但我们还可以手动表示其他进制的整型,具体表示如下: ...

  8. vue微博回调接口

    1.vue微博回调空页面 注:微博回调空页面为: http://127.0.0.1:8888/oauth/callback/ 1.1 页面路径 components\oauth.vue <tem ...

  9. Django 的JsonResponse 与json

    json

  10. python 子进程

    1.线程的介绍(理论部分) 1.1 进程线程分工 我们之前讲运行一个py文件,就是开启了一个进程,在内存中开辟一个进程空间,将必要的数据加载到这个进程空间,然后cpu在去调用这个进程的主线程去执行具体 ...