zoukankan      html  css  js  c++  java
  • 「小程序JAVA实战」 小程序远程调试(九)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-09/

    在开发javaweb应用的时候,如果遇见一个问题都会调试,debug,在火狐和谷歌浏览器的时候我们也可以使用断点的方式调试js,小程序可以吗?肯定是可以的!小程序的调试也可以在手机端进行远程调试。源码:https://github.com/limingios/wxProgram.git 中的No.4

    开始演示

    1. 登录微信小程序,获取appId,远程调试必须有AppID

    1. 新建项目
      记住这个必须填入AppID

    1. 了解功能按键
      >预览:手机可以通过扫描二维码的方式在手机上直接观看小程序
      >远程调试:可以在手机上进行操作,并且可以在电脑上弹出对应的控制台,来观察操作的效果,同时在手机和电脑上进行调试。

    1. 修改初始化代码
      >源码: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
          })
        }
    })
    

    1. 打断点,源码中加入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'
    })
    

    1. 编辑工具下的调试
      > 开启调试器,可以通过f10单步进行调试

    1. 安装itools手机可以实时看到手机上的
      >扫描预览的效果

    1. 打开手机的调试

    • 重新进入小程序

    点击vConsole

    这里出发了onHide,上次在工具开发预览的时候并没有触发。.

    1. 开启远程调试
      >点击开启远程调试,也会生成一个二维码

    • 手机扫一扫,
    • 出现命中断点和远程调试窗口

    • 可以看到类似web调试的一些工具

    • 可以查看远端代码

    PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直接看就可以了。

  • 相关阅读:
    PAT (Advanced Level) Practice 1100 Mars Numbers (20分)
    PAT (Advanced Level) Practice 1107 Social Clusters (30分) (并查集)
    PAT (Advanced Level) Practice 1105 Spiral Matrix (25分)
    PAT (Advanced Level) Practice 1104 Sum of Number Segments (20分)
    PAT (Advanced Level) Practice 1111 Online Map (30分) (两次迪杰斯特拉混合)
    PAT (Advanced Level) Practice 1110 Complete Binary Tree (25分) (完全二叉树的判断+分享致命婴幼儿错误)
    PAT (Advanced Level) Practice 1109 Group Photo (25分)
    PAT (Advanced Level) Practice 1108 Finding Average (20分)
    P6225 [eJOI2019]异或橙子 树状数组 异或 位运算
    P4124 [CQOI2016]手机号码 数位DP
  • 原文地址:https://www.cnblogs.com/sharpest/p/10270224.html
Copyright © 2011-2022 走看看