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

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

在此文件中，我们可以配置小程序组成的页面，配置小程序的窗口背景色，配置导航栏样式以及配置默认标题。请注意，没有注释可以添加到此文件。有关更多可配置项，请参阅详细配置{“ 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：center； justify-content：space-between； padding：200rpx 0； box-sizing： border-box;}创建页面在本教程中，我们有两个页面，索引页面和日志页面，即欢迎页面和小程序启动日志显示页面，它们都在页面目录下。

需要将微信小程序中每个页面的[路径+页面名称]写入app.json的页面中，并且页面的第一页是小程序的主页。每个小程序页面由四个不同的后缀文件组成，它们在同一路径下具有相同的名称，例如index.js，index.wxml，index.wxss，index.json。带.js后缀的文件是脚本文件，带.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件，带.wxml后缀的文件是页面结构文件。 index.wxml是页面的结构文件：{{userInfo.nickName}} {{motto}}在此示例中，用于构建页面结构，绑定数据和交互式处理功能。 index.js是页面的脚本文件。在此文件中，我们可以监视和处理页面的生命周期功能，获取小程序实例，声明和处理数据以及响应页面交互事件。 //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：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中指定的样式规则。 index.json是页面的配置文件：页面的配置文件不是必需的。当页面有配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app.json中的默认配置将直接在此页面上使用。日志{{index + 1}}的页面结构。 {{log}}日志页面使用控制标签来组织代码，使用wx：for绑定日志数据，并将日志数据循环扩展到节点//logs.jsvar util = require（'../.。 /utils/util.js')Page({data：{logs：[]}，onLoad：function（）{this.setData（{logs：（wx.getStorageSync（'logs'）|| []）。map（函数（日志）{return util.formatTime（new Date（log））}）}）运行结果如下：4.在移动预览开发者工具的左侧菜单栏中选择“项目”，单击“预览”。您可以在扫描代码后在微信客户端中体验它。