「小程序JAVA实战」 小程序远程调试(九)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-09/
在开发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'
})
- 编辑工具下的调试
> 开启调试器,可以通过f10单步进行调试
- 安装itools手机可以实时看到手机上的
>扫描预览的效果
- 打开手机的调试
- 重新进入小程序
点击vConsole
这里出发了onHide,上次在工具开发预览的时候并没有触发。.
- 开启远程调试
>点击开启远程调试,也会生成一个二维码
- 手机扫一扫,
出现命中断点和远程调试窗口
- 可以看到类似web调试的一些工具
- 可以查看远端代码
PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直接看就可以了。
「小程序JAVA实战」 小程序远程调试(九)的更多相关文章
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 「小程序JAVA实战」小程序的留言和评价功能(70)
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
- 「小程序JAVA实战」小程序的举报功能开发(68)
转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...
- 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...
- 「小程序JAVA实战」小程序的关注功能(65)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...
- 「小程序JAVA实战」小程序的视频点赞功能开发(62)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...
- 「小程序JAVA实战」小程序的springboot后台拦截器(61)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...
- 「小程序JAVA实战」小程序首页视频(49)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...
- 「小程序JAVA实战」小程序视频封面处理(48)
转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...
随机推荐
- js中关于json常用的内容、js将数字保留两位小数
没什么好说的 保存起来 以后有个地方找 var json=eval("[]") //json定义 var s={"id":"xxx",& ...
- 使用 DocFX 生成 .Net/Unity项目文档
孙广东 2017.5.27 http://blog.csdn.NET/u010019717 微软开源全新的文档生成工具DocFX 类似JSDoc或Sphinx 如何使用看 : http: ...
- apt-get指令的autoclean,clean,autoremove的区别
apt-get使用各用于处理apt包的公用程序集,我们可以用它来在线安装.卸载和升级软件包等,下面列出一些apt-get包含的常用的一些工具: 工具 说明 install 其后加上软件包名,用于安装一 ...
- Eclipse环境搭建配置操作
1.选择window 2.设置字体 3.设置编码格式:国际编码:UTF-8 第一个地方设置编码格式 第二个地方设置编码格式:这个更重要些 4.配置26个英文小写字母. 作用:能够在开发时提示你,快速开 ...
- python3 selenium 安装以及验证
1. 相关链接 官方网站:http://www.seleniumhq.org GitHub:https://github.com/SeleniumHQ/selenium/tree/master/py ...
- is is not == !=之间的区别
简单来说,python中的is与is not运算符可判断两个对象是否为同一对象.若为同一个对象,则对象1 is 对象2为True .反正,若非同一个对象,则对象1 is not 对象2为True 要理 ...
- nmon的使用
Linux性能评测工具之一:nmon篇 分类: 敏捷实践2010-06-08 11:27 7458人阅读 评论(0) 收藏 举报 工具linuxfilesystemsaixx86excel 目录( ...
- gulp 集成其他基于流的工具
1. 流.缓冲.vinyl 文件对象 gulp 的流是虚拟文件对象 包含的属性有 base 文件名 path 文件路径 content 缓冲.nodejs 流 2. gulp 集成 browserif ...
- 两种方式创建Maven项目【方式二】
1.不勾选Create a simple project,直接点击下一步 2.选择maven-archetype-webapp下一步 3.填写相关信息,点击下一步完成 4.此时会报一个jsp的错误.我 ...
- cxGrid使用汇总3
32根据单元的值设置样式 解决:procedure <aForm>.<aColumn>StylesGetContentStyle( Sender: ...