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的,不是说直接看就可以了。

  • 相关阅读:
    Sass变量、嵌套
    遮罩层2
    遮罩层
    大图轮播
    项目资料(主页)
    关于时间控制和制定时间日期
    dom作业
    js的dom操作和函数
    js数组去重
    js For循环练习。
  • 原文地址:https://www.cnblogs.com/sharpest/p/10270224.html
Copyright © 2011-2022 走看看