微信公众平台开放JS-SDK(微信内网页开发工具包)

微信公众平台开放JS-SDK(微信内网页开发工具包)，这次开放接口是质的飞跃，是对开发者和广大用户一个利好的消息。未来的公众号图文消息会更丰富多彩，准备脑洞大开吧！(第三方平台正式支持接入微信公众平台JS-SDK)

微信公众平台今日面向开发者开放微信内网页开发工具包（微信JS-SDK）。

通过微信JS-SDK提供的11类接口集，开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

微信JS-SDK主要包含以下能力：

1、分享类接口

支持获取“分享到朋友圈”、“发送给朋友”、“分享到QQ”和“分享到微博”按钮的用户点击状态，同时支持自定义分享内容。

2、图像类接口

支持拍照、从手机相册选择图片、上传图片、下载图片、预览图片功能。

3、音频类接口

支持实现录制、播放、暂停播放语音等功能，同时支持将语音快速上传到云端服务器或从云端服务器将语音快速下载到网页。

4、智能类接口

支持将语音快速地转换成文字。开发者无需掌握语音识别相关技术，只需简单地引用微信JS-SDK提供的方法即可实现。

5、设备信息类接口

支持获取当前手机设备的网络状态，如2g、3g、4g或wifi，为用户提供流畅的浏览体验。

6、地理位置类接口

支持获取用户的地理位置信息（需用户同意），支持使用微信内置的地图查看器查看地理位置或导航。

7、界面操作类接口

支持隐藏或显示微信内置浏览器“右上角菜单”、“分享到朋友圈”、“发送给朋友”、“复制链接”等指定的按钮，支持关闭当前网页窗口以返回公众号会话。

8、微信扫一扫接口

支持使用微信扫一扫，扫描一维码或二维码，并将用户扫码内容交由微信处理或返回给网页由网页处理。

9、微信小店接口

支持从网页跳转到指定的微信小店商品页，商品页支持浏览商品的详细信息，支持完整的购买、客服等流程。

10、微信卡券接口

支持添加卡券、查看卡券及调起卡券列表等功能。

11、微信支付接口

支持有支付权限的公众号在网页发起一个微信支付请求。

概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。

使用说明

在使用微信JS-SDK对应的JS接口前，需确保公众号已获得使用对应JS接口的权限，可登录微信公众平台进入“开发者中心”查看对应的接口权限。

注意：所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”》“功能设置”里填写“JS接口安全域名”。

步骤一：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤二：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用）。

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', // 必填，公众号的唯一标识

    timestamp: , // 必填，生成签名的时间戳

    nonceStr: '', // 必填，生成签名的随机串

    signature: '',// 必填，签名，见附录1

    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

步骤三：通过ready接口处理成功验证

wx.ready(function(){

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

});

步骤四：通过error接口处理失败验证

wx.error(function(res){

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

});

接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：

调用成功时："xxx:ok" ，其中xxx为调用的接口名
用户取消时："xxx:cancel"，其中xxx为调用的接口名
调用失败时：其值为具体错误信息

基础接口

判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({

    jsApiList: ['chooseImage'] // 需要检测的JS接口列表，所有JS接口列表见附录2,

    success: function(res) {

        // 以键值对的形式返回，可用的api值true，不可用为false

        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

    });

备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。

分享接口

请注意不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限，详细规则请查看：朋友圈管理常见问题。

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({

    title: '', // 分享标题

    link: '', // 分享链接

    imgUrl: '', // 分享图标

    success: function () {

        // 用户确认分享后执行的回调函数

    },

    cancel: function () {

        // 用户取消分享后执行的回调函数

    }

});

获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({

    title: '', // 分享标题

    desc: '', // 分享描述

    link: '', // 分享链接

    imgUrl: '', // 分享图标

    type: '', // 分享类型,music、video或link，不填默认为link

    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

    success: function () {

        // 用户确认分享后执行的回调函数

    },

    cancel: function () {

        // 用户取消分享后执行的回调函数

    }

});

获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({

    title: '', // 分享标题

    desc: '', // 分享描述

    link: '', // 分享链接

    imgUrl: '' // 分享图标

    success: function () {

       // 用户确认分享后执行的回调函数

    },

    cancel: function () {

       // 用户取消分享后执行的回调函数

    }

});

获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口

wx.onMenuShareWeibo({

    title: '', // 分享标题

    desc: '', // 分享描述

    link: '', // 分享链接

    imgUrl: '' // 分享图标

    success: function () {

       // 用户确认分享后执行的回调函数

    },

    cancel: function () {

        // 用户取消分享后执行的回调函数

    }

});

图像接口

拍照或从手机相册中选图接口

wx.chooseImage({

    success: function (res) {

        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

    }

});

预览图片接口

wx.previewImage({

    current: '', // 当前显示的图片链接

    urls: [] // 需要预览的图片链接列表

});

上传图片接口

wx.uploadImage({

    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得

    isShowProgressTips: 1// 默认为1，显示进度提示

    success: function (res) {

        var serverId = res.serverId; // 返回图片的服务器端ID

    }

});

备注：可用微信下载多媒体文件接口下载上传的图片，此处获得的 serverId 即 media_id，参考文档 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

下载图片接口

wx.downloadImage({

    serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得

    isShowProgressTips: 1// 默认为1，显示进度提示

    success: function (res) {

        var localId = res.localId; // 返回图片下载后的本地ID

    }

});

音频接口

开始录音接口

wx.startRecord();

停止录音接口

wx.stopRecord({

    success: function (res) {

        var localId = res.localId;

    }

});

监听录音自动停止接口

wx.onVoiceRecordEnd({

    // 录音时间超过一分钟没有停止的时候会执行 complete 回调

    complete: function (res) {

        var localId = res.localId;

    }

});

播放语音接口

wx.playVoice({

    localId: '' // 需要播放的音频的本地ID，由stopRecord接口获得

});

暂停播放接口

wx.pauseVoice({

    localId: '' // 需要暂停的音频的本地ID，由stopRecord接口获得

});

停止播放接口

wx.stopVoice({

    localId: '' // 需要停止的音频的本地ID，由stopRecord接口获得

});

监听语音播放完毕接口

wx.onVoicePlayEnd({

    serverId: '', // 需要下载的音频的服务器端ID，由uploadVoice接口获得

    success: function (res) {

        var localId = res.localId; // 返回音频的本地ID

    }

});

上传语音接口

wx.uploadVoice({

    localId: '', // 需要上传的音频的本地ID，由stopRecord接口获得

    isShowProgressTips: 1// 默认为1，显示进度提示

        success: function (res) {

        var serverId = res.serverId; // 返回音频的服务器端ID

    }

});

备注：可用微信下载多媒体文件接口下载上传的语音，此处获得的 serverId 即 media_id，参考文档 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

下载语音接口

wx.downloadVoice({

    serverId: '', // 需要下载的音频的服务器端ID，由uploadVoice接口获得

    isShowProgressTips: 1// 默认为1，显示进度提示

    success: function (res) {

        var localId = res.localId; // 返回音频的本地ID

    }

});

智能接口

识别音频并返回识别结果接口

wx.translateVoice({

   localId: '', // 需要识别的音频的本地Id，由录音相关接口获得

    isShowProgressTips: 1, // 默认为1，显示进度提示

    success: function (res) {

        alert(res.translateResult); // 语音识别的结果

    }

});

设备信息

获取网络状态接口

wx.getNetworkType({

    success: function (res) {

        var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi

    }

});

地理位置

使用微信内置地图查看位置接口

wx.openLocation({

    latitude: 0, // 纬度，浮点数，范围为90 ~ -90

    longitude: 0, // 经度，浮点数，范围为180 ~ -180。

    name: '', // 位置名

    address: '', // 地址详情说明

    scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大

    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转

});

获取地理位置接口

wx.getLocation({

    timestamp: 0, // 位置签名时间戳，仅当需要兼容6.0.2版本之前时提供

    nonceStr: '', // 位置签名随机串，仅当需要兼容6.0.2版本之前时提供

    addrSign: '', // 位置签名，仅当需要兼容6.0.2版本之前时提供，详见附录4

    success: function (res) {

       var longitude = res.longitude; // 纬度，浮点数，范围为90 ~ -90

       var latitude = res.latitude; // 经度，浮点数，范围为180 ~ -180。

        var speed = res.speed; // 速度，以米/每秒计

        var accuracy = res.accuracy; // 位置精度

    }

});

界面操作

隐藏右上角菜单接口

wx.hideOptionMenu();

显示右上角菜单接口

wx.showOptionMenu();

关闭当前网页窗口接口

wx.closeWindow();

批量隐藏功能按钮接口

wx.hideMenuItems({

    menuList: [] // 要隐藏的菜单项，所有menu项见附录3

});

批量显示功能按钮接口

wx.showMenuItems({

    menuList: [] // 要显示的菜单项，所有menu项见附录3

});

隐藏所有非基础按钮接口

wx.hideAllNonBaseMenuItem();

显示所有功能按钮接口

wx.showAllNonBaseMenuItem();

微信扫一扫

调起微信扫一扫接口

wx.scanQRCode({

    desc: 'scanQRCode desc',

    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，

    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有

    success: function (res) {

    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

}

});

微信小店

跳转微信商品页接口

wx.openProductSpecificView({

    productId: '', // 商品id

    viewType: '' // 0.默认值，普通商品详情页1.扫一扫商品详情页2.小店商品详情页

});

微信卡券

调起适用于门店的卡券列表并获取用户选择列表

wx.chooseCard({

    shopId: '', // 门店Id

    cardType: '', // 卡券类型

    cardId: '', // 卡券Id

    timeStamp: 0, // 卡券签名时间戳

    nonceStr: '', // 卡券签名随机串

    cardSign: '', // 卡券签名，详见附录6

    success: function (res) {

        var cardList= res.cardList; // 用户选中的卡券列表信息

    }

});

批量添加卡券接口

wx.addCard({

    cardList: [{

        cardId: '',

        cardExt: ''

    }], // 需要添加的卡券列表

    success: function (res) {

        var cardList = res.cardList; // 添加的卡券列表信息

    }

});

查看微信卡包中的卡券接口

wx.openCard({

    cardList: [{

        cardId: '',

        code: ''

    }]// 需要打开的卡券列表

});

微信支付

发起一个微信支付请求

wx.chooseWXPay({

    timestamp: 0, // 支付签名时间戳

    noncestr: '', // 支付签名随机串

    package: '', // 订单详情扩展字符串，详见附录5

    paySign: '', // 支付签名，详见附录5

});

附录1-JS-SDK使用权限签名算法

jsapi_ticket

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回如下JSON：

{

"errcode":0,

"errmsg":"ok",

"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",

"expires_in":7200

}

获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

签名算法

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）
。对所有待签名参数按照字段名的ASCII
码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里
需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

即signature=sha1(string1)。
示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com

步骤2. 对string1进行sha1签名，得到signature：

f4d90daf4b3bca3078ab155816175ba34c443a7b

注意事项

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。

附录2-所有JS接口列表

版本1.0.0接口

onMenuShareTimeline
onMenuShareAppMessage
onMenuShareQQ
onMenuShareWeibo
startRecord
stopRecord
onVoiceRecordEnd
playVoice
pauseVoice
stopVoice
onVoicePlayEnd
uploadVoice
downloadVoice
chooseImage
previewImage
uploadImage
downloadImage
translateVoice
getNetworkType
openLocation
getLocation
hideOptionMenu
showOptionMenu
hideMenuItems
showMenuItems
hideAllNonBaseMenuItem
showAllNonBaseMenuItem
closeWindow
scanQRCode
chooseWXPay
openProductSpecificView
addCard
chooseCard
openCard

附录3-所有菜单项列表

基本类

举报: "menuItem:exposeArticle"
调整字体: "menuItem:setFont"
日间模式: "menuItem:dayMode"
夜间模式: "menuItem:nightMode"
刷新: "menuItem:refresh"
查看公众号（已添加）: "menuItem:profile"
查看公众号（未添加）: "menuItem:addContact"

传播类

发送给朋友: "menuItem:share:appMessage"
分享到朋友圈: "menuItem:share:timeline"
分享到QQ: "menuItem:share:qq"
分享到Weibo: "menuItem:share:weiboApp"
收藏: "menuItem:favorite"
分享到FB: "menuItem:share:facebook"

保护类

调试: "menuItem:jsDebug"
编辑标签: "menuItem:editTag"
删除: "menuItem:delete"
复制链接: "menuItem:copyUrl"
原网页: "menuItem:originPage"
阅读模式: "menuItem:readMode"
在QQ浏览器中打开: "menuItem:openWithQQBrowser"
在Safari中打开: "menuItem:openWithSafari"
邮件: "menuItem:share:email"
一些特殊公众号: "menuItem:share:brand"

附录4-位置签名生成算法

addrSign的生成规则与JS-SDK权限验证的签名生成规则相同（参考附录1），只是参与签名参数有所不同。参与addrSign的签名参数
有：appId、url（当前网页url）、timestamp、noncestr、accesstoken（用户授权凭证，请参照oauth2.0
协议获取）。

附录5-支付扩展字段及签名生成算法

订单详情（package）扩展字符串定义

在商户调起JS API 时，商户需要此时确定该笔订单详情，并将该订单详情通过一定的方式进行组合放入package。JS API 调用后，微信将通过package 的内容生成预支付单。下
面将定义package 的所需字段列表以及签名方法。
接口需要注意：所有传入参数都是字符串类型！

package 所需字段列表:

参数	名称	是否必填	格式	说明
bank_type	银行通道类型	是	字符串类型，固定为"WX"，注意大写	固定为"WX"；
body	商品描述	是	字符串类型，128字节以下	商品描述；
attach	附加数据	否	字符串类型，128字节以下	附加数据，原样返回；
partner	商户号	是	字符串类型	字符串类型注册时分配的财付通商户号partnerId；
out_trade_no	商户订单号	是	字符串类型，32字节以下	商户系统内部的订单号，32 个字符内、可包含字母；确保在商户系统唯一
total_fee	订单总金额	是	字符串类型	订单总金额，单位为分；
fee_type	支付币种	是	字符串类型，默认值是"1"	取值：1（人民币），暂只支持1；
notify_url	通知URL	是	字符串类型，255字节以下	在支付完成后，接收微信通知支付结果的URL，需给绝对路径， 255 字符内, 格式如:http://wap.tenpay.com/tenpay.asp；
spbill_create_ip	订单生成的机器IP	是	字符串类型，15字节以下	指用户浏览器端IP，不是商户服务器IP，格式为IPV4；
time_start	交易起始时间	否	字符串类型，14字节以下	订单生成时间，格式为yyyyMMddHHmmss，如2009 年12 月25 日9 点10 分10 秒表示为20091225091010，时区为GMT+8 beijing；该时间取自商户服务器；
time_expire	交易结束时间	否	字符串类型，14字节以下	订单失效时间，格式为yyyyMMddHHmmss，如2009 年12 月27 日9 点10 分10 秒表示为20091227091010，时区为GMT+8 beijing；该时间取自商户服务器；
transport_fee	物流费用	否	字符串类型	物流费用，单位为分。如果有值，必须保证 transport_fee + product_fee=total_fee；
product_fee	商品费用	否	字符串类型	物流费用，单位为分。如果有值，必须保证 transport_fee + product_fee=total_fee；
goods_tag	商品标记	否	字符串类型	商品标记，优惠券时可能用到；
input_charset	传入参数字符编码	是	字符串类型	取值范围："GBK"、"UTF-8"，默认："GBK"

package 生成方法：
由于package中携带了生成订单的详细信息，因此在微信将对package里面的内容进行鉴
权，确定package携带的信息是真实、有效、合理的。因此，这里将定义生成package字符
串的方法。

对所有传入参数按照字段名的ASCII码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1，注意：值为空的参数不参与签名；
在string1最后拼接上key=paternerKey得到stringSignTemp字符串，并对stringSignTemp进行md5运算，再将得到的字符串所有字符转换为大写，得到sign值signValue。
对传入参数中所有键值对的value进行urlencode转码后重新拼接成字符串string2。对于JS前端程序，一定要使用函数encodeURIComponent进行urlencode编码（注意！进行urlencode时要将空格转化为%20而不是+）。
将sign=signValue拼接到string2后面得到最终的package字符串。

下面定义了一段生成package字符串的示范过程：
假设以下为package传入参数：

bank_type=WX
body=支付测试
fee_type=1
input_charset=UTF-8
notify_url=http://weixin.qq.com
out_trade_no=7240b65810859cbf2a8d9f76a638c0a3
partner=1900000109
spbill_create_ip=196.168.1.1
total_fee=1

i: 经过a过程URL键值对字典序排序后的字符串string1为：

bank_type=WX&body=支付测试&fee_type=1&input_charset=UTF-8&notify_url=http://we

ixin.qq.com&out_trade_no=7240b65810859cbf2a8d9f76a638c0a3&partner=1900000109&spbill_

create_ip=196.168.1.1&total_fee=1

ii：经过b过程后得到sign为：

sign

=md5(string1&key=8934e7d15453e97507ef794cf7b0519d).toUpperCase

=md5(bank_type=WX&body=支付测试&fee_type=1&input_charset=UTF-8&notify_url=htt

p://weixin.qq.com&out_trade_no=7240b65810859cbf2a8d9f76a638c0a3&partner=1900000109&

spbill_create_ip=196.168.1.1&total_fee=1&key=8934e7d15453e97507ef794cf7b0519d).toUpper

Case()

="7f77b507b755b3262884291517e380f8".toUpperCase()

="7F77B507B755B3262884291517E380F8"

iii：再对传入参数中的每一个键值对中的value进行urlencode编码后得到：

bank_type=WX&body=%E6%94%AF%E4%BB%98%E6%B5%8B%E8%AF%95&fee_typ

e=1&input_charset=UTF-8&notify_url=http%3A%2F%2Fweixin.qq.com&out_trade_no=7240b6

5810859cbf2a8d9f76a638c0a3&partner=1900000109&spbill_create_ip=196.168.1.1&total_fee=1

iv：拼接上sign后得到最终package结果：

bank_type=WX&body=%E6%94%AF%E4%BB%98%E6%B5%8B%E8%AF%95&fee_typ

e=1&input_charset=UTF-8&notify_url=http%3A%2F%2Fweixin.qq.com&out_trade_no=7240b6

5810859cbf2a8d9f76a638c0a3&partner=1900000109&spbill_create_ip=196.168.1.1&total_fee=1

&sign=7F77B507B755B3262884291517E380F8

支付签名（paySign）生成方法

paySign字段是对本次发起JSAPI的行为进行鉴权，只有通过了paySign鉴权，才能继
续对package鉴权并生成预支付单。paySign的生成规则与JS-SDK权限验证的签名生成规则相同（参考附录1）。

参与paySign签名的字段包括：appid、timestamp、noncestr、package以及appkey（即
paySignkey）。

附录6-卡券扩展字段及签名生成算法

卡券扩展字段cardExt说明

cardExt本身是一个JSON字符串，是商户为该张卡券分配的唯一性信息，包含以下字段：

字段	是否必填	说明
code	否	指定的卡券code码，只能被领一次。use_custom_code字段为true的卡券必须填写，非自定义code不必填写。
openid	否	指定领取者的openid，只有该用户能领取。bind_openid字段为true的卡券必须填写，非自定义openid不必填写。
timestamp	是	时间戳，商户生成从1970年1月1日00:00:00至今的秒数,即当前的时间,且最终需要转换为字符串形式; 由商户生成后传入。
signature	是	签名，商户将接口列表中的参数按照指定方式进行签名,签名方式使用SHA1,具体签名方案参见下文;由商户按照规范签名后传入。
balance	否	红包余额，以分为单位。红包类型必填（LUCKY_MONEY），其他卡券类型不填。

签名说明

将appsecret（第三方用户唯一凭证密）、timestamp、card_id、code、openid、balance的value值进行字符串的字典序排序。
将所有参数字符串拼接成一个字符串进行sha1加密，得到signature。
signature中的timestamp和card_ext中的timestamp必须保持一致。
假如数据示例中code=23456，timestamp=141231233，card_id=345667，appsecret=45678则
signature=sha1(14123123323456345667456789)=4F76593A4245644FAE4E1BC940F6422A0C3EC03E。

卡券签名cardSign说明

将appsecret、app_id、location_id、times_tamp、nonce_str、card_id、card_type的value值进行字符串的字典序排序。
将所有参数字符串拼接成一个字符串进行sha1加密，得到cardSign。

附录7-常见错误及解决方法

调用config 接口的时候传入参数 debug: true 可以开启debug模式，页面会alert出错误信息。以下为常见错误及解决方法：

invalid url domain当前页面所在域名与使用的appid没有绑定（一个appid可以绑定三个有效域名）。
invalid signature签名错误。建议按如下顺序检查：
1. 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2. 确认config中noncestr, timestamp与用以签名中的对应noncestr, timestamp一致。
3. 确认url是页面完整的url，包括GET参数部分。
4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
the permission value is offline verifying这个错误是因为config没有正确执行，或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查：
1. 确认config正确通过。
2. 如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。
3. 确认config的jsApiList参数包含了这个JSAPI。
permission denied该应用没有权限使用这个JSAPI。