开发准备工作，获取微信小程序 AppID

登录到微信公共平台，然后可以在网站的“设置”-“开发人员设置”中查看微信小程序的AppID。请注意，您不能直接使用服务帐户或订阅帐户的AppID。

下载开发工具后创建一个新项目

安装开发人员工具后，打开并使用微信进行扫描以登录代码。选择创建一个“项目”，填写上面获得的AppID，为本地项目设置一个名称（不是小程序]名称，例如“我的第一个项目”，然后选择一个本地文件夹作为代码存储目录，只需单击“新建项目”。

为了让初学者了解微信小程序的基本代码结构，在创建过程中，如果所选的本地文件夹为空文件夹，则开发人员工具将提示是否需要创建快速启动项目。选择“是”，开发人员工具将帮助我们在开发目录中生成一个简单的演示。

完成后，我们来看一下主界面

整个开发工具基本上分为三个部分。

第一列：表格项，每个按钮代表一个页面

第二列：webview，您的页面在此处实时显示

第三列：chrome调试工具，我们这样称呼它，因为它确实是使用charome的调试工具，您可以在其中调试页面样式，js，网络检测，输入和输出等。

编写示例代码并创建小程序实例

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

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

app.js是小程序的脚本代码。我们可以监视和处理小程序的生命周期函数，并在此文件中声明全局变量。调用框架提供的丰富API，例如本示例中的同步存储和本地数据的同步读取。有关更多可用的API，请参阅API文档。

// app.js

App（{

onLaunch：函数（）{

//调用API以从本地缓存中获取数据

var日志= wx.getStorageSync（\'logs \'）|| []

logs.unshift（Date.now（））

wx.setStorageSync（\'logs \'，日志）

}，

getUserInfo：function（cb）{

var that = this;

if（this.globalData.userInfo）{

typeof cb ==函数&& cb（this.globalData.userInfo）

}其他{

//调用登录界面

wx.login（{

成功：函数（）{

wx.getUserInfo（{

成功：函数（res）{

that.globalData.userInfo = res.userInfo;

typeof cb ==函数&& cb（that.globalData.userInfo）

}

}）

}

}）;

}

}，

globalData：{

userInfo：null

}

}）

app.json是整个小程序的全局配置。在此文件中，我们可以配置组成小程序的页面，配置小程序的窗口背景色，配置导航栏样式以及配置默认标题。请注意，没有注释可以添加到此文件。更多可配置的项目可以参考详细的配置。

{

页数：[

页面/索引/索引，

页面/日志/日志

]，

窗口：{

backgroundTextStyle：light，

navigationBarBackgroundColor：#fff，

navigationBarTitleText：微信，

navigationBarTextStyle：黑色

}

}

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

/ ** app.wxss ** /

.container {

高度：100％;

显示：flex;

flex-direction：列;

align-items：居中；

justify-content：间隔；

填充：200rpx 0;

box-sizing：border-box;

}

创建页面

在本教程中，我们有两个页面，即索引页面和日志页面，即小程序启动日志的欢迎页面和显示页面。它们都在页面目录中。需要将微信小程序中每个页面的[路径+页面名称]写入app.json的页面中，并且页面的第一页是小程序的主页。

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

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

// index.js

//获取应用示例

var app = getApp（）

页面（{

数据：{

座右铭：\'Hello World \'，

userInfo：{}

}，

//事件处理功能

bindViewTap：function（）{

wx.navigateTo（{

url：\'../ logs / logs \'

}）

}，

onLoad：函数（）{

console.log（\'onLoad \'）

var that = this

//调用应用程序实例方法以获取全局数据

app.getUserInfo（function（userInfo）{

//更新数据

that.setData（{

userInfo：userInfo

}）

}）

}

}）

index.wxss是页面的样式表：

/ ** index.wxss ** /

.userinfo {

显示：flex;

flex-direction：列;

align-items：居中；

}

.userinfo-avatar {

宽度：128rpx；

高度：128rpx；

保证金：20rpx;

边界半径：50％；

}

.userinfo-昵称{

颜色：#aaa;

}

.usermotto {

margin-top：200像素；

}

页面样式表不是必需的。当存在页面样式表时，页面样式表中的样式规则将与app.wxss中的样式规则重叠。如果不指定页面的样式表，则还可以直接使用页面的结构文件中app.wxss中指定的样式规则。

index.json是页面的配置文件：

不需要页面的配置文件。当页面有配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app.json中的默认配置将直接在此页面上使用。

日志页面使用控制标签来组织代码，使用wx：for绑定日志数据，并循环日志数据以扩展节点。

// logs.js

var util = require（\'../../ utils / util.js \'）

页面（{

数据：{

日志：[]

}，

onLoad：函数（）{

this.setData（{

日志：（wx.getStorageSync（\'logs \'）|| []）。map（function（log）{

返回util.formatTime（新日期（日志））

}）

}）

}

}）

通过这种方式，我们完成了一个简单的入门级微信小程序开发。

推荐阅读：创建第一个微信小程序新手教程微信小程序开发教程