微信自成一个生态，微信开发者工具让用户能够自行设计自己的小程序界面、添加各种需要的功能，软件相对比较容易上手，可以与公众号对接，提升流量。
功能介绍
菜单栏
微信web开发者工具
切换帐号：快速切换登录用户
关于：关于开发者工具
检查更新：检查版本更新
开发者论坛：前往开发者论坛
开发者文档：前往开发者文档
调试：调试开发者工具、调试编辑器；如果遇到疑似开发者工具或者编辑器的 bug，可以打开调试工具查看是否有出错日志，欢迎在论坛上反馈相关问题
更换开发模式：快速切换公众号网页调试和小程序调试
退出：退出开发者工具
项目
新建项目：快速新建项目
打开最近：可以查看最近打开的项目列表，并选择是否进入对应项目
查看所有项目：新窗口打开启动页的项目列表页
关闭当前项目：关闭当前项目，回到启动页的项目列表页
文件
新建文件
保存
保存所有
关闭文件
编辑：可以查看编辑相关的操作和快捷键
工具
编译：编译当前小程序项目
刷新：与编译的功能一致，由于历史原因保留对应的快捷键 ctrl(?) + R
编译配置：可以选择普通编译或自定义编译条件
前后台切换：模拟客户端小程序进入后台运行和返回前台的操作
清除缓存：清除文件缓存、数据缓存、以及授权数据
界面：控制主界面窗口模块的显示与隐藏
设置：
外观设置：控制编辑器的配色主题、字体、字号、行距
编辑设置：控制文件保存的行为，编辑器的表现
通知设置：设置是否接受某种类型的通知
工具栏
点击用户头像可以打开个人中心，在这里可以便捷的切换用户和查看开发者工具收到的消息。
用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。
工具栏中间，可以选择普通编译，也可以新建并选择自定义条件进行编译和预览。
通过切后台按钮，可以模拟小程序进入后台的情况
工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据，方便开发者调试。
工具栏右侧是开发辅助功能的区域，在这里可以上传代码、版本管理、查看项目详情
工具栏管理
在工具栏上点击鼠标右键，可以打开工具栏管理
模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。
开发者可以选择不同的设备，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。
在模拟器底部的状态栏，可以直观地看到当前运行小程序的场景值，页面路径及页面参数
独立窗口
点击 模拟器/调试器 右上角的按钮可以使用独立窗口显示 模拟器/调试器
软件特色
1、调试：通过使用微信web开发者工具，从此开发者可以直接在 PC上进行调试了。
2、模拟JSSDK权限校验：可以模拟 JSSDK 在微信客户端中的请求，并直观地看到鉴权结果和 log。
3、移动调试：基于 weinre 的，并且做了一些改进，让开发者无须手工在页面中加入 weinre 调试脚本，还可以在 weinre
的网络请求页卡中，看到完整的 http 请求 log，非局限于 ajax 请求。
4、Chrome DevTools：集成了 Chrome DevTools，同之前在 PC 上的调试体验一致，可以快速上手。
使用方法
一、下载安装微信开发者工具并打开软件。
二、打开软件后使用微信扫描登录。
三、按照自己的需求可以在小程序、小游戏点击新建或者导入项目制作新的程序。
四、选择公众号网页功能可以对公众号进行WEB进行功能调试。
小编点评
微信开发者工具拥有丰富的编译工具，用户可以方便地在开发进程和显示效果间切换，每一个开发项目都能获得独立窗口，你还能实时模拟用户的使用体验，精致打磨自己的产品。
以上就是微信开发者工具 v1.03.2010240免费版的全部内容了，IE浏览器中文网站为您提供最新最实用的软件！

微信小程序概述
小程序介绍
微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App
小程序优势

微信有海量用户，依赖性很强，微信开发的产品更容易触达用户
推广app或公众号成本太高
开发适配成本低
容易小规模试错，快速迭代
跨平台

对于创业者的优势

App流量成本太高
移动互联网格局基本已定，用户主要需求场景已被巨头把持
面向所有产品对用户时间的竞争


开发环境的准备
注册过程简单，略过
下载微信开发者工具
前往官网进行下载，或者[点我](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)！！！
下载后新建项目，进去之后的界面是这样子的：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4j4ivAZg-1572602410230)(https://i.loli.net/2019/11/01/rHAebtnaYEQmoRu.png)]

小程序的结构目录
小程序框架的目标是尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
小程序框架提供了自己的视图层描述语言WXML和WXSS，以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑
小程序文件结构和传统Web对比




结构
传统Web
微信小程序




结构
HTML
WXML


样式
CSS
WXSS


逻辑
JavaScript
JavaScript


配置
无
JSON


通过以上对比得出，传统Web是三层结构。而微信小程序是四层结构，多了一层配置.json
基本的项目目录
话不多说，先看下图：

这个图已经解释的非常明了了，下面对各个文件进行详细的介绍。

配置文件的介绍
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和页面自己的page.json

特别注意：配置文件中不能出现注释

全局配置app.json
app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。在我们最开始创建的项目里，app.json大概是这样的：
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

下面是app.json的一些属性：
pages属性
pages属性包含了小程序的所有目录，例如在最开始的代码中：
 "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],

这里面包含了两个页面，一个是index页面，一个是logs（日志）页面，如果我们想增加新的页面，只需要在这个属性里面添加一个路径就好了，文件目录也会帮助我们自动生成一个页面；例如，新增一个index2页面，在代码中添加：
"pages/index2/index2",

整个pages属性是这样的：
  "pages": [
    "pages/index/index",
    "pages/index2/index2",
    "pages/logs/logs"
  ],

我们点击保存ctrl + s，就会发现目录栏中多了一个文件夹，如下图所示：


哪个页面放在pages最上面，哪个就会先显示出来

比如，我们把logs页面放在最上面，即
 "pages": [
   "pages/logs/logs",
   "pages/index/index",
   "pages/index2/index2"
 ],

点击保存后，会发现，日志页面出现了最上面，这里不再贴图，读者自己动手实践！！！

window属性
用于设置小程序的状态栏、导航条、标题、窗口背景色。在最开始的代码中：
 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

最开始的window属性包含了backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle，下表展示了window的所有属性:




属性
类型
默认值
描述




navigationBarBackgroundColor
HexColor
#000000
导航栏背景颜色


navigationBarTextStyle
string
white
导航栏标题颜色，仅支持 black / white


navigationBarTitleText
string

导航栏标题文字内容


navigationStyle
string
default
导航栏样式，仅支持以下值：default 默认样式、custom 自定义导航栏，只保留右上角胶囊按钮


backgroundColor
HexColor
#ffffff
窗口的背景色


backgroundTextStyle
string
dark
下拉 loading 的样式，仅支持 dark / light


backgroundColorTop
string
#ffffff
顶部窗口的背景色，仅 iOS 支持


backgroundColorBottom
string
#ffffff
底部窗口的背景色，仅 iOS 支持


enablePullDownRefresh
boolean
false
是否开启全局的下拉刷新


onReachBottomDistance
number
50
页面上拉触底事件触发时距页面底部距离，单位为 px


pageOrientation
string
portrait
屏幕旋转设置，支持 auto / portrait / landscape


下面是对window属性的几个属性的调用演示：

例如，把导航栏标题颜色改为蓝色，把标题改为你妈喊你回家吃饭啦，顺便把导航栏标题颜色改为白色，然后加一个下拉刷新功能，只需要在window里面加几个属性就可以了~~

  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#4e91f6",
    "navigationBarTitleText": "你妈喊你回家吃饭啦",
    "enablePullDownRefresh": true,
    "navigationBarTextStyle": "white"
  },

代码已经写好，来看一下效果好了，下面是一张gif图：

tabBar属性
如果小程序是一个多tab应用（底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。下表是tab的属性：




属性
类型
必填
默认值
描述




color
HexColor
是

tab 上的文字默认颜色，仅支持十六进制颜色


selectedColor
HexColor
是

tab 上的文字选中时的颜色，仅支持十六进制颜色


backgroundColor
HexColor
是

tab 的背景色，仅支持十六进制颜色


borderStyle
string
否
black
tabbar 上边框的颜色， 仅支持 black / white


list
Array
是

tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab


position
string
否
bottom
tabBar 的位置，仅支持 bottom / top


custom
boolean
否
false
自定义 tabBar


其中list接受一个数组，只能配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个对象，下表是list的属性值：




属性
类型
必填
说明




pagePath
string
是
页面路径，必须在 pages 中先定义


text
string
是
tab 上按钮文字


iconPath
string
否
图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon


selectedIconPath
string
否
同上


下面通过一个样例演示一下tab的作用：

这次我想加一个底部栏，栏目里面有首页和日志两个选项，并且底部栏和导航栏的颜色一致，并且要有四个图标，其中两个作为未被选中时的的图标，另外两个作为被选中时的图标。这里给大家推荐一个网站：https://www.easyicon.net/ 这个网站上有大量icon图标哟~

"tabBar": {
    "color": "#000",
    "selectedColor": "#000000",
    "backgroundColor": "#4e91f6",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/index.png",
        "selectedIconPath": "icon/Selindex.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "icon/log.png",
        "selectedIconPath": "icon/Sellog.png"
      }
    ]
  }

效果请见下方gif图：

选的icon略丑，请忽略我的审美…………

 

资源中心包

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419319164&token=&lang=zh_CN

 

微信开发者工具下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

文档网址：https://developers.weixin.qq.com/miniprogram/dev/framework/
一、下载安装微信开发者工具
1、百度搜索 “微信小程序”

2、找到微信开放文档

3、开始下载






根据自己电脑的配置自行下载就可以，这里我们选择的是windows 64版本。

点击之后会在浏览器左下角自行下载。
4、安装
直接安装即可




二、项目的创建
1、申请APPID
打开微信开发者工具，在小程序选项中点击加号创建项目


AppID需要申请注册，点击注册进入注册页面

根据注册引导完成注册即可

这里注意，注册AppID使用的邮箱不能是已经注册过微信公众号的，不然会注册失败



搜索 “微信公众平台”



使用刚注册的账号登录，在首页点击开发设置





将自己的AppID码复制在输入框即可



最后点击新建，项目创建完成



以上是本篇内容，希望可以帮到你 ~