移动端H5微信分享
移动端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微信分享的更多相关文章
- h5微信分享
h5分享的步骤(前端需要完成的部分) 1.绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 2.引入Js文件 在需要调用JS接口的页面引入如下JS文件,(支持ht ...
- ionic2+Angular web端 实现微信分享以及如何跳转回分享出去的页面
微信分享,首先参考微信JS-SDK开发文档. step1:在启动文件index.html中引入微信js文件: <script src="http://res.wx.qq.com/ope ...
- H5微信分享相关规范
微信分享 用户调用微信的分享功能,可以自定义分享的title和描述,以及小图标和链接.可以分享到群.好友.朋友圈.QQ.QQ空间等. 分享设计规范 分享标题:14字以内,建议使用朋友般亲切的口吻 分享 ...
- h5 微信分享朋友和朋友圈
生成JS-SDK权限验证签名 实现发送给朋友和分享到朋友圈时内容参数自定义 一.微信JS-SDK 1. 获得Access Token access token的获得方法在前面有介绍,详情见 微信公众平 ...
- H5页面微信分享和手Q分享设置
RT: 一. 手Q分享: 如下代码所示:设置好 description,name,image,即可,唯一注意的是image最好是200*200,要不然过小不美观,过大加载太慢 <head> ...
- H5页面分享微信自定义分享title和img
前端开发H5 需分享到朋友圈和发给好友,想自定义分享的title和图表还有简短一句话,还需调用微信的api 首先需获取到微信的appId,timestamp,nonceStr,signature 微信 ...
- 移动端H5多平台分享实践--摘抄
作者:大漠 日期:2018-01-20 点击:628 mobile 编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货. 点击 ...
- h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...
- 亲历H5移动端游戏微信支付接入及那些坑(二)——获取Openid和授权
第一篇中将一些坑说明,那么这篇开始正式进入接入步骤.具体的参数说明,我不会列出,毕竟微信官方文档都有,我想大家都看的懂,而且这接口也有可能微信会变动,所以不列出来,也是不想引起大家的误解,接入步骤只起 ...
随机推荐
- Idea eclipse 快捷键版
查找/搜索 打开搜索界面 Ctrl+H 查找类文件 Ctrl+Shift+T 最近访问上一个文件 Ctrl+Alt+ ← 最近访问下一个文件 C ...
- 在Service中创建全局Dialog对话框
需要使用到悬浮窗权限 val builder: AlertDialog.Builder = AlertDialog.Builder(this)builder.setMessage("from ...
- Python博文_爬虫工程师是干什么的
程序员有时候很难和外行人讲明白自己的工作是什么,甚至有些时候,跟同行的人讲清楚"你是干什么的"也很困难.比如我自己,就对Daivd在搞的语义网一头雾水.所以我打算写一篇博客,讲一下 ...
- SQL 查找"存在",别再用 count 了,很耗费时间的!
根据某一条件从数据库表中查询 『有』与『没有』,只有两种状态,那为什么在写SQL的时候,还要SELECT count(*) 呢? 无论是刚入道的程序员新星,还是精湛沙场多年的程序员老白,都是一如既往的 ...
- 学会网页制作,web app开发,必须先从语法基础开始学习
做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果. 前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言. ...
- CVE-2020-3452 CISCO ASA远程任意文件读取漏洞
0x01 漏洞描述 Cisco官方 发布了 Cisco ASA 软件和 FTD 软件的 Web 接口存在目录遍历导致任意文件读取 的风险通告,该漏洞编号为 CVE-2020-3452. ...
- Spring-Boot项目中配置redis注解缓存
Spring-Boot项目中配置redis注解缓存 在pom中添加redis缓存支持依赖 <dependency> <groupId>org.springframework.b ...
- python中a+=b 和a=a+b的结果一样吗
这里涉及到可变类型和不可变类型. 可变类型:列表,字典,集合 不可变:数字,字符串,元祖 先看一下不可变类型的运算: +=运算 >>> a, b = 1, 2 >>> ...
- Guitar Pro的10个非常实用的技巧(下)
Guitar Pro 7具有许多功能和编辑选项,只需点击几下即可随时创建与编辑我们的乐谱,.以下就为大家介绍10个Guitar Pro中实用的技巧,可以大大的节省我们的时间. 上次在<Guita ...
- pdfFactory全景手柄使用方法介绍
当文档中存在一些照片,或使用的字体过小时,大家可能会使用放大的功能,将文档的页面进行放大处理.此时,页面就会仅显示局部,为了查看页面的其他内容,就要使用到全景手柄来移动页面. pdfFactory的全 ...