微信开发者工具_微信开发者工具怎么测试java微信开发 - CSDN
精华内容
参与话题
  • 微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。 微信开发者工具官方下载地址:...

    参考教材:《微信小程序开发入门与实践》 雷磊

    前言

    微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发者工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。
    微信开发者工具官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    注意,Windows版本的仅支持window7及以上版本。
    笔者所用的系统为window10 64位

    下载与安装

    笔者下载的版本是目前的最新版本(2019.01.17更新),点击相应的系统的版本即可下载。
    在这里插入图片描述
    安装的过程也很简单,双击安装程序,根据提示点击就可以。
    在这里插入图片描述
    这里可以自定义安装的目录,我安装在了D盘。也可以直接安装默认路径进行安装。
    在这里插入图片描述
    点击安装后,等待一两分钟后就安装好了。
    在这里插入图片描述
    运行程序,出现登陆界面,用手机微信扫一扫,然后在手机端确认。就可以登陆了
    在这里插入图片描述
    在这里插入图片描述
    关于微信开发者工具的使用教程,可以查看微信提供的官方用户手册 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

    AppID的申请

    AppID代表小程序的ID号,必须拥有微信小程序账号才能申请这个ID号。如果没有AppID,小程序就不能在真机上演示(即不能发布到线上给用户使用),只能在微信开发者工具里模拟运行。但是如果你只是想要学习小程序的开发,没有AppID也是可以的,可以通过开发者工具提供的模拟器运行你的小程序
    小程序账号申请网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
    根据页面提示的要求,填入相应的信息。
    在这里插入图片描述
    点击注册之后,微信会发一封确认邮件到你注册的邮箱,你需要进入你注册的邮箱点击确认激活

    在这里插入图片描述
    在这里插入图片描述
    点击链接后,会跳到信息认证界面,在主体类型中选择个人,然后在页面中填好你个人的相关信息。

    在这里插入图片描述
    填好信息,并用微信扫描确认后,就完成了信息认证了。
    在这里插入图片描述
    点击前往小程序,会自动跳转到小程序的管理界面,在开发里的开发设置里就可以看到你的AppID了
    在这里插入图片描述

    展开全文
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 2018-07-22 09:39:47
    一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...

    一、微信小程序web开发工具下载地址

     

    1.1 在微信公众平台-小程序里边去下载开发工具下载地址

    1.2 下载后安装一下就可以使用了:

    二、创建项目

     

    2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:

     

    2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。

     

     

    AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:

     

     

     

    三、开发工具界面介绍:

     

     

     

    1. 编辑:开发的时候,需要到编辑区去写代码 

    2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

    3. 项目:在这里可以上传或者预览项目

    4. 编译:就相当于运行项目的意思

    5. 关闭:关闭当前工程

    6. 微信小程序web开发工具提供实时预览的功能,界面的效果会在这个区域显示

    7. 这个区域可以看到整个项目的文档目录结构

    8. 这个区域是编码区

    9. 这里是选择屏幕尺寸的地方

    10. 模拟网络环境:2G/3G/4G/WiFi

     

     

     

    四、调试区六大工具介绍:

     

    在调试区开发工具提供了6种调试模式:

     

    4.1 Console

    Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。

     

    4.2 Sources

    Sources显示了当前项目的所有脚本文件,微信小程序框架会对这些脚本文件进行编译。

    Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。

     

    4.3 Network

    Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。

     

    4.4 Storage

    官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究

     

    4.5 AppData

    AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。

     

    4.6 Wxml

     

    Wxml调试区:把他的名字换一下的话大家就好理解了,其实他的实质就是HTML+CSS,微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白,左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。

     

     

    转自:http://lib.csdn.NET/article/5/52864?knId=1796#focustext

    展开全文
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 ...
  • 下面来介绍下自己的针对小程序和微信开发者工具的使用心得。 下载地址:开发者工具下载地址 1.下载并安装以后打开,微信号扫码登录登录开发者工具。 如果还没有注册,可以填写无AppID,它会显示部分功能受限,...

    微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。下面来介绍下自己的针对小程序和微信开发者工具的使用心得。

    下载地址:开发者工具下载地址

    1.下载并安装以后打开,需使用微信号扫码登录开发者工具

    登陆新建一个quick start项目


    如果还没有注册,可以填写无AppID,它会显示部分功能受限,实际上并没有太大影响。

    2.添加一个quick start项目


    3.目录结构

    从上图的右侧可以很清晰地看出来一个微信小程序的结构,一个微信小程序的页面包括四个文件:

    a.“.js”后缀的是脚本文件,主要是写一些业务逻辑的代码,基本和JavaScript一样。(在开发过程中发现一些函数JS有而微信没有,毕竟这是微信自己的一套东西)。

    b.“.json”后缀的是配置文件,例如tab的各种属性,实际中每个小页面的使用的并不多,涉及全局配置的app.json使用比较多,app.json中包括定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

    c.“.wxml”后缀的是前端显示页面文件,你也可以把它理解为html页面,规则也和html5很类似,还是那句话,并不是完全一样,有些H5实现的东西wxml并不能实现。

    d.“wxss”后缀的是样式表文件,类似于css。

    以上是每个微信小程序页面的四种基本构成,微信开发者工具会根据这些,编译生成相应的小程序实例。


    展开全文
  • 微信开发者工具调试大法

    万次阅读 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...

    由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟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-05-11 17:28:10
    呐,第一次接触微信的开发,搞vue也搞了好久,页面框架和后台框架和我一点关系都...下面是第一次为了用开发者工具测试需要配置的内容。首先,登录微信公众平台,看到自己的appID,appsecret,如下图:然后在下图中...
  • 1.首先下载web微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2.安装:点击下一步   点击我接受 选择路径 等待程序安装成功就可以了 运行查看程序是否能...
  • 微信公众号之开发者工具

    万次阅读 2020-04-06 16:49:32
    一、前言 这次的项目主要是关于微信...在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署...
  • 微信小程序开发者工具简介

    万次阅读 2018-05-14 10:07:29
    微信团队发布了微信小程序开发者工具微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序。启动工具时,开发者需要使用...
  • 微信开发者工具查看项目存放路径

    千次阅读 2018-02-10 17:30:22
    鼠标点击红色箭头指向的...
  • HbuilderX+微信开发者工具配置

    千次阅读 2019-09-18 15:34:24
    一、首先要在HbuilderX中指定微信开发者工具安装目录 ,工具》设置》运行配置 ,设置路径 ok,就可以在Hbuildx中 control + r 运行 微信小程序端了
  • 微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin
  • 背景:使用微信web开发者工具进行移动调试,按照 配置网络代理后,如图: 当重启微信后,发现公共号上不去了,也不能正常的上网了 可以将服务器地址更改为: 去掉http://后再尝试,就可以了,然后...
  • 下载微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载好后界面如下: 二.在命令行运行项目,npm run dev 三.在上张图片的红框内输入项目URL地址,如:...
  • 微信web开发者工具无法打开的解决方法

    万次阅读 热门讨论 2017-09-09 16:14:28
    安装了之后,除了刚安装完可以自动打开后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨人的小家伙其实解决这个问题很简单,只需要使用你的管理员权限便可轻松打开微信Web开发者工具。 1、第一步,右键...
  • 微信开发者工具黑屏问题解决办法

    千次阅读 2019-12-04 13:43:11
    最近在使用微信开发者工具时出现工具打不开现象,即黑屏情况,无意间发现我的chrome浏览器装的是32位版本的,而开发者工具是64为版本,于是试着将工具降为32位版本,结果ok,再无此现象。 在另一台机器上chrome 64...
  • 微信web开发者工具不能打开的问题

    万次阅读 2018-06-06 22:05:30
    今天新装的微信开发者工具,安装完成以后就是打不开,点解没有反应,win10 64的系统,各种百度,最后找到解决的方案把这些都关闭了就OK了!!!
  • 微信web开发者工具 移动调试

    万次阅读 2018-06-13 10:03:16
    1 下载 微信web开发者工具:https://mp.weixin.qq.com/wiki?t=resource/res_main&...3 打开微信web开发者工具 ,选择如下图PS:我使用了很多手机,小米max ,iphoneX,小米5sp等等。。。没有一个能使用 X5Blin...
  • uni-app启动微信开发者工具

    千次阅读 2020-03-18 14:20:59
    运行uni-app在微信开发者工具
  • 微信开发者工具快捷键

    万次阅读 2017-05-12 17:42:15
    1:首先先说第一个:Ctrl + s 因为我第一次写的时候,一直调试多没有效果,后面才知道没有按Ctrl+s 一定要记住 保存 2:Ctrl+Shift +[ 折叠打开代码块 3:Shift + Alt + f 代码格式化 ...
1 2 3 4 5 ... 20
收藏数 66,829
精华内容 26,731
关键字:

微信开发者工具