微信JS-SDK,提供给开发者的基于微信内的网页开发工具包

使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力

使用步骤

1、绑定域名

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

2、引入JS文件

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

3、通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用

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

4、通过ready接口处理成功验证

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

5、通过error接口处理失败验证

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

6、先检查是否为微信浏览器

var isWeixin = function () {
//判断是否是微信
var ua = navigator.userAgent.toLowerCase();
return ua.match(/MicroMessenger/i) == "micromessenger";
};

如果是微信,则请求后端接口获取签名并配置config

  if (isWeixin()) {
// share
var url = location.href;
$.post('/api/weixin/getSignpackage', { url: url }, function (data) {
var option = JSON.parse(data);
wx.config({
// debug: true,
appId: option.appId,
timestamp: option.timestamp,
nonceStr: option.nonceStr,
signature: option.signature,
jsApiList: [
]
});
});
}

微信分享

原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃

最新接口为户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口

  • 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
});
  • 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
});

相关文档

微信JS-SDK说明文档

微信分享JS-SDK的更多相关文章

  1. 微信分享JS接口失效说明及解决方案

    关键字:微信分享 JS 失效  分享到朋友圈 微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的 ...

  2. 微信企业号JS SDK

    微信企业号JS SDK <?php define('CorpID', "wx82e2c31215d9a5a7"); define('CorpSecret', "&q ...

  3. 微信分享接口SDK简介使用

    很久没做移动端活动了,想不少人都参与过微信里面的活动,既然活动就少不了分享.那我就行一个前端的角度说说如何实现微信分享的吧. 对应微信分享,现在已有公共接口,微信的开发者文档SDK:https://m ...

  4. 微信分享JS函数(原创)[已失效]

    //微信内置浏览器分享事件 //来自:http://www.cnblogs.com/cielwater //分享朋友圈事件 //UpdateWeixinJSBridge(CircleModel[Jso ...

  5. 微信前端js sdk以外的开发

    此时页面中就会出现刚才我画红圈部分的工具条. 这个工具条再加上上面的标题栏工具条. 极大的降低了可视区域的面积. 是否能将它去掉呢?答案是能够的.增加以下代码就能够去掉微信中以下的工具条: docum ...

  6. 调用微信js sdk

    场景:需要调用微信获取当前位置的借口. 途径:查看微信 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 .后 ...

  7. VueJs单页应用实现微信网页授权及微信分享功能

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算 ...

  8. Android 微信分享图文资料

    上个项目做Android的微信分享,需要分享的内容有图片有文字,看了微信分享的SDK,貌似没有这个API,在网上搜了好久,总算找到解决方法了,直接上代码: public void sendReq(Co ...

  9. 微信分享 API

    微信分享 API https://market.cmbchina.com/MPage/online/190416201200302/wechatShare.js /* * 注意: * 1. 所有的JS ...

  10. 微信JS SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

随机推荐

  1. WindowsPE权威指南 第二章 小工具 pedump代码的C语言实现

    2016-11-16 16:29:07 主程序代码 pedump.c #include <windows.h> #include <Richedit.h> #include & ...

  2. .Net WebApi开发SharePoint出现System.IO.FileNotFoundException: 找不到位于的 Web 应用程序

    System.IO.FileNotFoundException: 找不到位于 http://xxx/sites/xxxx 的 Web 应用程序.请确认正确键入了此 URL.如果此 URL 需要提供现有 ...

  3. s6-6 TCP 连接释放

    TCP 连接释放 任何一方在没有数据要传送的时候,都可以发送一个FIN置位了的 TCP 数据段 当FIN被确认的时候,该方向的连接被关闭 当双向连接都关闭了的时候,连接释放 两军队问题 两军队问题 ( ...

  4. windows安装zookeeper

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  5. 如何往有自增标识字段的表插入数据时,同时给自增标识字段插入值呢,在Inset Into语句前后加上SQL语句:SET IDENTITY_INSERT TableName ON和SET IDENTITY_INSERT TableName OFF

    当要往有设置自增标识字段的表插入数据,并希望同时设置好自增字段的值时,可以在insert into 的SQL语句前后分别加上一句sql语句,SET IDENTITY_INSERT TableName  ...

  6. U-Boot Makefile分析(3) rules.mk分析

    浏览各个子Makefile可以发现,他们都会在文件的后面包含rules.mk,这个文件的作用就是更新源文件的依赖,并生成各种.depend文件. _depend: $(obj).depend # Sp ...

  7. python视频地址和链接

    算法 链接:http://pan.baidu.com/s/1nvHmcZJ 密码:fwjg常用库 链接:http://pan.baidu.com/s/1o8uPvPg 密码:yp3w进阶-高级代码 链 ...

  8. python 初级重点

    关于python初学时遇到的重点: 1 python 2 和3 的区别 python2**不识别中文** -*- coding: utf-8 -*-(因为不能识别中文,所以代码有中文时需要在最前面加入 ...

  9. ssh 使用 sed 替换的时候,替换的字符串有单双引号的时候怎么用

    线上有一个脚本需要 ssh 登录远程机,然后完成特定文件中的某个值,替换的字符中有单引号,所以需要特定的写法,才能成功 1).ssh 远程执行命令,替换字符串中有单引号( ' ) ssh zhuzi@ ...

  10. Python之旅Day15 Bootstrap与Django初识

    Bootstrap初识 Bootstrap简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.(官网http://www.boo ...