移动端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中的Copyset概念和使用方法

    前言 copyset运用好能带来什么好处 降低故障情况下的数据丢失概率(增加可用性) 降低资源占用,从而降低负载 copyset的概念 首先我们要理解copyset的概念,用通俗的话说就是,包含一个数 ...

  2. Linux权限位(含特殊权限位s s t) 及chown\chmod命令使用

    1.普通权限位 ls –l查看文件的属性 [root@oldboy ~]# ls -l -rw-------. 1 root root 1073 Mar 4 22:08 anaconda-ks.cfg ...

  3. yum 方式安装mysql (完整记录)

    2016-04-07 学习笔记,源代码安装比较麻烦,还是要尝试一下yum安装和rpm方式安装 一.检查系统是否安装老版本,有的话干掉 #yum list installed | grep mysqlm ...

  4. 赶紧收藏!这些Java中的流程控制知识你都不知道,你凭什么涨薪?

    Java的流程控制 基础阶段 目录: 用户交互Scanner 顺序结构 选择结构 循环结构 break & continue 练习题 1.Scanner对象 之前我们学的基本语法中并没有实现程 ...

  5. java面试必问:多线程的实现和同步机制,一文帮你搞定多线程编程

    前言 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己的独立地址空间,包含程序内容和数据:不同进程的地址空间是互相隔离的:进程拥有各种资源和状态信息,包括打开的文件.子进程和信号处理. 线 ...

  6. django清理migration终极解决办法

    1.django生成数据表结构的过程 在我们设计好models以后,我们可以通过以下命令生成将要同步给数据库的数据结构文件 python manage.py makemigrations 生成的文件在 ...

  7. iMindMap不同视图的应用技巧介绍

    在刚开始使用iMindMap思维导图软件时,很多用户会习惯性地使用默认的Mind Map视图.因该视图布局自由,用户可以发挥自我创造力,进行多种形式的思维图表创建. 其实,除此之外,iMindMap还 ...

  8. 使用IDM批量抓取音效素材下载

    IDM下载器的站点抓取功能,能够抓取网站上的图片.音频.视频.PDF.压缩包等等文件.更重要的是,能够实现批量抓取操作,省时省力.今天就来看一下,如何用IDM巧妙的批量抓取音效素材. 1.进入音效合辑 ...

  9. 推荐一款比迅雷下载速度快的mac下载器

    Folx和迅雷是2款支持在Mac系统上进行文件资源下载的工具,两者都支持BT种子资源的下载和直链下载,但Folx还另外支持了下载计划的自定义和智能限速功能.本文主要是为了比较Folx和迅雷在下载同一资 ...

  10. Redis 基础设计结构之四 set(集合)

    Redis 有 5 种基础数据结构,分别为:string (字符串).list (列表).set (集合).hash (哈希) 和 zset (有序集合). 今天来说一下set(集合)这种存储结构,s ...