微信小程序从入门到飞起（环境搭建、配置）

我会带着你远行 2022-12-05 13:50 143阅读 0赞

**目录**

一、什么是微信小程序

二、官方微信小程序体验

三、环境搭建

3.1.注册账号

3.2.下载开发工具

3.3.创建工程

四、话不多说，开始

4.1.开发工具还是很简洁方便的

4.2.微信小程序的文件名称

4.3.基本项目目录

4.4.小程序的配置文件

4.4.1.全局的app.json

4.4.2.页面的page.json

--------------------

# 一、什么是微信小程序 #

官网：[https://developers.weixin.qq.com/miniprogram/dev/framework/][https_developers.weixin.qq.com_miniprogram_dev_framework]

相信没人会不知道什么是微信小程序吧（略）

![20200910170703503.png][]

# 二、官方微信小程序体验 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70][]

# 三、环境搭建 #

## 3.1.注册账号 ##

点击 [https://mp.weixin.qq.com/wxopen/waregister?action=step1][https_mp.weixin.qq.com_wxopen_waregister_action_step1] 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

注意：一个邮箱只能注册一次，而且时间久了就会被禁用，而且找不回。（我就是时间久了给我禁用了，无奈之下换了个新的邮箱注册）

（注意：不注册的话也是可以用的，开发试用有一些限制）

## 3.2.下载开发工具 ##

微信提供免费的小程序开发工具，下载链接如下：

[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]

第一次打开开发工具，需要微信扫码登录。

## 3.3.创建工程 ##

在这里输入appID，如果没有也可以试用，但是试用的话会有一些限制。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 1][]

如果在开发过程中想要修改appId，可以在这里修改：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 2][]

# 四、话不多说，开始 #

## 4.1.开发工具还是很简洁方便的 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 3][]

## 4.2.微信小程序的文件名称 ##

微信小程序同普通的web开发大同小异，其文件名也不是html、css，而是WXML、WXSS，具体配置是用json进行配置的。

具体差异如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 4][]

## 4.3.基本项目目录 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 5][]

## 4.4.小程序的配置文件 ##

一个小程序会包括两种配置文件，一种是全局的app.json，和页面自己的page.json。

注意：**配置文件中不允许出现注释！**

### 4.4.1.全局的app.json ###

app.json是当前小程序的全局配置，包括了页面路径、界面的表现形式、底部tab、网络超时时间、是否开启debug模式。

其中pages的第一个页面，就是小程序的首页。

具体如下（不能写注释哦）：

官网：[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]

{
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true
    }

### 4.4.2.页面的page.json ###

除了全局的app.json配置外，还可以用.json文件对小程序项目中的每一个页面进行配置，但只能设置本页面的window配置项的内容，页面.json文件中的window配置值将覆盖app.json中的配置值。

具体配置示例如下：

官网： [https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]

{
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }

[https_developers.weixin.qq.com_miniprogram_dev_framework]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[20200910170703503.png]: /images/20221123/35755d4b48704084b2908736e5408b5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70]: /images/20221123/c211d52c9ba44c998eb6f2196ca5f2fa.png
[https_mp.weixin.qq.com_wxopen_waregister_action_step1]: https://mp.weixin.qq.com/wxopen/waregister?action=step1
[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 1]: /images/20221123/de7d8c77590c48c7bca421ae4b0031dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 2]: /images/20221123/3983627b9227410b9ff687f286d755c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 3]: /images/20221123/c27ab44bd615404d9046190124644abd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 4]: /images/20221123/504f2823e09a46bda62549d0d82ac3a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 5]: /images/20221123/ccf1ae4f89934df6846586c7dac2c441.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html