移动端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. USACO 2020 OPEN Favorite Colors【并查集-启发式合并-思考】

    题目链接 题意简述 仰慕喜欢同色奶牛的奶牛喜欢同色 (禁止套娃 ,求一种方案,奶牛喜欢的颜色种数最多,多种方案求字典序最小. 题目解析 这道题我最先想到的居然是二分+并查集,我在想啥 咳咳 首先,考虑 ...

  2. 01、MyBatis HelloWorld

    1. MyBatis简介 1)MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架 2)MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集 3)MyB ...

  3. webpack 无法打包:No configuration file found and no output filename configured via CLI option

    报错内容 No configuration file found and no output filename configured via CLI option.A configuration fi ...

  4. 启动时出现错误:*** Warning - bad CRC or NAND

    前面转自:https://www.cnblogs.com/java20130726/archive/2012/06/15/3218570.html 在对NAND Flash烧写了bootstrap和U ...

  5. FL Studio进行侧链的三种方式(下)

    在上篇教程中我们了解了在FL Studio中进行侧链的第一种方式,今天我们就来继续带领大家了解进行侧链的另外两种方式. 如何使用 Fruity Peak Controller(果味峰值控制器)在FL ...

  6. Elasticsearch基本CURD操作语法讲解

    当我们的ES集群搭建完成以后,我怎么能看到集群中各个节点状态以及主节点和健康情况呢,如下讲解使用curl命令来与ES集群进行交互.分别有查询主节点情况.集群状态.以及创建索引查看索引.查看分片以及对E ...

  7. 使用paho的MQTT时遇到的重连导致订阅无法收到问题和解决

    最近在使用MQTT来实现消息的传输,网上demo很多,这里就不在重复介绍了,直接上代码,百度就能出现一大堆 下面是MQTT实现订阅的主要代码部分 MqttClient client = new Mqt ...

  8. 20200315_python3.6去除标点符号

    line = "python3.6下进行去!@#$%^&*()除标点测试,:!大家好,:!&>啥都不是!@#¥%--&*(-.||" # python ...

  9. Tree--二叉树BinarySearchTree

    BinarySearchTreeMap的实现 1 public interface Map<K extends Comparable<K>, V> { 2 void put(K ...

  10. java ipv6发邮件需要注意的点

    和ipv4发邮件一样,毕竟ip只是用来找地址的,v4 v6使用上基本没区别. 但有一点得注意:java ipv6采用发送RST包来通知邮件服务器断开连接,这样会导致客户端抛 MessagingExce ...