零基础微信小程序开发——从注册到安装、分析小程序代码结构（保姆级教程+超详细）

上一期我们介绍了什么是小程序，小程序的概念，小程序的发展历程，小程序的核心和开发流程，以及小程序开发跟普通网页开发的区别，更是体验了一下小程序的页面，接下来我们开始制作小程序

注册小程序账号

第一步：

使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角的“立即注册”即可进入到小程序开发账号的注册流程

第二步：

开始选择要注册账号的类型，这里我们选择小程序

第三步：

开始填写邮箱、密码

第四步：

进入邮箱激活

第五步：

进行主体信息登记，主体类型选择个人，然后填写身份证等信息

第六步：

注册小程序开发者账号，这个APPID在创建小程序项目的时候需要用到

安装开发者工具

首先来介绍一下开发者工具，小程序开发者工具是微信官方提供的一款用于开发和调试小程序的实用工具。它支持Windows和Mac两种操作系统，使得开发者能够高效地开发和调试小程序。下面我们来看看它都有哪些功能

功能

1. 编辑器：
   • 提供了一个可视化的编辑器，用于编写小程序的代码。
   • 编辑器支持语法高亮、代码提示、代码格式化等常见功能，帮助开发者提高编写代码的效率。
2. 调试器：
   • 提供一个调试器，用于调试小程序的代码。
   • 调试器支持断点调试、观察变量值、执行代码片段等常见功能，帮助开发者快速定位和解决代码中的问题。
3. 预览器：
   • 提供一个预览器，用于预览小程序的运行效果。
   • 预览器支持移动端和桌面端两种模式，并支持实时预览，使得开发者可以在不同的设备上查看小程序的运行效果。
4. 小程序模拟器：
   • 提供一个小程序模拟器，用于模拟小程序的运行环境。
   • 小程序模拟器支持模拟手机端和电脑端两种环境，并支持模拟多种常见场景，帮助开发者在不同的条件下测试小程序。
5. 上传和发布：
   • 提供一个上传和发布功能，用于将开发好的小程序上传到微信公众平台，并发布到小程序市场。
   • 开发者可以在微信公众平台中提交审核，在审核通过后发布小程序到市场。
6. API文档：
   • 提供完整的API文档，用于查看小程序支持的API列表和使用方法。
   • 开发者可以在API文档中查看如wx.request等API的使用方法，帮助开发者更好地利用小程序的API实现功能。

小程序开发者工具

1. 技术栈：
   • 小程序开发使用的技术栈主要包括WXML、WXSS、JavaScript和API等。
   • WXML是一种类XML的组件化语言，用于描述界面结构。
   • WXSS是一种类CSS的样式语言，用于描述界面的样式。
   • JavaScript是小程序的主要编程语言，用于实现页面的交互效果和业务逻辑。
   • API包括各种系统API和第三方API，如网络API、文件API、地图API等。
2. 项目初始化：
   • 在开发工具中创建并初始化小程序项目。
   • 开发者需要注册成为微信开发者，并创建一个小程序项目。
3. 界面设计：
   • 使用WXML和WXSS完成小程序的页面设计和样式制定。
   • 开发者可以使用这些技术来构建小程序的界面布局和样式。
4. 数据绑定与事件绑定：
   • 使用JavaScript对数据进行绑定，并实现界面交互效果。
   • 使用JavaScript为控件绑定各种事件，实现页面响应和业务逻辑。
   • 数据绑定可以使用wx:for和{{}}实现，事件绑定可以使用bind和catch属性实现。
5. API调用：
   • 使用系统API和第三方API实现小程序的具体功能和服务。
   • 开发者可以在API文档中查看API的使用方法，并在代码中调用这些API来实现功能。
6. 调试与测试：
   • 开发者需要使用开发者工具中的调试器来调试代码，并使用预览器和模拟器来测试小程序的运行效果。
   • 调试和测试是开发过程中不可或缺的一部分，有助于开发者快速定位和解决代码中的问题。
7. 发布与上线：
   • 开发者需要在开发者工具中使用上传和发布功能将小程序上传到微信公众平台，并发布到小程序市场。
   • 在发布前，开发者需要对小程序进行充分的测试，以确保其稳定性和可用性。

说了这么多，都等不及了吧！我们现在就开始安装吧！

安装

第一步：

下载开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 访问该连接进行下载，根据自己本地的版本进行下载

因为我自己的MAC，关于Windows的安装，我直接放到下面

第二步：

下载完毕之后开发安装

第三步：

扫码进行登录，使用绑定的手机号对应的微信号扫码

然后在微信上点击登录

第四步：

设置外观和代理

第五步：

创建一个小程序项目

点击预览可以在真机上查看效果

第六步：

开发者工具的组成部分

项目架构

1. pages：这个目录通常用于存放小程序的所有页面文件。每个页面通常会包含一个.wxml文件（页面的结构），一个.wxss文件（页面的样式），一个.js文件（页面的逻辑），以及一个.json文件（页面的配置）。虽然图片中并未明确列出这些文件的后缀，但pages目录的存在暗示了这一用途。
2. utils：这个目录通常用于存放小程序中可复用的工具函数或模块。这些工具函数可能是处理数据的、进行网络请求的、或是进行其他通用操作的。utils目录下的app.js可能是一个包含了全局功能或配置的文件，但由于图片信息有限，具体作用需进一步查看文件内容。
3. app.js：小程序项目的入口文件。
4. app.json：这是小程序的全局配置文件，用于定义小程序的生命周期函数、全局变量、页面路径等。它是小程序启动和运行时不可或缺的文件。
5. app.wxss：这是小程序的全局样式文件，用于定义小程序的通用样式。通过在该文件中编写CSS样式，可以对小程序中的页面和组件进行全局的样式设置。
6. project.config.json：这是小程序开发项目的配置文件，用于定义项目的构建配置、编译选项等。它是开发者在进行项目开发时需要频繁修改的文件之一。
7. sitemap.json：这个文件用于配置小程序可被抓取的页面路径，从而支持搜索引擎对小程序的搜索。它允许开发者指定哪些页面是可以被搜索引擎索引的，哪些页面是不希望被索引的。

小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在。

• .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
• .json 文件（当前页面的配置文件，配置窗口的外观、表现等）
• .wxml 文件（页面的模板结构文件）
• .wxss 文件（当前页面的样式表文件）

JSON配置文件

JSON 配置文件都有哪些

JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中也不例外：通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。

每个JSON配置文件都有其特定的作用，它们共同构成了小程序运行的配置环境。通过合理配置这些文件，开发者可以确保小程序在不同环境下都能正确运行，并呈现出最佳的用户体验。

aap.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。 让我们来看下app.json文件中的配置都有哪些

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "style": "v2",
  "renderer": "skyline",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "defaultContentBox": true,
      "tagNameStyleIsolation": "legacy",
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

1. pages：
   • 这是一个数组，定义了小程序的所有页面路径。
   • 定义了一个页面，即pages/index/index。这意味着小程序启动时，默认会加载并显示这个页面。
2. window：
   • 定义了小程序窗口的一些表现。
   • navigationBarTextStyle：设置导航栏标题文字的颜色为黑色。
   • navigationStyle：设置为custom，表示导航栏的样式是自定义的。这允许开发者在导航栏上放置自定义的组件或内容。
3. style：
   • 设置为v2，这通常与小程序的开发框架版本或样式系统有关。不同的style值可能会引入不同的样式处理机制或优化。
4. renderer：
   • 指定小程序使用的渲染器为skyline。渲染器是小程序用于渲染页面的组件或框架。
   • skyline是微信小程序提供的一种渲染引擎，它支持更高效的页面渲染和组件化开发。
5. rendererOptions：
   • 这是一个对象，为skyline渲染器提供了额外的配置选项。
   • defaultDisplayBlock、defaultContentBox等配置项可能用于控制组件的默认显示方式、内容盒子模型等。
   • tagNameStyleIsolation：设置为legacy，可能表示在样式隔离方面采用了一种传统的处理方式。
   • disableABTest：设置为true，表示禁用A/B测试功能。
   • sdkVersionBegin和sdkVersionEnd：定义了这些渲染选项适用的SDK版本范围。
6. componentFramework：
   • 设置为glass-easel，这可能是一个特定的组件框架或开发库，用于构建小程序中的组件。
   • 不同的componentFramework值可能会引入不同的组件开发模式或工具链。
7. sitemapLocation：
   • 指定了小程序搜索配置文件sitemap.json的位置。
   • sitemap.json用于配置哪些页面可以被微信索引，哪些页面需要被禁止索引。
8. lazyCodeLoading：
   • 设置为requiredComponents，表示小程序将采用按需加载代码的策略。
   • 在这种情况下，小程序只会加载那些被明确标记为必需组件的代码，这有助于减少初始加载时间和提高性能。

project.config.json

project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

{
    "appid": "wxdcxxxxxx",
    "compileType": "miniprogram",
    "libVersion": "3.7.0",
    "packOptions": {
        "ignore": [],
        "include": []
    },
    "setting": {
        "coverView": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "enhance": true,
        "showShadowRootInWxmlPanel": true,
        "packNpmRelationList": [],
        "babelSetting": {
            "ignore": [],
            "disablePlugins": [],
            "outputPath": ""
        }
    },
    "condition": {},
    "editorSetting": {
        "tabIndent": "insertSpaces",
        "tabSize": 4
    }
}

1. appid：
   • 这是小程序的唯一标识符，用于在微信开发者工具中识别和关联特定的小程序项目。
2. compileType：
   • 设置为miniprogram，表示该项目是一个小程序项目。这个字段用于指定项目的编译类型。
3. libVersion：
   • 指定了小程序基础库的版本号为3.7.0。基础库是小程序运行时的环境，包含了小程序运行所需的API和组件。
4. packOptions：
   • 这是一个对象，用于配置打包时的选项。
   • ignore和include数组分别用于指定在打包过程中需要忽略或包含的文件和目录。在这个例子中，它们都是空的，表示没有特定的忽略或包含规则。
5. setting：
   • 包含了多个配置项，用于定制编译和构建过程。
   • coverView：设置为true，表示启用cover-view组件，该组件用于在原生组件上覆盖视图。
   • es6：设置为true，表示启用ES6语法支持。
   • postcss：设置为true，表示启用PostCSS处理CSS代码。
   • minified：设置为true，表示在构建过程中对代码进行压缩。
   • enhance：设置为true，可能表示启用一些增强的编译特性或优化。
   • showShadowRootInWxmlPanel：设置为true，表示在WXML面板中显示Shadow Root（阴影根节点），这有助于开发者理解和调试组件的DOM结构。
   • packNpmRelationList：用于指定需要打包的npm依赖关系列表。在这个例子中，它是空的，表示没有特定的npm依赖需要打包。
   • babelSetting：用于配置Babel编译器的选项。在这个例子中，ignore、disablePlugins和outputPath都是空的或未指定。
6. condition：
   • 这是一个空对象，通常用于指定编译条件，如平台特定代码或自定义编译条件。在这个例子中，没有定义任何编译条件。
7. editorSetting：
   • 包含了编辑器相关的设置。
   • tabIndent：设置为insertSpaces，表示在编辑器中使用空格进行缩进。
   • tabSize：设置为4，表示每个缩进级别使用4个空格。

sitemap.json

微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。 当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

{
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    "rules": [{
    "action": "allow",
    "page": "*"
    }]
}

注意：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false

页面的 .json 配置文件

小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 的 window 中相同的配置项。例如：

新建小程序页面

只需要在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件，

修改项目首页

只需要调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染，

WXML 模板

什么是 WXML

概念

• 定义：WXML是微信小程序的页面描述语言，类似于传统Web开发中的HTML，但又有其独特的特点和优势。
• 作用：在微信小程序中，WXML主要负责定义页面结构，通过一系列的标签来描述页面的布局、组件的位置以及内容的呈现方式。

WXML的特点

• 大小写敏感：WXML严格区分大小写，例如<text>和<Text>是不同的标签，后者会导致编译错误。
• 标签必须闭合：与HTML类似，但WXML的标签必须严格闭合，否则会导致编译错误。
• 自定义标签：WXML使用小程序为开发者包装好的标签，如<view>、<button>、<text>等，这些标签与HTML中的<div>、<button>、<span>等标签类似，但具有小程序特定的属性和行为。
• 属性与表达式：WXML具有一些特定的属性和表达式，如wx:if、wx:for等，用于实现条件渲染和列表渲染等功能。

WXML的核心功能

1. 数据绑定：WXML实现了数据绑定功能，开发者可以将数据模型与页面视图相连接，使得数据的更新能够自动反映在视图上。这大大减少了开发者手动更新页面的工作量，提高了开发效率。数据绑定使用Mustache语法，即双大括号{{}}来包裹变量名。
2. 组件化：WXML支持组件化开发，可以将页面划分为多个组件，每个组件有自己的WXML、WXSS（类似于CSS的样式表语言）和JavaScript文件。组件化设计使得页面结构更加清晰，易于维护和扩展。
3. 逻辑判断与事件绑定：WXML支持逻辑判断和事件绑定等功能。例如，可以通过wx:if和wx:for等属性进行条件渲染和循环渲染；还可以通过bindtap等属性绑定事件，在事件触发时执行相应的操作。

WXML和HTML的区别

WXML和CSS的区别