本文档将带您逐步创建微信小程序，您可以在手机上体验小程序的实际效果。此小程序的首页将显示欢迎消息和当前用户的微信头像。单击该头像以在新打开的页面上查看当前applet的启动日志。下载源代码1.获取微信小程序的AppID。首先，我们需要有一个帐户。如果您可以看到该文档，我们应该已经为您邀请并创建了一个帐户。请注意，服务帐户或订阅帐户的AppID不能直接使用。使用提供的帐户登录，您可以在网站的“设置”-“开发人员设置”中查看微信小程序的AppID。注意：如果我们未使用注册时绑定的管理员微信帐户，则可以在手机上体验该applet。然后，我们还需要操作“绑定开发者”。即在“用户身份”-“开发人员”模块中，绑定需要体验小程序的微信帐号。本教程中的默认帐户注册和体验都使用管理员的微信帐户。2.要创建一个项目，我们需要使用开发人员工具来完成小程序的创建和代码编辑。安装开发人员工具后，打开并使用微信扫描代码登录。选择创建一个“项目”，填写上面获得的AppID，设置一个本地项目的名称（而不是applet的名称），例如“ My First Project”，然后选择一个本地文件夹作为代码存储目录，单击“新项目”。为便于初学者了解微信小程序的基本代码结构，在创建过程中，如果所选的本地文件夹为空文件夹，则开发人员工具将提示是否需要创建快速启动项目。

选择“是”，开发人员工具将帮助我们在开发目录中生成一个简单的演示。成功创建项目后，我们可以单击项目以进入并查看完整的开发人员工具界面，单击左侧导航，在“编辑”中查看和编辑我们的代码，在“调试”中测试代码，然后单击可以将模拟小程序对微信客户端的效果发送到手机，以预览“项目”中的实际效果。3.编写代码以创建一个小程序示例。单击开发人员工具左侧导航中的“编辑”，我们可以看到该项目已初始化，并包含一些简单的代码文件。最关键和必不可少的是app.js，app.json和app.wxss。其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。微信小程序将读取这些文件并生成小程序的示例。让我们简要了解这三个文件的功能，以帮助我们从头开始修改和开发自己的微信小程序。 app.js是小程序的脚本代码。我们可以监视和处理applet的生命周期功能，并在此文件中声明全局变量。调用MINA提供的丰富API，例如本示例中的同步存储和本地数据的同步读取。有关更多可用的API，请参阅API文档//app.js App（{onLaunch：function（）{//调用API以从本地缓存获取数据var logs = wx.getStorageSync（'logs'）|| [] logs.unshift（Date.now（））wx.setStorageSync（'logs'，logs）}，getUserInfo：function（cb）{var that = this; if（this.globalData.userInfo）{typeofcb ==“ function “ && cb（this.globalData.userInfo）} else {//调用登录界面wx.login（{success：function（）{wx.getUserInfo（{success：function（res）{that.globalData.userInfo = res.userInfo ; typeofcb = =“ function” && cb（that.globalData.userInfo）}}}}）;}}，globalData：{userInfo：null}}）app.json是整个applet的全局配置。

在此文件中，我们可以配置小程序组成的页面，配置小程序的窗口背景色，配置导航栏样式以及配置默认标题。请注意，没有注释可以添加到此文件。有关更多可配置项，请参阅详细配置{“ pages”：[“ pages / index / index”，“ pages / logs / logs”]，“ window”：{“ backgroundTextStyle”：“ light”，“ navigationBarBackgroundColor”： “ #fff”，“ navigationBarTitleText”：“微信”，“ navigationBarTextStyle”：“ black”}}}。app.wxss是整个小程序的通用样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。 /**app.wxss**/ .container {高度：100％；显示：flex; flex-direction：列； align-items：居中；证明内容：间隔；填充：200rpx 0;框大小：border-box； }创建页面在本教程中，我们有两个页面，索引页面和日志页面，即小程序启动日志的欢迎页面和显示页面。它们都在页面目录下。

微信小程序中每个页面的[路径+页面名称]需要写在app.json的页面中，页面的第一页是小程序的主页。每个小程序页面由四个不同的后缀文件组成，它们在同一路径下具有相同的名称，例如index.js，index.wxml，index.wxss，index.json。带.js后缀的文件是脚本文件，带.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件，带.wxml后缀的文件是页面结构文件。 index.wxml是页面的结构文件：{{userInfo.nickName}} {{motto}}在此示例中，用于构建页面结构，绑定数据和交互式处理功能。 index.js是页面的脚本文件。在此文件中，我们可以监视和处理页面的生命周期功能，获取applet实例，声明和处理数据以及响应页面交互事件。 //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}）}}}}）index.wxss是页面的样式表：/**index.wxss**/ .userinfo {display：flex; flex-direction：列; align-items：居中; } .userinfo-avatar {width：128rpx;高度：128rpx;保证金：20rpx;边界半径：50％； } .userinfo-nickname {color：#aaa; } .usermotto {margin-top：200px; }页面样式表不是必需的。

有页面样式表时，页面样式表中的样式规则将覆盖app.wxss中的样式规则。如果不指定页面样式表，则还可以直接使用页面结构文件中app.wxss中指定的样式规则。 index.json是页面的配置文件：页面的配置文件不是必需的。当页面有配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件微信小程序开发，则app.json中的默认配置将直接在此页面上使用。日志的页面结构为{{index + 1}}。 {{log}}日志页面使用控制标签来组织代码，使用wx：for-items绑定日志数据，并将日志数据循环扩展到// logs节点。 js varutil = require（'../../ utils / util.js'）Page（{data：{logs：[]}，onLoad：function（）{this.setData（{logs：（wx.getStorageSync（' log'）|| []）。map（function（log）{returnutil.formatTime（newDate（log））}）}）}}）运行结果如下：4.移动预览开发人员工具左侧菜单栏选择单击“项目”，单击“预览”，扫描代码后即可在微信客户端中体验。体验小程序下载源代码并使用开发人员工具预览微信小程序的完整功能