微信开发者工具_微信开发者工具怎么测试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。

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


    展开全文
  • 微信公众号之开发者工具

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

    一、前言

       这次的项目主要是关于微信公众号的一个开发,本人这次分配的模块是后台微信公众号的支付和退款,第一次接触微信公众的项目刚开始一脸懵逼,开发过程中遇到各种坑,所以想自己写一篇详细的关于微信公众号的开发,希望能对小伙伴们有所帮助!在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署到正式环境中测试。

    二、使用方法

    进入到在线接口调试工具页面如下图所示:

    详细介绍:

    1.第一步:选择上图的接口类型为基础支持,输入测试账号分配的appid和secret,点击检测可以获取到AccessToken,如下图所示:

    2.第二步,通过第一步中得到的AccessToken,可以进行其他接口的测试,这里以自定义菜单为例测试。复制第一步中得到的AccessToken到自定义菜单对应的AccessToken位置,然后将事先准备好的菜单复制到body文本框中,然后点击检测,返回OK自定义菜单就设置好了,如下图所示:

    3.第三步,查看自定义菜单,在测试账号管理中找测试二维码,用微信二维码扫描关注测试账号就可以看到自定义菜单了,如下图:

    附自定义菜单格式:

    {
        "button": [
            {
                "name": "便民服务", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "个人中心", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appId=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/PersonalInfo&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "预约挂号", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/li_room&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "费用支付", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/Clinic&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "报告查询", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/report&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "咨询互动", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/xie_consultation&response_type=code&scope=snsapi_base#wechat_redirect"
                    }
                ]
            }, 
            {
                "name": "资料下载", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "官方网站", 
                         "url": "http://www.szmbzx.com/"
                    }
                ]
            }
        ]
    }

    三、注意事项

    要想使关注的测试账号能真正的访问到后台,需要在测试管理页面中配置一些参数。

    1.接口信息配置和JS接口安全域名配置

               下图中的域名是使用ngrock代理生成的外网可访问的域名,改域名是免费,但不是很稳定经常容易掉线。

    2.网页授权获取用户基本信息配置

       还是在测试账号管理页面中,往下拉找到网页账号对应的网页授权获取用户基本信息,点击右侧修改,然后数据域名,该域名与第一条中涉及到域名相同,如下图:

     

    有兴趣的朋友可以关注下本人的微信公众号:“JAVA菜鸟程序猿”

     

     

     

    展开全文
  • 微信开发者工具测试配置

    千次阅读 2018-05-11 17:28:10
    呐,第一次接触微信的开发,搞vue也搞了好久,页面框架和后台框架和我一点关系都...下面是第一次为了用开发者工具测试需要配置的内容。首先,登录微信公众平台,看到自己的appID,appsecret,如下图:然后在下图中...
  • 微信开发者工具调试大法

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

    万次阅读 2018-05-14 10:07:29
    微信团队发布了微信小程序开发者工具微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序。启动工具时,开发者需要使用...
  • 1.首先下载web微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2.安装:点击下一步   点击我接受 选择路径 等待程序安装成功就可以了 运行查看程序是否能...
  • 微信开发者工具使用bug

    千次阅读 2018-10-22 21:19:04
    之前下载了微信开发者工具,最近一直提示下载更新。因为嫌麻烦,就没有更新。结果今天微信开发者工具竟然打不开了!好吧!以后还是经常更新比较好!  遇到了微信开发者工具打不开的问题,就重新下载了最新版的微信...
  • 微信开发者工具添加插件步骤: 获取插件文件 在vsCode并安装你需要移植的插件 找到vsCode相关插件的安装文件夹: 操作系统 安装路径 windows %USERPROFILE%.vscode\extensions macOS ~/.vscode/extensions Linux ~/...
  • 微信开发者工具清除https状态 ...说是清理微信开发者工具的资源库可以解决,这个方法虽然解决了,但是很无奈,我的所有记录都被清除了 于是乎,我就在资源库中一个个文件夹开始测试,终于找到了源头 删除这个目...
  • 使用微信开发者工具代码提示方法

    千次阅读 2020-06-21 12:27:37
    在使用 微信开发者工具 时,我经常会碰到忘记标签名称,这时候我都会用 代码提示 的快捷键,问题来了,微信开发者工具 的 代码提示 快捷键是 Ctrl+空格,即使按下 Ctrl+空格也没有提示,反而输入法切换了 中/英文。...
  • 问题:HbuildX编译后启动微信开发者工具失败问题 说明,本问题是在macPro电脑上产生的,Windows电脑可能不是这样的解决方法 1,macPro电脑打开失败原因是因为微信开发者工具中“服务端口”是关闭状态 2,因为使用的...
  • 首先这个问题是微信开发者工具代理的使用问题,我们要着手通过修改代理配置进行修改,其他网络教程列如修改注册表,重新安装系统、还有修改微信开发者工具配置文件的教程都是乱用药,大家千万不要尝试。 解决方法: ...
  • 因为是别的小伙伴的项目,所以,要换一个appID,可以换成自己的,HbuilderX运行在微信开发者工具,打不开,只会跳转到导入项目界面,不会打开这个项目,报错: 解决方法: 然后,关闭微信开发者工具,在...
  • 微信开发者工具集成git,实现多人协调开发,下面就拿GitHub举例,一一说明。 一、在GitHub创建远程仓库。这里忽略,网上很多。 二、在微信开发者工具中配置Git,并实现文件上传。 1.点击开发者工具右上角的...
  • 在HBuilder X中已经安装uni-app插件的情况下,运行其自带范例的微信小程序时,在调用完微信开发者工具后,卡在初始化应用通信能力界面就木有然后了~ 解决方法: 1、将HBuilder X更换成稳定版/APP开发版 2、重新下载...
  • 就在2019年10月6日下午,我安装了微信开发者工具,初次安装可以正常使用,但我这个人脑缺,用于主要用于开发微信小程序,我打开了公众号网页的制作,之后不知道怎么返回首页,就卸载了,对,卸载了。。。本来想卸载...
  • 假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试. 假设我的web应用的访问入口是如下公众号菜单的"预约"按钮: 那么为了能够在微信开发者工具里调试,...
1 2 3 4 5 ... 20
收藏数 66,285
精华内容 26,514
关键字:

微信开发者工具