微信小程序（1）：开发者工具和小程序代码构成

一时失言乱红尘 2022-12-30 13:48 191阅读 0赞

### 文章目录 ###

*   *   *  一、下载安装微信开发者工具
         *   *   *  1、如下图所示，这里我下载的是 window64
                 *  2、下载好后，点击下一步，最终安装成功。运行开发者工具，微信扫码后，界面如下：
                 *  3、点击“+”号，创建小程序，输入项目名。选择地址，选用测试号，点击新建
                 *  4、界面如下
                 *  5、在下图所示处右键，点击在资源管理器中显示，可以打开该文件夹所在位置。
         *  二、小程序代码构成
         *   *  1、 .json 后缀的 JSON 配置文件
             *   *   *  小程序配置 app.json
                     *  工具配置 project.config.json
                     *  页面配置 page.json
                     *  JSON 语法
             *  2、 .wxml 后缀的 WXML 模板文件
             *  3、 .wxss 后缀的 WXSS 样式文件
             *  4、 .js 后缀的 JS 脚本逻辑文件

### 一、下载安装微信开发者工具 ###

##### 1、如下图所示，这里我下载的是 window64 #####

**网址是：[微信开发者工具下载网址][Link 1]**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

##### 2、下载好后，点击下一步，最终安装成功。运行开发者工具，微信扫码后，界面如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

##### 3、点击“+”号，创建小程序，输入项目名。选择地址，选用测试号，点击新建 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

##### 4、界面如下 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

##### 5、在下图所示处右键，点击在资源管理器中显示，可以打开该文件夹所在位置。 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]

### 二、小程序代码构成 ###

**下图为我们上述新建小程序生成的文件：**  
![在这里插入图片描述][20201226084612151.png]  
**这个项目里边生成了不同类型的文件:**

#### 1、 .json 后缀的 JSON 配置文件 ####

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json.在 pages/index目录下还有一个 index.json

###### 小程序配置 app.json ######

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 5]

*  pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
 *  window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
 *  其他配置项细节可以参考文档 [小程序的配置 app.json][app.json]

###### 工具配置 project.config.json ######

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

其他配置项细节可以参考文档 [开发者工具的配置][Link 2]

###### 页面配置 page.json ######

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

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

其他配置项细节可以参考文档 [页面配置][Link 3]

###### JSON 语法 ######

JSON文件都是被包裹在一个大括号中 \{\}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

*  数字，包含浮点数和整数
 *  字符串，需要包裹在双引号中
 *  Bool值，true 或者 false
 *  数组，需要包裹在方括号中 \[\]
 *  对象，需要包裹在大括号中 \{\}
 *  Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

#### 2、 .wxml 后缀的 WXML 模板文件 ####

WXML 充当的是类似 HTML 的角色，由标签、属性等等构成。 与html的不同：

*  用的标签是 view, button, text 等等，这些标签是小程序给开发者包装好的基本能力，小程序还提供了地图、视频、音频等等组件能力。
 *  多了一些 wx:if 这样的属性以及 \{ \{ \}\} 这样的表达式
 *  更详细的文档可以参考 [WXML][]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 6]

#### 3、 .wxss 后缀的 WXSS 样式文件 ####

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

*  新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
 *  提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
 *  WXSS 仅支持部分 CSS 选择器
 *  更详细的文档可以参考 [WXSS][]

#### 4、 .js 后缀的 JS 脚本逻辑文件 ####

*  一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
 *  详细的事件可以参考文档 [WXML - 事件][WXML -]
 *  还可以在 JS 中调用小程序提供的丰富的 API

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221120/c179b2e82ad849f3ba4738824507dfd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221120/209e6e0ecfe54817a9ba2f2b7383a381.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: /images/20221120/154d41a7702d4aab8c3eb1049ca008cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/202012260819390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201226082318749.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20201226084612151.png]: https://img-blog.csdnimg.cn/20201226084612151.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201226085225414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[app.json]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
[WXML]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201226090608334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[WXSS]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
[WXML -]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html