没有合适的资源?快使用搜索试试~ 我知道了~
微信开发中JSSDK的使用
资源推荐
资源详情
资源评论
微信开发中 JSSDK 的使用
微信 JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信 JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能
力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的
网页体验。
此文档面向网页开发者介绍微信 JS-SDK 如何使用及相关注意事项。
JSSDK 使用步骤
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入 JS 文件
在需要调用 JS 接口的页面引入如下 JS 文件,(支持 https):
http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:
http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持 https)。
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过 config 接口注入权限验证配置
所有需要使用 JS-SDK 的页面必须先注入配置信息,否则将无法调用(同一个 url 仅需调用一次,对
于变化 url 的 SPA 的 web app 可在每次 url 变化时进行调用,目前 Android 微信客户端不支持
pushState 的 H5 新特性,所以使用 pushState 来实现 web app 的页面会导致签名失败,此问题会在
Android6.2 中修复)。
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参
数信息会通过 log 打出,仅在 pc 端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的 JS 接口列表});
签名算法见文末的附录 1,所有 JS 接口列表见文末的附录 2
注意:如果使用的是小程序云开发静态网站托管的域名的网页,可以免鉴权直接跳任意合法合规小程
序,调用 wx.config 时 appId 需填入非个人主体的已认证小程序,不需计算签名,timestamp、
nonceStr、signature 填入非空任意值即可。
步骤四:通过 ready 接口处理成功验证
wx.ready(function(){
// config 信息验证后会执行 ready 方法,所有接口调用都必须在 config 接口获得结果之后,config 是一个客户端的异步操作,
所以如果需要在页面加载时就调用相关接口,则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口,
则可以直接调用,不需要放在 ready 函数中。});
步骤五:通过 error 接口处理失败验证
wx.error(function(res){
// config 信息验证失败会执行 error 函数,如签名过期导致验证失败,具体错误信息可以打开 config 的 debug 模式查看,也可
以在返回的 res 参数中查看,对于 SPA 可以在这里更新签名。});
接口调用说明
所有接口通过 wx 对象(也可使用 jWeixin 对象)来调用,参数是一个对象,除了每个接口本身需要传
的参数之外,还有以下通用参数:
1. success:接口调用成功时执行的回调函数。
2. fail:接口调用失败时执行的回调函数。
3. complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
4. cancel:用户点击取消时的回调函数,仅部分有用户取消操作的 api 才会用到。
5. trigger: 监听 Menu 中的按钮点击时触发的方法,该方法仅支持 Menu 中的相关接口。
备注:不要尝试在 trigger 中使用 ajax 异步请求修改本次分享的内容,因为客户端分享操作是一个
同步操作,这时候使用 ajax 的回包会还没有返回。
以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用
属性 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
、
wx.onMenuShareAppMessage
、
wx.onMenuShareQQ
、
wx.onMenuShareQZone
接口,即将废弃。请
尽快迁移使用客户端 6.7.2 及 JSSDK 1.4.0 以上版本支持的
wx.updateAppMessageShareData
、
wx.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 () {
// 设置成功
}
})});
获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
}},
获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video 或 link,不填默认为 link
dataUrl: '', // 如果 type 是 music 或 video,则要提供数据链接,默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}});
获取“分享到 QQ”按钮点击状态及自定义分享内容接口(即将废弃)
wx.onMenuShareQQ({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
剩余26页未读,继续阅读
资源评论
icysmile131
- 粉丝: 4632
- 资源: 743
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功