「小程序JAVA实战」小程序远程调试（九）

IT架构圈

发布于 2018-12-18 15:11:23

9900

发布于 2018-12-18 15:11:23

在开发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.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'
})