1、1 第2章 微信公众平台开发准备第2章 微信公众平台开发准备2 第2章 微信公众平台开发准备能力CAPACITY要求能够搭建好开发环境。掌握接口在线调试工具调试接口的方法。掌握基础接口调用凭证与获取微信服务器IP地址的方法。掌握微信Web开发调试工具的使用方法。3 第2章 微信公众平台开发准备内容CONTENTS导航基础接口开发环境搭建微信Web开发调试工具4 第2章 微信公众平台开发准备2.1 开发环境搭建01OPTION02OPTION03OPTION接入指南接口测试号申请接口在线调试5 第2章 微信公众平台开发准备2.1 开发环境搭建 p2.1.1接入指南 获取服务器资源 服务器类型虚拟
2、空间百度BAE新浪SAE云主机.指自己托管于IDC机房的服务器或者第三方服务商提供的服务器,一般一个人使用一整台服务器。第三方服务商将一台主机分成多个虚拟主机,供多人使用可以申请免费使用,但是有一定条件限制可以申请免费使用,但是有一定条件限制6 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.1接入指南 获取服务器资源(1)申请账号 http:/ 第2章 微信公众平台开发准备2.1 开发环境搭建(3)创建版本(4)上传代码2.1.1接入指南 获取服务器资源8 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.1接入指南 填写服务器配置(1)服务器地址URL 开发者用来接收微信消息
3、和事件的接口URL,该URL必须正确响应微信发送的Token验证。(2)Token Token是由开发者任意填写的签名,该Token会与服务器接口URL中包含的Token进行比对,从而验证安全性。(3)EncodingAESKey 由开发者手动填写或随机生成的,主要用于消息体加密解密的密钥。9 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.1接入指南 填写服务器配置服务器配置填写10 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.1接入指南 验证服务器地址的有效性 开发者提交配置信息后,微信服务器将发送GET请求到填写的服务器地址URL上从而验证消息的确来自微信服务器,GE
4、T请求携带参数如下表所示:参数描述signature微信加密签名,signature结合了开发者请求中的timestamp参数,nonce参数。timestamp时间戳nonce随机数echostr随机字符串GET请求参数列表11 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.1接入指南 验证服务器地址的有效性 获得 GET请求的几个参数后,开发者就可以通过signature对请求进行校验。开发者开发的校验程序要能够处理GET请求,并对请求者进行身份验证,确保请求来自微信服务器。校验流程为:首先将token、timestamp、nonce三个参数进行字典序排序;随后将三个参数字符串拼
5、接成一个字符串并进行sha1加密;开发者获得加密后的字符串可与signature对比,标识该请求来源于微信,原样返回echostr参数内容,则接入生效。12 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.1接入指南 验证服务器地址的有效性 public void ProcessRequest(HttpContext context)string s=;Listl=newList();l.Add(你填写的token);l.Add(context.Request.QueryStringtimestamp);l.Add(context.Request.QueryStringnonce);l
6、.Sort();foreach(string_s in l)s+=_s;s=FormsAuthentication.HashPasswordForStoringInConfigFiles(s,SHA1).ToLower();if(s=context.Request.QueryStringsignature)context.Response.Write(context.Request.QueryStringechostr);public bool IsReusable get return false;13 第2章 微信公众平台开发准备2.1 开发环境搭建01OPTION02OPTION03OP
7、TION接入指南接口测试号申请接口在线调试14 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.2 接口测试号申请 由于用户体验和安全性方面的考虑,微信公众号的注册有一定的门槛,某些高级接口权限需要微信认证后才可以获取,微信认证必须是企业或组织才能申请认证,而个人是不可以的。所以,为了帮助开发者快速了解和上手微信公众号开发,熟悉各个接口的调用,微信团队推出了微信公众账号测试号。测试号申请网址:http:/ 15 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.2 接口测试号申请 在出现的页面中单击登录即会跳转至如左侧所示的一个微信二维码页面,使用手机微信扫一扫网页中二维码,手机
8、则会出现如右图所示的界面登陆公众平台测试账号系统。16 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.2 接口测试号申请测试号接口权限表17 第2章 微信公众平台开发准备2.1 开发环境搭建01OPTION02OPTION03OPTION接入指南接口测试号申请接口在线调试18 第2章 微信公众平台开发准备2.1 开发环境搭建2.1.3 接口在线测试微信公众平台接口在线调试工具微信公众平台接口在线调试网站:https:/ 第2章 微信公众平台开发准备内容CONTENTS导航基础接口开发环境搭建微信Web开发调试工具20 第2章 微信公众平台开发准备 2.2 基础接口1、access_t
9、oken的使用2、access_token的生成获取接口调用凭证获取微信服务器IP地址 如果公众号基于安全等考虑,需要获知微信服务器的IP地址列表,以便进行相关限制,可以通过以下接口获得微信服务器IP地址列表或者IP网段信息。access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token。21 第2章 微信公众平台开发准备2.2 基础接口 2.2.1获取接口调用凭证access_token的使用 p为了对appsecrect进行保密,开发者或运营商需要一个access_token获取和刷新的中控服务器。而其他业务逻辑服务器所使用的access_tok
10、en均来自于该中控服务器,不应该各自去刷新,否则会造成access_token覆盖而影响业务;p目前access_token的有效期通过返回的expire_in来传达,目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新access_token。在刷新过程中,中控服务器对外输出的依然是旧的access_token。paccess_token的有效时间可能会在未来有调整,所以中控服务器不仅需要内部定时主动刷新,还需要提供被动刷新access_token的接口。22 第2章 微信公众平台开发准备2.2 基础接口 2.2.1获取接口调用凭证access_token的生成 p公众号可以使
11、用AppID和AppSecret调用接口来获取access_token。pAppID和AppSecret可在微信公众平台官网-开发页中获得。lhttp请求方式:GEThttps:/ 第2章 微信公众平台开发准备2.2 基础接口 2.2.1获取接口调用凭证access_token的生成 获取access_token参数说明表参数名称是否必须参数描述grant_type是获取access_token填写client_credentialappid是第三方用户唯一凭证secret是第三方用户唯一凭证密钥,即appsecret24 第2章 微信公众平台开发准备2.2 基础接口 2.2.1获取接口调用凭
12、证access_token的生成 p正常情况下,返回数据包:access_token:ACCESS_TOKEN,expires_in:7200p错误时会返回错误码等信息,数据包示例:errcode:40013,errmsg:invalid appid参数名称参数描述expires_in凭证有效时间,单位:秒25 第2章 微信公众平台开发准备2.2 基础接口 2.2.2 获取微信服务器IP地址 lhttp请求方式:GEThttps:/ p 错误时返回错误码信息,示例数据包:errcode:40013,errmsg:invalid appid26 第2章 微信公众平台开发准备内容CONTENTS导
13、航基础接口开发环境搭建微信Web开发调试工具27 第2章 微信公众平台开发准备2.3 微信Web开发调试工具01OPTION02OPTION03OPTION04OPTION调试微信网页授权调试JS-SDK相关功能移动调试与Chrome集成使用28 第2章 微信公众平台开发准备2.3 微信web开发调试工具 p为了帮助开发者更方便、更安全地开发和调试基于微信的网页,微信公众号团队推出了 Web开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在PC或者Mac上进行开发和调试工作。29 第2章 微信公众平台开发准备2.3 微信web开发调试工具 顶部菜单栏是刷
14、新、后退、选中地址栏等动作的统一入口,以及微信客户端版本的模拟设置页。左侧是微信的WebView模拟器,可以直接操作网页,模拟用户真实行为。右侧上方是地址栏,用于输入待调试的页面链接,以及清除缓存按钮。右侧下方是相关的请求和返回结果,以及调试界面和登录按钮。30 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.1 调试微信网页授权 p开发者可以直接在PC或者Mac上进行网页调试,具体操作步骤为:1、使用手机微信扫码登录2、绑定开发者微信号3、调试微信网页授权31 第2章 微信公众平台开发准备2.3 微信web开发调试工具01OPTION02OPTION03OPTIONJS-
15、SDK的使用基础接口调试JS-SDK调试调试JS-SDK相关功能32 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能JS-SDK的使用 p微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。JS-SDK的使用如下:(1)绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”就完成了域名的绑定。登录后可在“开发者中心”查看对应的接口权限。(2)引入JS文件 在需要调用JS接口的页面引入如下JS文件http:/ 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-
16、SDK相关功能JS-SDK的使用l(3)通过config接口注入权限验证配置 所有需要使用JS-SDK的页面首先需要注入配置信息,否则将无法调用。而同一个URL仅需调用一次,对于变化URL的SPA的Web App可以在每次URL变化的时进行调用。wx.config(debug:true,/开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId:,/必填,公众号的唯一标识 timestamp:,/必填,生成签名的时间戳 nonceStr:,/必填,生成签名的随机串 signature:,/必
17、填,签名,见附录1 jsApiList:/必填,需要使用的JS接口列表,所有JS接口列表见附录2);34 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能JS-SDK的使用l(4)通过ready接口处理成功验证 wx.ready(function()/config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。);
18、35 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能JS-SDK的使用l(5)通过error接口处理失败验证wx.error(function(res)/config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。);36 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能JS-SDK的使用p以上所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每
19、个接口本身需要传的参数之外,还有以下通用参数:1、success:接口调用成功时执行的回调函数。2、fail:接口调用失败时执行的回调函数。3、complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。4、cancel:用户单击取消时的回调函数,仅部分有用户取消操作的api才会用到。5、trigger:监听Menu中的按钮单击时触发的方法,该方法仅支持Menu中的相关接口。37 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能JS-SDK的使用p以上所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接
20、口本身需要传的参数之外,还有以下通用参数:1、success:接口调用成功时执行的回调函数。2、fail:接口调用失败时执行的回调函数。3、complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。4、cancel:用户单击取消时的回调函数,仅部分有用户取消操作的api才会用到。5、trigger:监听Menu中的按钮单击时触发的方法,该方法仅支持Menu中的相关接口。38 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试p判断当前客户端版本是否支持指定JS接口的方法如下:wx.checkJsApi jsApiList:
21、chooseImage,/需要检测的JS接口列表,所有JS接口列表见附录2,success:function(res)/以键值对的形式返回,可用的api值true,不可用为false /如:checkResult:chooseImage:true,errMsg:checkJsApi:ok );39 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(1)分享接口获取“分享到朋友圈”按钮单击状态及自定义分享内容接口:wx.onMenuShareTimeline(title:,/分享标题 link:,/分享链接 imgUrl:,/分享图标
22、success:function()/用户确认分享后执行的回调函数 ,cancel:function()/用户取消分享后执行的回调函数 );40 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(1)分享接口获取“分享给朋友”按钮单击状态及自定义分享内容接口:wx.onMenuShareAppMessage(title:,/分享标题 desc:,/分享描述 link:,/分享链接 imgUrl:,/分享图标 type:,/分享类型,music、video或link,不填默认为link dataUrl:,/如果type是music或vi
23、deo,则要提供数据链接,默认为空 success:function()/用户确认分享后执行的回调函数,cancel:function()/用户取消分享后执行的回调函数);41 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(1)分享接口获取“分享到QQ”按钮单击状态及自定义分享内容接口:wx.onMenuShareQQ(title:,/分享标题 desc:,/分享描述 link:,/分享链接 imgUrl:,/分享图标 success:function()/用户确认分享后执行的回调函数,cancel:function()/用户取消
24、分享后执行的回调函数);42 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(1)分享接口获取“分享到腾讯微博”按钮单击状态及自定义分享内容接口:wx.onMenuShareWeibo(title:,/分享标题 desc:,/分享描述 link:,/分享链接 imgUrl:,/分享图标 success:function()/用户确认分享后执行的回调函数,cancel:function()/用户取消分享后执行的回调函数 );43 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调
25、试(1)分享接口获取“分享到QQ空间”按钮单击状态及自定义分享内容接口:wx.onMenuShareQZone(title:,/分享标题 desc:,/分享描述 link:,/分享链接 imgUrl:,/分享图标 success:function()/用户确认分享后执行的回调函数,cancel:function()/用户取消分享后执行的回调函数 );44 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(2)图像接口拍照或从手机相册中选图接口:wx.chooseImage(count:1,/默认9 sizeType:original,
26、compressed,/可以指定是原图还是压缩图,默认二者都有 sourceType:album,camera,/可以指定来源是相册还是相机,默认二者都有 success:function(res)var localIds=res.localIds;/返回选定照片的本地ID列表,localId可以作为img标签src属性显示图片 );45 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(2)图像接口预览图片接口:wx.previewImage(current:,/当前显示图片的http链接 urls:/需要预览的图片http链接列表
27、);46 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(2)图像接口上传图片接口wx.uploadImage(localId:,/需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips:1,/默认为1,显示进度提示 success:function(res)var serverId=res.serverId;/返回图片的服务器端ID );47 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(2)图像接口下载图片接口wx.down
28、loadImage(serverId:,/需要下载的图片的服务器端口ID,由uploadImage接口获得 isShowProgressTips:1,/默认为1,显示进度提示 success:function(res)var localId=res.localId;/返回图片下载后的本地ID );48 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(3)音频接口开始录音接口:wx.startRecord();停止录音接口:wx.stopRecord(success:function(res)var localId=res.local
29、Id;);49 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(3)音频接口监听录音自动停止接口:wx.onVoiceRecordEnd(/录音时间超过一分钟没有停止的时候会执行 complete 回调 complete:function(res)var localId=res.localId;);50 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(3)音频接口播放语音接口:wx.playVoice(localId:/需要播放的音频的本地ID,由stopRecord接口
30、获得);监听语言播放完毕接口:wx.onVoicePlayEnd(success:function(res)var localId=res.localId;/返回音频的本地ID );51 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(3)音频接口上传语音接口:wx.uploadVoice(localId:,/需要上传的音频的本地ID,由stopRecord接口获得 isShowProgressTips:1,/默认为1,显示进度提示 success:function(res)var serverId=res.serverId;/返回
31、音频的服务器端ID );52 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(3)音频接口下载语音接口:wx.downloadVoice(serverId:,/需要下载的音频的服务器端ID,由uploadVoice接口获得 isShowProgressTips:1,/默认为1,显示进度提示 success:function(res)var localId=res.localId;/返回音频的本地ID );53 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(4)智能接口(
32、识别音频并返回结果)wx.translateVoice(localId:,/需要识别的音频的本地Id,由录音相关接口获得 isShowProgressTips:1,/默认为1,显示进度提示 success:function(res)alert(res.translateResult);/语音识别的结果 );54 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(5)设备信息(获取网络状态)wx.getNetworkType(success:function(res)var networkType=workType;/返回网络类型2g,
33、3g,4g,wifi );55 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(6)地理位置使用微信内置地图查看位置接口:wx.openLocation(latitude:0,/纬度,浮点数,范围为90 -90 longitude:0,/经度,浮点数,范围为180 -180 name:,/位置名 address:,/地址详情说明 scale:1,/地图缩放级别,整形值,范围从128。默认为最大 infoUrl:/在查看位置界面底部显示的超链接,可单击跳转);56 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2
34、 调试JS-SDK相关功能基础接口调试(6)地理位置获取地理位置接口:wx.getLocation(type:wgs84,/默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入gcj02 success:function(res)var latitude=res.latitude;/纬度,浮点数,范围为90 -90 var longitude=res.longitude;/经度,浮点数,范围为180 -180 var speed=res.speed;/速度,以米/每秒计 var accuracy=res.accuracy;/位置精度 );57 第2章 微信
35、公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(7)摇一摇周边开启查找周边ibeacon设备接口:wx.startSearchBeacons(ticket:,/摇周边的业务ticket,系统自动添加在摇出来的页面链接后面 complete:function(argv)/开启查找完成后的回调函数 );58 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(7)摇一摇周边关闭查找周边ibeacon设备接口:wx.stopSearchBeacons(complete:function(arg
36、v)/关闭查找完成后的回调函数 );59 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(7)摇一摇周边监听周边ibeacon设备接口:wx.onSearchBeacons(complete:function(argv)/回调函数,可以数组形式取得该商家注册的在周边的相关设备列表 );60 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(8)界面操作关闭当前网页窗口接口:wx.closeWindow();批量隐藏功能按钮接口:wx.hideMenuItems(menuLi
37、st:/要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮);61 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(8)界面操作批量显示功能按钮接口:wx.showMenuItems(menuList:/要显示的菜单项);隐藏所有非基础按钮接口:wx.hideAllNonBaseMenuItem();显示所有功能按钮接口:wx.showAllNonBaseMenuItem();62 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(9)微信扫一扫wx.scanQRCode(
38、needResult:0,/默认为0,扫描结果由微信处理,1则直接返回扫描结果,scanType:qrCode,barCode,/可以指定扫二维码还是一维码,默认二者都有 success:function(res)var result=res.resultStr;/当needResult 为 1 时,扫码返回的结果 );63 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(10)微信小店跳转微信商品页接口:wx.openProductSpecificView(productId:,/商品id viewType:/0.默认值,普通商品
39、详情页1.扫一扫商品详情页2.小店商品详情页);64 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(11)微信卡券 接口调用请求说明:http请求方式:GEThttps:/ 返回数据示例:errcode:0,errmsg:ok,ticket:bxLdikRXVbTPdHSM05e5u5sUoXNKdvsdshFKA,expires_in:7200参数名参数描述errmsg错误信息ticketapi_ticket,卡券接口中签名所需签证65 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关
40、功能基础接口调试(11)微信卡券拉取适用卡券列表并获取用户选择信息:wx.chooseCard(shopId:,/门店Id cardType:,/卡券类型 cardId:,/卡券Id timestamp:0,/卡券签名时间戳 nonceStr:,/卡券签名随机串 signType:,/签名方式,默认SHA1 cardSign:,/卡券签名 success:function(res)var cardList=res.cardList;/用户选中的卡券列表信息 );66 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(11)微信卡券拉取
41、适用卡券列表并获取用户选择信息:wx.chooseCard(shopId:,/门店Id cardType:,/卡券类型 cardId:,/卡券Id timestamp:0,/卡券签名时间戳 nonceStr:,/卡券签名随机串 signType:,/签名方式,默认SHA1 cardSign:,/卡券签名 success:function(res)var cardList=res.cardList;/用户选中的卡券列表信息 );参数名称是否必填数据类型示例值参数描述shopId否string(24)1234门店ID。shopID用于筛选出拉起带有指定location_list(shopID)的卡
42、券列表,非必填。cardType否string(24)GROUPON卡券类型,用于拉起指定卡券类型的卡券列表。当cardType为空时,默认拉起所有卡券的列表,非必填。cardId否string(32)p1Pj9jr90_SQRaVqYI239Ka1erk卡券ID,用于拉起指定cardId的卡券列表,当cardId为空时,默认拉起所有卡券的列表,非必填。timestamp是string(32)14300000000时间戳。nonceStr是string(32)sduhi123随机字符串。signType是string(32)SHA1签名方式,目前仅支持SHA1cardSign是string(6
43、4)abcsdijcous123签名。67 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(11)微信卡券批量添加卡券接口:wx.addCard(cardList:cardId:,cardExt:,/需要添加的卡券列表 success:function(res)var cardList=res.cardList;/添加的卡券列表信息 success:function(res)var cardList=res.cardList;/用户选中的卡券列表信息 );68 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2
44、调试JS-SDK相关功能基础接口调试(11)微信卡券查看微信卡包中的卡券接口:wx.openCard(cardList:cardId:,code:,/需要打开的卡券列表);69 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.2 调试JS-SDK相关功能基础接口调试(12)微信支付wx.chooseWXPay(timestamp:0,/支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr:,/支付签名随机串,不长于 32 位 package:,/统一支付接口
45、返回的prepay_id参数值,提交格式如:prepay_id=*)signType:,/签名方式,默认为SHA1,使用新版支付需传入MD5 paySign:,/支付签名 success:function(res)/支付成功后的回调函数 );70 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.3 移动调试通过微信Web开发者工具中的远程调试功能,实时映射手机屏幕到微信Web开发者工具上,将帮助开发者更高效地调试X5 Blink内核的网页,具体步骤如下:1.准备工作l安装0.5.0或以上版本的微信Web开发者工具。l确认移动设备是否支持远程调试功能。l打开移动设备中的USB
46、调试功能。l安装移动设备USB驱动。l打开X5 Blink内核的inspector功能。71 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.3 移动调试2.开始调试 使用USB数据线将移动设备与pc或mac端连接后,单击打开微信Web开发者工具“移动调试”tab,选择X5 Blink调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。连接设备信息手机微信打开的网页信息72 第2章 微信公众平台开发准备2.3 微信web开发调试工具 2.3.4 与Chrome集成调试 微信开发者工具上集成了Chrome Tools模块,我们可以直接在微信Web开发者工具上对相关元素的样式进行调试,该功能与之前在PC上的调试体验一致。与Chrome Tools模块的集成73 第2章 微信公众平台开发准备THANKS