在开发javaweb应用的时候，如果遇见一个问题都会调试，debug，在火狐和谷歌浏览器的时候我们也可以使用断点的方式调试js，小程序可以吗？肯定是可以的！小程序的调试也可以在手机端进行远程调试。源码：https://github.com/limingios/wxProgram.git 中的No.4
开始演示
- 登录微信小程序，获取appId，远程调试必须有AppID
-
新建项目
记住这个必须填入AppID
-
了解功能按键
>预览：手机可以通过扫描二维码的方式在手机上直接观看小程序
>远程调试：可以在手机上进行操作，并且可以在电脑上弹出对应的控制台，来观察操作的效果，同时在手机和电脑上进行调试。
-
修改初始化代码
>源码：https://github.com/limingios/wxProgram.git 中的No.4
- app.js
//app.js
App({
onLaunch: function (options) {
console.log("onLaunch")
},
onShow: function (options) {
console.log("onShow")
},
onHide: function () {
console.log("onHide")
},
onError: function (msg) {
console.log("onError")
},
globalData: 'I am global data'
}) - app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
} - index.wxml
<!--index.wxml-->
<view class="container">
{{motto}}
</view> - index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function () {
this.setData({
motto: app.globalData
})
}
}) - 打断点，源码中加入debugger
//app.js
App({
onLaunch: function (options) {
debugger
console.log("onLaunch")
},
onShow: function (options) {
debugger
console.log("onShow")
},
onHide: function () {
debugger
console.log("onHide")
},
onError: function (msg) {
debugger
console.log("onError")
},
globalData: 'I am global data'
}) -
编辑工具下的调试
> 开启调试器，可以通过f10单步进行调试
-
安装itools手机可以实时看到手机上的
>扫描预览的效果
- 打开手机的调试
- 重新进入小程序
点击vConsole这里出发了onHide，上次在工具开发预览的时候并没有触发。.「小程序JAVA实战」 小程序远程调试（九）
-
开启远程调试
>点击开启远程调试，也会生成一个二维码
- 手机扫一扫，
「小程序JAVA实战」 小程序远程调试（九） - 出现命中断点和远程调试窗口
- 可以看到类似web调试的一些工具
- 可以查看远端代码