微信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. centos7.6 ssh远程链接配置

    1.firewall增加22端口号 增加方式有两种,直接编辑firewall的public.xml增加 vi /etc/firewalld/zones/public.xml 进入后按i健光标移动到zo ...

  2. HTML之 一 标签

    一 ,标签分类: 1.普通标签: <h1> hello </h1> hello 2.自闭和标签 <hr/> 二,书写html注意事项 1.标签不能交叉嵌套 2. 标 ...

  3. HTML和CSS初级前端面试题汇总(持续补充)

    1.浏览器内核 IE:trident Firefox:gecko Safari:webkit Opera:以前是presto,现在是Blink Chrome:Blink 2.HTML文件开头的DOCT ...

  4. 20145232韩文浩《网络对抗》逆向及BOF基础实践

    实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...

  5. bzoj3110(整体二分)

    #include<iostream> #include<cstdio> #include<cmath> #include<cstring> #inclu ...

  6. Node selenium-webdriver

    Selenium-webdriver基本使用 准备 ① node.js 的安装和配置略 ② Selenium-webdriver npm install -save selenium-webdrive ...

  7. 用js实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript之location详解

    window.location.hash 使用说明 今天给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下. l ...

  9. 超实用的 Nginx 极简教程,覆盖了常用场景

    概述 什么是 Nginx? Nginx (engine x) 是一款轻量级的 Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 什么是反向代理? 反向代理(Reverse ...

  10. Android 通过onTouchEvent判断是否为双击事件

    通过onTouchEvent判断是否为双击事件,通过前面一次up 跟本次down之间的时间差,并且点击的点的坐标偏移来确定是否为双击事件DOUBLE_TAP_TIMEOUT. boolean isMo ...