jquery-wechat-sdk-api

依赖模块

1
2
3
4
$ npm install jqyery
$ npm install weixin-js-sdk

简介

一个基于jquery的兼容AMD、CMD、Commandjs的模块包,目的在于帮助微信开发者更好的更方便的使用微信里面的api。

快速上手

简单加载

导入资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script type="text/javascript" src="http://blog.xulayen.com/cdn/jquery_wechat_sdk.1.4.9.js"></script>
<script>
console.log($.WeChart({
appId: 'your appid',
timestamp: 'your timestamp',
nonceStr: 'your nonceStr',
signature: 'your signature ',
access_token:'your access_token',
debug:true
}).InitWeChat());
</script>
</head>
<body>
</body>
</html>

1、调取api地址远程获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var _w = require('jquery_wechat_sdk');
var params={
api:'',
debug:false
yourdata:yourdata
}
var wechatMgr=_w.WeChart(params);
wechatMgr.InitWeChat(function(result){
this.appId = result.appid;
this.timestamp = result.timestamp;
this.nonceStr = result.nonceStr;
this.signature = result.signature;
this.access_token = result.access_token;
});

2、本地直接设置

1
2
3
4
5
6
7
8
9
10
11
var _w = require('jquery_wechat_sdk');
var wechatMgr= _w.WeChart({
appId: 'your appid',
timestamp: 'your timestamp',
nonceStr: 'your nonceStr',
signature: 'your signature ',
access_token:'your access_token'
}).InitWeChat();

入门篇

环境准备

准备基础环境 browserify ,基础浏览器一枚,可以在开源项目中学习在browserify中加载jquery_wechat_sdk

安装

1
2
3
4
$ npm install browserify --save-dev
$ npm install jquery_wechat_sdk --save-dev

使用

Browserify/Webpack

browserify API / Webpack API
猛击源码获取项目demo

1
2
3
4
5
6
7
8
9
10
11
12
13
var _w = require('jquery_wechat_sdk');
var wechatMgr=_w.WeChart({
appId: 'your appid',
timestamp: 'your timestamp',
nonceStr: 'your nonceStr',
signature: 'your signature ',
access_token:'your access_token',
debug:true
});
wechatMgr.InitWeChat();

AMD (Asynchronous Module Definition)

AMD 是为浏览器创建的模块,更多信息参见,这里推荐使用require.js文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js" type="text/javascript" ></script>
<script>
  require.config({
    baseUrl: "./static",
    paths: {
"jquery_wechat_sdk":"jquery_wechat_sdk"
    }
  });
require(['jquery_wechat_sdk'],function(_w){
_w.WeChart({
appId: 'your appid',
timestamp: 'your timestamp',
nonceStr: 'your nonceStr',
signature: 'your signature ',
access_token:'your access_token',
debug:true
}).InitWeChat();
});
</script>
</head>
<body>
</body>
</html>

Babel

Babel是下一代JavaScript编译器。其中一个特性是现在可以使用ES6/ES2015模块,尽管浏览器还没有本地支持这个特性。

1
import _w from "jquery_wechat_sdk";

Node

jquery_wechat_sdk运行在node端,需要提供一个带有documentwindow,因为没有这样的documentnode中存在,所以可以使用jsdom,这样可以达到测试的目的

1
npm install jquery_wechat_sdk
1
2
3
4
5
6
7
8
require("jsdom").env("", function(err, window) {
if (err) {
console.error(err);
return;
}
var _w = require("jquery_wechat_sdk")(window);
});

进阶篇

微信菜单

.InitWeChat()api默认隐藏所有的微信功能菜单,如果需要显示某个功能菜单,如:

  1. 显示分享到朋友圈
  2. 显示分享给朋友
1
2
3
4
5
wechatMgr.InitWeChat({
menu_share_timeline: true[false],
menu_share_appMessage: true[false]
});

分享内容

分享到朋友圈

  • object是一个对象字面量
    • forword_title:标题
    • forword_desc:描述
    • forword_link:跳转链接
    • forword_imgUrl:图片地址
  • fn1是成功分享之后的回调函数success(res)
    • res 回调函数总对象
  • fn2是取消分享之后的回调函数cancel(res, forword)
    • res 回调函数总对象
    • forword 当前分享内容对象
1
2
wechatMgr.Forword([object],[fn1],[fn2])

分享给朋友

  • object是一个对象字面量
    • forword_title:标题
    • forword_desc:描述
    • forword_link:跳转链接
    • forword_imgUrl:图片地址
  • fn1是成功分享之后的回调函数success(res)
    • res 回调函数总对象
  • fn2是取消分享之后的回调函数cancel(res, forword)
    • res 回调函数总对象
    • forword 当前分享内容对象
1
2
wechatMgr.ForwordToFriend([object],[fn1],[fn2])

和分享到朋友圈一样,ShareQQShareWeiboShareQZone也是如此操作。在这里就不做赘述了。

获取地理位置

  • type默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入gcj02
  • fn是获取地理位置成功之后的回调函数success(res,latitude, longitude, speed, accuracy)
    • res:回调总对象
    • latitude:经度
    • longitude:纬度
    • speed:速度
    • accuracy:精度

api这里没有给到cancel回调函数,如果需要此回调,可重写

1
2
wechatMgr.GetLocation([type],[fn])

获取网络状态

  • fn是成功获取当前网络状态之后的回调函数success(res, networkType)
    • res:回调总对象
    • networkType:当前网络类型
1
2
wechatMgr.GetNetWorkType(fn)

选择图片

  • fn是当前成功回调函数success(res, localIds)
    • res:总回调对象
    • localIds:选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
1
2
wechatMgr.ChooseImg([fn])

上传图片

  • imgLocalIds需要上传的图片的本地ID,由chooseImage接口获得
  • fn当前成功回调的函数success(res, serverId)
    • res:回调总对象
    • serverId:返回图片的服务器端ID
1
2
wechatMgr.UploadImage([imgLocalIds], [fn])

预览图片

  • previewCurrentImg当前显示图片的http链接
  • previewUrls需要预览的图片http链接列表[]
1
2
wechatMgr.PreviewImage([previewCurrentImg], [previewUrls])

打开地图

  • res是一个对象包含
    • latitude:纬度,浮点数,范围为90 ~ -90
    • longitude:经度,浮点数,范围为180 ~ -180。
    • name:位置名
    • address:地址详细说明
    • scale:地图缩放级别,整形值,范围从1~28。默认为最大
    • infoUrl:在查看位置界面底部显示的超链接,可点击跳转
1
2
wechatMgr.OpenLocation(res)

调取摄像头

  • fn是当前扫描成功之后的回调函数success(result)
    • result:扫码返回的结果
1
2
3
4
5
6
7
8
9
document.getElementById('btn1').onlick=function(){
wechatMgr.Scan(fn)
}
document.getElementById('btn1').onlick=function(){
$.Scan(fn)
}
$('#btn1').Scan(fn)

显示隐藏右上角菜单

1
2
3
4
5
/**隐藏右上角菜单**/
wechatMgr.HideOptionMenu();
/**显示右上角菜单**/
wechatMgr.ShowOptionMenu();

微信卡券

微信支付

  • object是当前支付对象字面量
    • timestamp:支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    • nonceStr:支付签名随机串,不长于 32 位
    • package:统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=*
    • signType:签名方式,默认为SHA1,使用新版支付需传入MD5
    • paySign:支付签名
  • fn是当前支付成功回调函数success(res, pay)
    • res:当前支付回调总对象
    • pay:支付对象
1
wechatMgr.ChooseWXPay([object],[fn])

是否是微信浏览器

  • fn是当前成功回调函数success(isWeixinBro)
    • isWeixinBro是否是微信浏览器boolean
1
wechatMgr.IsWeChatBrower([fn])

关闭微信窗口

1
wechatMgr.CloseWindow()

异常捕获

  • fn是当前异常捕获之后的回调函数success(res)
    • res是异常信息
1
wechatMgr.InitWxError([fn])

API

可配置项

debug

是否打开debug调试,默认false

baseapi_checkJsApi

判断当前客户端是否支持指定的js接口,默认true

baseapi_onMenuShareTimeline

是否启用分享到朋友圈js接口,默认true

baseapi_onMenuShareAppMessage

是否启用分享给朋友js接口,默认true

baseapi_onMenuShareQQ

是否启用分享到QQjs接口,默认true

baseapi_onMenuShareWeibo

是否启用分享到微博js接口,默认true

baseapi_hideMenuItems

是否启用隐藏菜单js接口,默认true

baseapi_showMenuItems

是否启用显示菜单js接口,默认true

baseapi_hideAllNonBaseMenuItem

是否启用隐藏基础菜单js接口,默认true

baseapi_showAllNonBaseMenuItem

是否启用显示基础菜单js接口,默认true

baseapi_hideOptionMenu

是否启用隐藏普通菜单js接口,默认true

baseapi_showOptionMenu

是否启用显示普通菜单js接口,默认true

baseapi_closeWindow

是否启用关闭窗口js接口,默认true

baseapi_scanQRCode

是否启用扫描二维码js接口,默认true

baseapi_startRecord

是否启用录音js接口,默认true

baseapi_stopRecord

是否启用停止录音js接口,默认true

baseapi_onVoiceRecordEnd

是否启用录音结束js接口,默认true

baseapi_playVoice

是否启用播放录音js接口,默认true

baseapi_pauseVoice

是否启用暂停录音js接口,默认true

baseapi_stopVoice

是否启用停止录音js接口,默认true

baseapi_onVoicePlayEnd

是否启用播放停止js接口,默认true

baseapi_uploadVoice

是否启用上传录音js接口,默认true

baseapi_downloadVoice

是否启用下载录音js接口,默认true

baseapi_chooseImage

是否启用选择图片js接口,默认true

baseapi_previewImage

是否启用预览图片js接口,默认true,

baseapi_uploadImage

是否启用上传图片js接口,默认true

baseapi_downloadImage

是否启用下载图片js接口,默认true

baseapi_translateVoice

是否启用转换声音js接口,默认true

baseapi_getNetworkType

是否启用获取网络类型js接口,默认true

baseapi_openLocation

是否启用打开地图js接口,默认true

baseapi_getLocation

是否启用获取地理位置js接口,默认true

baseapi_chooseWXPay

是否启用微信支付js接口,默认true

baseapi_openProductSpecificView

是否启用跳转微信商品页js接口,默认true

baseapi_addCard

是否启用添加卡券js接口,默认true

baseapi_chooseCard

是否启用选择卡券js接口,默认true

baseapi_openCard

是否启用打开卡券js接口,默认true

appId

微信appid,可直接传递也可以通过api远程地址获取result.APPID

timestamp

时间戳,可直接传递也可以通过api远程地址获取result.TIMESTAMP

nonceStr

特定字符窜,可直接传递也可以通过api远程地址获取result.NONCESTR

signature

签名,可直接传递也可以通过api远程地址获取result.SIGNATURE

access_token

token,可直接传递也可以通过api远程地址获取result.ACCESS_TOKEN

分享到朋友圈,默认false

分享给朋友,默认false

收藏,默认false

浏览器中打开,默认false

邮件打开,默认false

分享到qq,默认false

分享到qq空间,默认false

分享到微博,默认false

复制,默认false

设置字体,默认false

阅读模式,默认false

刷新,默认true

api

远程api地址,本工具是使用ajax来交互数据的,并没有使用jsonp等跨域方式,所以最好你的api地址在服务器端已经开启了可以跨域的限制Access-Control-Allow-Origin=your domain
#### facid
业务标识
#### typenum
公众号类型

data

提交的数据{}对象字面量

scanAuthUrl

需要调取摄像头的页面,默认location.href

hideOptionMenu

是否隐藏菜单,默认true

async

是否异步,默认false

type

提交类型,默认post

ContentType

文档类型,默认application/x-www-form-urlencoded

cache

是否启用缓存,默认true

FAQ

调用api的方式有几种?

1、jquery静态调用

1
2
3
4
document.getElementById('btn1').onlick=function(){
$.Scan(fn)
}

2、jquery实例调用

1
2
$('#btn1').Scan(fn)

3、wechart对象调用

1
2
3
4
document.getElementById('btn1').onlick=function(){
wechatMgr.Scan(fn)
}

如何调试debug

1、使用微信开发这工具调试

2、在WeChart中启用debugtrue即可

无法使用node模式加载?

npm是可以直接下载使用的,但是次此插件仅供在浏览器端使用,node端无法执行本插件。会抛出jquery_wechat_sdk requires a window with a document的异常

附录

需要改善的地方

1、每次调用都会从服务器端获取appid等信息,需要优化处理。
2、处理signatureaccess_token需要模块化

外链地址

1、微信官方文档
2、jquery_wechat_sdk在npm上的地址
3、jquery_wechat_sdk源码
4、在线聊天地址

交流

QQ群:596087259 ,使用疑问,开发,贡献代码请加群。

------ 本文结束 ------

  • 本文作者: Xu Layen
  • 版权声明: 本博客所有文章除特别声明外,转载请注明出处!