大家好，我们再次见面。我是你的朋友。

进行任何计划开发时，您必须首先找到其官方文件。让我们首先看一下它的官方文件。

开发文档链接是：

这是制定微信小计划的所有官方文件。

知道文档的位置后，让我们介绍如何开发微信小程序：

第一步：

下载微信小程序开发人员工具并安装它，下载路径：

输入下载接口后，根据您的操作系统选择相应的链接以进行下载，然后在下载完成后进行安装。

步骤2：登录工具

安装开发人员工具后，我们可以打开它。您首次需要在微信上扫描QR码以登录。输入下面的图片，用手机上的微信扫描它并确认登录。

步骤3：创建一个项目

登录成功之后，如果您首次使用此工具，则将弹出一个创建项目的窗口，如下图所示：

在创建过程中，如果所选的本地文件夹是一个空文件夹，则将出现一个检查选项：“在当前目录中创建一个项目”。为了促进初学者了解微信小程序的基本代码结构，请检查此项目。检查后，开发人员工具将帮助我们在开发目录中生成一个简单的演示，如下图所示：

步骤4：项目代码结构的说明

单击开发人员工具左侧的“编辑”导航，我们可以看到该项目已被初始化并包含一些简单的代码文件。最重要和必不可少的是app.js，app.json和app.wxss。其中，.js后缀是脚本文件，.json后缀是配置文件，并且.wxss后缀是样式表文件。微信小程序将读取这些文件并生成小程序实例。

在下面，我们简要了解这三个文件的功能，促进修改并从头开始开发自己的微信小程序。

1。App.js是的脚本代码。我们可以收听和处理的生命周期功能，并在此文件中声明全局变量。呼叫框架提供的丰富API，例如在此示例中对本地数据的同步存储和同步读数。

2。App.json是整个的全局配置。在此文件中，我们可以配置小程序组成的页面，配置的窗口背景颜色，配置导航条样式，并配置默认标题。请注意，该文件未添加注释。

3。App.wxss是整个的公共样式表。我们可以直接在页面组件的属性上直接使用app.wxss中声明的样式规则。

我们注意到实例程序的代码中有两个文件夹，一个IS，另一个是一个文件夹，该文件夹放置了一般的工具式方法，并且是存储所有页面的文件夹。让我们专注于此。

步骤5：迷你程序页面文件的组件

在此示例中，我们有两个页面，页面和日志页面，即欢迎页面和启动日志的显示页面，这两者都在目录中。微信中每个页面的[路径 +页名]需要写在app.json中，其中的第一页是的主页。

每个迷你程序页面由在相同路径下具有相同名称的四个不同后缀文件组成，例如：.js，.wxml，.wxss和.json。 .js后缀文件是一个脚本文件，.json后缀文件是一个配置文件，.wxss后缀文件是样式表文件，.wxml后缀文件是页面结构文件。

.wxml是页面的结构文件：

代码语言：

代码数量运行：0

跑步

复制

{ {userInfo.nickName}} { {motto}}

在此示例中，我们使用，构建页面结构，绑定数据和交互式处理功能。

.js是页面的脚本文件。在此文件中，我们可以收听并处理页面的生命周期功能，获取小程序实例，声明和处理数据，响应页面交互事件等。

代码语言：

代码数量运行：0

跑步

复制

//index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })

.wxss是页面的样式表：

代码语言：

代码数量运行：0

跑步

复制

/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .usermotto { margin-top: 200px; }

页面的样式表不必要。如果有页面样式表，则页面样式表中的样式规则将根据app.wxss中的样式规则级联。如果未指定页面的样式表，则还可以直接在页面结构文件中直接使用app.wxss中指定的样式规则。

.json是页面配置文件：

页面配置文件是非必需的。当有一个页面的配置文件时，配置项目将在该页面上的App.json中覆盖相同的配置项目。如果没有指定的页面配置文件，请直接在该页面上的app.json中使用默认配置。

日志的页面结构

代码语言：

代码数量运行：0

跑步

复制

{ {index + 1}}. { {log}}