wxready、wxconfig该如何使用?他们的先后顺序是怎样的?
使用步骤
wx.ready是微信JS-SDK提供的一个用于检测微信客户端是否准备就绪的回调函数,需要在微信配置文件中进行设置。
引入微信JS-SDK的SDK文件,例如在HTML中添加以下代码:
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
在微信公众号开发者中心中配置JS-API安全域名,并在页面中引入微信开发者中心生成的JS-SDK配置文件,例如在HTML中加入以下代码:
<script src="http://www.wubin.work/weixin/config"></script>
一般都是通过ajax请求接口,获取config配置。
config文件的内容如下:
wx.config({
debug: false,
appId: 'wxappid',
timestamp: 'timestamp',
nonceStr: 'nonceStr',
signature: 'signature',
jsApiList: [
// 必填,需要使用的JS接口列表,例如:
'checkJsApi',
'onMenuShareAppMessage'
]
});
在配置文件加载完成后,调用wx.ready()方法,例如:
注意,这里必须是要在获取config之后,再调用ready方法!!
wx.ready(function() {
// 执行业务逻辑
// 例如调用JS-SDK接口等
});
可以在wx.ready()方法中调用需要使用的JS-SDK接口,例如:
// 判断当前客户端是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['onMenuShareAppMessage'],
success: function(res) {
console.log(res);
}
});
// 分享接口
wx.onMenuShareAppMessage({
title: '分享的标题',
desc: '分享的描述',
link: 'http://www.wubin.work',
imgUrl: 'http://www.wubin.work/img/logo.png',
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
在JS-SDK接口调用完毕后,可以调用wx.error()方法对错误进行处理:
wx.error(function(res) {
console.log(res.errMsg); // 必填,接口调用失败的错误信息
});
在异步回调中执行wx.ready
wxShareData = {
"title": '..',
"desc": '...',
"link": '...',
"imgUrl": '...',
};
$.ajax({
type: 'GET',
url: '..',
data: {u: '携带的参数'},
dType: 'json',
success: function (json) {
let json1 = '';
if (typeof (json) != 'object') {
json1 = JSON.parse(json);
} else {
json1 = json;
}
let json2 = {
debug: false,
jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'updateAppMessageShareData', 'updateTimelineShareData', 'previewImage', 'chooseImage', 'openLocation', 'getLocation', 'scanQRCode', 'hideMenuItems', 'showMenuItems', 'closeWindow']
};
let wxcfg = Object.assign({}, json1, json2);
wx.config(wxcfg);
// 在配置文件加载完成后,调用wx.ready()
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['onMenuShareAppMessage'],
success: function (res) {
wx.onMenuShareAppMessage(wxShareData);
wx.onMenuShareTimeline(wxShareData);
wx.onMenuShareQQ(wxShareData);
wx.onMenuShareWeibo(wxShareData);
}
});
if (typeof wx.updateAppMessageShareData == 'function') {
wx.updateAppMessageShareData(wxShareData);
wx.updateTimelineShareData(wxShareData);
}
});
// wxready end
},
error: function (status) {
return false;
}
});