微信开发者工具介绍

为了帮助开发者简单和高效地开发和调试微信小程序，微信官方在原有的公众号网页调试工具的基础上，推出了全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

  • 使用公众号网页调试，开发者可以调试微信网页授权和微信JS-SDK
  • 使用小程序调试，开发者可以完成小程序的API和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

在微信开发平台可以直接下载，点击进入下载任意版本即可。使用安装包进行安装，一直点下一步即可（需要更换安装目录可自行配置）

启动页

登录页

在登录页，可以使用微信扫码登录开发者工具，开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。

项目列表

登录成功后，会看到已经存在的项目列表和代码片段列表，在项目列表可以选择公众号网页调试，进入到公众号网页调试模式

新建项目

当符合以下条件时，可以在本地创建一个小程序项目：

  1. 需要一个小程序的AppID；如没有AppID，可以选择申请使用测试号；
  2. 登录的微信号需要是该AppID的开发者；
  3. 需要选择一个空目录，或者选择的非空目录下存在app.json或者project.config.json。当选择空目录时，可以选择是否在该目录下生成一个简单的项目。

主界面

开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、目录树、编辑区、调试器六大部分。

菜单栏

  1. 项目

    新建项目：快速新建项目

    打开最近：可以查看最近打开的项目列表，并选择是否进入对应项目

    查看所有项目：新窗口打开启动页的项目列表页

    关闭当前项目：关闭当前项目，回到启动页的项目列表页

  2. 文件

    新建文件

    保存

    保存所有

    关闭文件

  3. 编辑：可以查看编辑相关的操作和快捷键

  4. 工具

    编译：编译当前小程序项目

    刷新：与编译的功能一致，由于历史原因保留对应的快捷键ctrl+R

    编译配置：可以选择普通编译或自定义编译条件

    前后台切换：模拟客户端小程序进入后台运行和返回前台的操作

    清除缓存：清除文件缓存、数据缓存、以及授权数据

  5. 界面：控制主界面窗口模块的显示与隐藏

  6. 设置

    外观设置：控制编辑器的配色主题、字体、字号、行距

    编辑设置：控制文件保存的行为，编辑器的表现

    代理设置：选择直连网络、系统代理和手动设置代理

    通知设置：设置是否接受某种类型的通知

工具栏

工具栏中间，可以选择普通编译，也可以新建并选择自定义条件进行编译和预览；通过切后台按钮，可以模拟小程序进入后台的情况；工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据，方便开发者调试。

工具栏右侧是开发辅助功能的区域，在这里可以上传代码、版本管理、查看项目详情，如上图所示。

模拟器

模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。开发者可以选择不同的设备，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

你的第一个小程序

新建项目

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的AppID，给你的项目起一个好听的名字，勾选”不使用云服务”（注意:你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。

小程序代码构成

我们通过开发者工具快速创建了一个QuickStart项目。你可以留意到这个项目里边生成了不同类型的文件:

  • .json后缀的JSON配置文件
  • .wxml后缀的WXML模板文件
  • .wxss后缀的WXSS样式文件
  • .js后缀的JS脚本逻辑文件

JSON配置

JSON是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

我们可以看到在项目的根目录有一个app.json和project.config.json，此外在pages/logs目录下还有一个logs.json，我们依次来说明一下它们的用途。

  1. 小程序配置app.jsonapp.json

    小程序配置app.jsonapp.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。QuickStart项目里边的app.json配置内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
    ],
    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor":"#fff",
    "navigationBarTitleText":"Weixin",
    "navigationBarTextStyle":"black"
    }

  2. 工具配置project.config.json

    通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

    考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

  3. 页面配置page.json

    这里的page.json其实用来表示pages/logs目录下的logs.json这类和小程序页面相关的配置。

    如果你整个小程序的风格是蓝色调，那么你可以在app.json里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

WXML 模板

从事过网页编程的人知道，网页编程采用的是HTML+CSS+JS这样的组合，其中HTML是用来描述当前这个页面的结构，CSS用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中WXML充当的就是类似HTML的角色。打开pages/index/index.wxml，你会看到以下的内容:

1
2
3
4
5
6
7
8
9
10
11
12
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

和HTML非常相似，WXML由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

（1）标签名字有点不一样往往写 HTML 的时候，经常会用到的标签是div，p，span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。从上边的例子可以看到，小程序的WXML用的标签是view，button，text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

（2）多了一些wx:if这样的属性以及{{ }}这样的表达式在网页的一般开发流程中，我们通常会通过JS操作DOM（对应HTML的描述产生的树），以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS会记录一些状态到JS变量里边，同时通过DOM API操控DOM的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了MVVM的开发模式（例如React，Vue），提倡把渲染和逻辑分离。简单来说就是不要再让JS直接操控DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。小程序的框架也是用到了这个思路，如果你需要把一个Hello World字符串显示在界面上。WXML是这么写:{{msg}}JS只需要管理状态即可:this.setData({msg:"Hello World"})通过{{ }}的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要if/else，for等控制能力，在小程序里边，这些控制能力都用wx:开头的属性来表达。

WXSS 样式

WXSS具有CSS大部分的特性，小程序在WXSS也做了一些扩充和修改。

  1. 新增了尺寸单位

    在写CSS样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位rpx，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

  2. 提供了全局的样式和局部样式

    和前边app.json，page.json的概念相同，你可以写一个app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式page.wxss仅对当前页面生效。

  3. 此外WXSS仅支持部分CSS选择器

JS 逻辑交互

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写JS脚本文件来处理用户的操作。