微信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. windowsSevice程序和topshelf程序创建服务对比

    文章原地址:http://www.80iter.com/blog/1451523192435464 Topshelf 创建.net服务整理和安装步骤 windowsService和topshelf服务 ...

  2. angular 实现 echarts 拖动区域进行放大 方法

    实现逻辑: 1.通过鼠标摁下事件  和弹出事件  获取x轴的index  之后去x轴的list中去获取两个坐标点 2.之后将这两个数据作为参数  传到后台更新数据 3.记录下来这两个坐标点 放到lis ...

  3. CodeForces 935E Fafa and Ancient Mathematics (树形DP)

    题意:给定一个表达式,然后让你添加 n 个加号,m 个减号,使得表达式的值最大. 析:首先先要建立一个表达式树,这个应该很好建立,就不说了,dp[u][i][0] 表示 u 这个部分表达式,添加 i ...

  4. 数据库的Connection、Cursor两大对象

    Python 数据库图解流程 Connection.Cursor比喻 Connection()的参数列表 host,连接的数据库服务器主机名,默认为本地主机(localhost). user,连接数据 ...

  5. Runnable与Callable区别

    相同点: 两者都是接口:(废话) 两者都可用来编写多线程程序: 两者都需要调用Thread.start()启动线程: 不同点: 两者最大的不同点是:实现Callable接口的任务线程能返回执行结果:而 ...

  6. 基于MFC的socket编程

    网络编程 1.windows 套接字编程(开放的网络编程接口)添加头文件#include<windows.h> 2.套接字及其分类 socket分为两种:(1)数据报socket:无连接套 ...

  7. 只要一行代码求一串字符中某字符(串)出现次数,c#

    这里只要一行代码就行. static void Main(string[] args) { string str = "qwerwqr;sfdsfds;fdfdsf;dfsdfsdf;dsf ...

  8. JavaScript基础学习笔记整理

    1.关于JS: (1)脚本语言——不需要编译的语言(常见有cmd,t-sql)----解释性语言; (2)动态类型的语言——1.代码只有执行到那个位置才知道那个变量中存储的是什么 2.对象中没有某个属 ...

  9. macOS终端开启TAB键自动补全功能(不区分大小写)

    1.在当前用户根目录(~)下,修改~/.inputrc这个文件(如果文件不存在,则新建该文件),文件内容如下: set show-all-if-ambiguous on set completion- ...

  10. swarm集群日常部分操作

    docker swarm: 1)查看集群使用docker info 或 docker node ls 查看集群中的相关信息 2)swarm集群中node的availability状态可以为 activ ...