微信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. PHP与Excel 笔记

    一:   PHP将数据导出Excel表中(投机型) 二: PHPExcel: Github上可以下载此插件包,用法如下: 前端: //上传阅卷员Excel文件 $("#upload_memb ...

  2. 使用tcpdump探测TCP/IP三次握手

    读计算机应该就同说过TCP/IP三次握手,但是都没有去验证过,今天心血来潮,去验证了一下,于是乎写下了这篇博客,可能写的可能有问题,还请多多指教 包括我学习,还有从很多资料来看资料,第三次握手,应该会 ...

  3. 洛谷P1443 马的遍历

    https://www.luogu.org/problemnew/show/P1443 很经典的搜索题了,蒟蒻用广搜打的 不说了,上代码! #include<bits/stdc++.h> ...

  4. SecureCRT两步验证自动登录脚本

    简介 用于解决 Google Authenticator 的两步验证登录.涉及到密码,不建议脚本保存到公共环境. 安装oathtool Mac $ brew install oath-toolkit ...

  5. windows系统中配置多版本anaconda

    1.最好从国内的镜像站下载anaconda,国外那个站实在是太慢了,清华开源软件镜像站(https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/) 2.如 ...

  6. Spring Boot Externalized Configuration

    https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-external-config.html Ex ...

  7. 针对zstack虚拟机导出的问题的解决办法!

    1. nfs 首先定位image所在位置: 云主机--〉云盘操作--〉配置信息--〉更多信息--安装路径 /opt/zstack/nfsprimarystorage/prim-aab63dc6284f ...

  8. HDU 2149 巴什博奕

    点这里去做题 基础的巴什博奕,注意m<n的情况 #include<bits/stdc++.h> int main() { int n,m,r,i; while(scanf(" ...

  9. Hadoop-2.0 目录简介

    Hadoop-2.0 目录简介 一.目录结构 将下载的压缩包解压: 解压后文件夹如下: 二.各文件夹目录结构 1.bin:Hadoop2.0的最基本管理脚本和使用脚本所在目录.这些脚本是sbin目录下 ...

  10. 【转载】sql monitor

    来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/27067062/viewspace-2129635/ SQL Monitor Report 1. SQL Monit ...