新建工程,以小程序 login 调试为例,代码如下:
javascript
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
debugger;
resThis = this;
wx.showModal({
title: '登录成功',
content: 'res.code = ' + res.code,
complete: (res) => {
if (res.cancel) { }
if (res.confirm) { }
}
})
console.debug("res.code = " + res.code);
},
timeout: res => {
debugger;
wx.showModal({
title: '登录超时',
content: 'res.code = ' + res.errMsg,
complete: (res) => {
if (res.cancel) { }
if (res.confirm) { }
}
})
},
fail: res => {
debugger;
wx.showModal({
title: '登录失败',
content: 'res.code = ' + res.errMsg,
complete: (res) => {
if (res.cancel) { }
if (res.confirm) { }
}
})
},
complete: res => {
debugger;
wx.showModal({
title: '登录操作完成',
content: 'res.code = ' + res.errMsg,
complete: (res) => {
if (res.cancel) { }
if (res.confirm) { }
}
})
}
})
调试要点总结:
1、需要打断点的代码行前,添加 debugger,
编译或保存时,都会促发模拟器重新运行,在调试器 sources 标签中打开代码断点位置,进入断点调试,此处代码可以点击左侧行号,新增或移除断点。
(代码编辑器无法与调试器同步,但调试器中呈现的代码文件与其用法无二。)
javascript
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
debugger;
resThis = this;
wx.showModal({
title: '登录成功',
content: 'res.code = ' + res.code,
complete: (res) => {
if (res.cancel) { }
if (res.confirm) { }
}
})
console.debug("res.code = " + res.code);
},
2、使用 console.log/info/debug 等输出信息到控制台
调试器 console 下输出。
3、模态弹窗(wx.showModal)
javascript
wx.showModal({
title: '登录成功',
content: 'res.code = ' + res.code,
complete: (res) => {
if (res.cancel) { }
if (res.confirm) { }
}
})
4、非模态弹窗(wx.showToast)
javascript
wx.showToast({
title: '非模态弹窗提示',
});
5、底部弹出菜单(wx.showActionSheet)
javascript
wx.showActionSheet({
alertText: '底部弹出菜单',
itemList: ['选项一', '选项二', '选项三', '选项四', '选项五'],
itemColor: '#000000',
success(res) {
wx.showToast({
title: '菜单序号' + res.tapIndex
})
},
fail(res) {
wx.showToast({
title: '菜单选择失败原因' + res.errMsg
})
},
complete(res) { }
})
6、气泡通知(wx.showLoading)
javascript
wx.showLoading({
title: '加载中提示。。。',
})
setTimeout(function () {
wx.hideLoading()
}, 2000)