• 在微信小程序开始学习与开发的过程中,总有一些东西,想看看它跑起来的内容与我们...第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”S

    在微信小程序开始学习与开发的过程中,总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍下微信小程序的一般用到的调试方法和打印日志以及看到变量里面的运行值。

    第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点开”Top”根节点,层层打开,找到自己想要调试的js文件,一般是打那种.js后面带[sm],如index.js[sm],非index.js,当然这里之后想修改内容不能在”调试”模式下修改,而要转到”编辑”模式,之前我老容易犯这个错误,打开index.js[sm]文件后,点击左边的行上的数字,就会由灰色背景变成蓝色背景,这样断点就打好了,(如果不想要了,也可以点击就会取消)如下图所示:

    第二步:运行,首先点击编译上面的那个运行小图标(或者快捷键ctrl+b),然后操作到你想要的那个界面或者触发某个动作,程序自动会跑到断点处代码,如下图所示:


    第三步:单步调试,按调试器窗口(debugger)的向下箭头(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示


    如果想看调试中变量的运行值怎么办?有许多办法,这里以查看上个界面传来的options变量值为例

    办法1:让鼠标指针放在变量上,他会有提示框,框内就是变量值,如下图所示


    办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示


    方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示


    如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?

    办法就是点击调试器窗口中的图标,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

    展开全文
  • 确保微信开发者工具-设置-安全-服务端口开启;且已获得小程序项目的开发者角色。 1、打开Git Bash 克隆小程序项目。克隆完成后。 2、打开HBuilder,点击菜单“文件”下的“打开目录”,选择已克隆的小程序项目。...

    主手自己用的是Win7 64位的电脑。
    确保微信开发者工具-设置-安全-服务端口开启;且已获得小程序项目的开发者角色。
    在Windows系统下已安装GIT 和 TortoiseGIT安装。

    在这里插入图片描述
    1、打开Git Bash 克隆小程序项目。克隆完成后。
    2、打开HBuilder,点击菜单“文件”下的“打开目录”,选择已克隆的小程序项目。
    3、点击“运行—运行小程序模拟器-微信开发者工具”,等待小程序项目打开。
    4、小程序项目打开后,栏位“编辑器”背景色为绿色。单击“编辑器”去掉绿色。

    可以开始在微信开发者工具进行测试了。
    在这里插入图片描述

    展开全文
  • 微信开发者工具开发微信小程序1、下载工具2、工具使用3、增删改查a:使用云开发数据库以查询为例b:调用本地springboot接口以查询为例 1、下载工具 进入微信公众平台:微信公众平台. 由于我已经注册过,所以提供文档...

    1、下载工具

    进入微信公众平台:微信公众平台.
    由于我已经注册过,所以提供文档参考开发文档api.
    刚入门只需要看这几类即可:
    在这里插入图片描述
    根据文档链接(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18110719)下载开发工具,根据电脑配置下载:
    在这里插入图片描述
    下载后的工具:
    在这里插入图片描述
    安装后的文件夹:
    在这里插入图片描述

    2、工具使用

    点击exe,进入下图:
    在这里插入图片描述
    点击小程序项目,进入下图(这里的项目是我之前开发过的):
    在这里插入图片描述
    在这里插入图片描述

    平台自带的获取微信号和获取浏览时间,进入项目即可看到
    在这里插入图片描述

    具体可参考微信官方文档 工具使用文档.
    在这里插入图片描述

    3、增删改查

    a:使用云开发数据库

    注意:具体可参考云开发文档.
    1、新建项目选择一个空目录,填入 AppID(使用云开发能力必须填写 AppID),勾选创建 “云开发 QuickStart 项目”
    2、进入程序若是出现调用函数失败的错误:在 app.json / game.json 中增加字段 “cloud”: true即可解决
    3、进入项目点击上方云开发:在这里插入图片描述
    4、配置后进入数据库:
    在这里插入图片描述

    以查询为例

    在这里插入图片描述

    b:调用本地springboot接口

    以查询为例

    springboot接口是另外的项目,此处只是告诉大家如何调用
    1、将springboot接口用maven打包成jar文件
    在这里插入图片描述
    2、待jar启动后,就可以调用啦在这里插入图片描述
    3、如果调用时候出现405错误,不要慌,点击右上角的详情,勾选不校验合法参数即可,g

    特别提醒:如果有什么不懂的,或者需要demo的,请私信我,有什么不足之处还请大家多多指教,谢谢。

    展开全文
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 ...
  • 微信团队发布了微信小程序开发者工具微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序。启动工具时,开发者需要使用...

    微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。

    微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序。

    启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所有的操作都会基于这个微信的帐号

    程序调试主要有三大功能区:模拟器、调试工具和小程序操作区

    模拟器

    模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

    调试工具

    调试工具分为 6 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage以及WxmlPannel

    微信小程序开发者工具简介

    Wxml Pannel 用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的 wxml 代码。

    微信小程序开发者工具简介

    Sources Pannel 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources Pannel 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。Netwrok Pannle 用于观察和显示 request 和 socket 的请求情况。Appdata Pannel 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。Storage Pannel 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。Console Pannel 有两大功能:开发者可以在此输入和调试代码以及微信小程序的错误输出。

    小程序操作区

    微信小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从微信小程序中回到聊天窗口,会触发一个微信小程序被设置为后台的api。

    微信小程序开发者工具简介

    点击预览功能,工具会自动编译和构建代码,并生成代码包上传到微信服务器,成功后将会显示一个二维码,开发者用新版微信扫描二维码即可在手机上看到相应项目的真实表现。


    请观看小程序视频教程了解详情,更多资讯请关注小程序开发教程

    展开全文
  • 由于小程序的火爆,于是去开源中国接了个私活,开发...第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点...

    由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下:

    第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点开”Top”根节点,层层打开,找到自己想要调试的js文件,一般是打那种.js后面带[sm],如index.js[sm],非index.js,当然这里之后想修改内容不能在”调试”模式下修改,而要转到”编辑”模式,之前我老容易犯这个错误,打开index.js[sm]文件后,点击左边的行上的数字,就会由灰色背景变成蓝色背景,这样断点就打好了,(如果不想要了,也可以点击就会取消)如下图所示:

     

    第二步:运行,首先点击编译上面的那个运行小图标(或者快捷键ctrl+b),然后操作到你想要的那个界面或者触发某个动作,程序自动会跑到断点处代码,如下图所示:

     

    第三步:单步调试,按调试器窗口(debugger)的向下箭头(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示

     

    如果想看调试中变量的运行值怎么办?有许多办法,这里以查看上个界面传来的options变量值为例

    办法1:让鼠标指针放在变量上,他会有提示框,框内就是变量值,如下图所示

     

    办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示

     

    方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示

     

    如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?

    办法就是点击调试器窗口中的图标,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

    展开全文
  • 微信开发者工具(小程序)源码
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...
  • 假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具调试. 假设我的web应用的访问入口是如下公众号菜单的"预约"按钮: 那么为了能够在微信开发者工具调试,...
  • 利用微信开发者工具获取小程序指定页面路径! 文章来源:企鹅号 - 程鹏亮 小程序不同于app,小程序的每个页面都有页面路径。在使用微信小程序的过程中,很多场景都要使用到小程序的页面路径。比如微信图文中的...
  • 微信开发者工具不能调试公众号和小程序 webview 问题描述 微信开发者工具调试小程序 webview 页面白屏,但是 date 里面数据一切正常 微信开发者工具不能调试公众号网页,但是打开百度正常 解决方案 这个原因真是...
  • 打开微信开发者工具 创建第一个小程序 步骤: 打开微信开发者工具 使用微信扫码登录 点击小程序-创建小程序 项目名 项目路径 appid 不使用云服务器 语言: javascript...
  • 1.将安装好的 微开发者工具移动到没有中文路径的地址,然后将 微信开发者工具.exe 更改为英文名字,然后发送到桌面快捷方式 2,按照谷歌配置可跨域的方法配置 配置方法(配置的时候请保证 你的软件在关闭状态) ...
  • 微信开发者工具很好的集成了java的开发环境,是java初学者很好的练手软件。准备条件:注册微信小程序开发者账号,需要用到微信账号。 网址:https:...
  • 因为是别的伙伴的项目,所以,要换一个appID,可以换成自己的,HbuilderX运行在微信开发者工具,打不开,只会跳转到导入项目界面,不会打开这个项目,报错: 解决方法: 然后,关闭微信开发者工具,在...
  • 下面来介绍下自己的针对小程序微信开发者工具的使用心得。 下载地址:开发者工具下载地址 1.下载并安装以后打开,微信号扫码登录登录开发者工具。 如果还没有注册,可以填写无AppID,它会显示部分功能受限,...
  • 微信开发者工具-调试调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、Storage、Wxml Console Console有两大功能: 1)开发者可以在此输入和调试代码  2)小程序的错误输出,会显示...
  • 微信开发者工具集成git,实现多人协调开发,下面就拿GitHub举例,一一说明。 一、在GitHub创建远程仓库。这里忽略,网上很多。 二、在微信开发者工具中配置Git,并实现文件上传。 1.点击开发者工具右角的...
  • 由于小程序的火爆,于是去开源中国接了个私活,开发...第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点...
  • 我的情况是将在webStorm开发的代码复制到微信开发者工具上时,经简单修改后不报错了但是界面黑屏, 找了一段时间发现是图片资源的路径没有设置正确。如下: 这是在微信开发者工具上的情况: 其实在webStrom...
1 2 3 4 5 ... 20
收藏数 37,690
精华内容 15,076