官方文档教程1：

官方文档教程2：

本文档将带您一步步创建微信小程序，您可以在手机上体验小程序的实际效果。这个小程序的首页会显示欢迎信息和当前用户的微信头像。点击头像可以在新打开的页面查看当前小程序的启动日志。下载源代码

1. 获取微信小程序

如果您是受邀开发者，我们会提供账号，使用提供的账号，登录后，可以在网站“设置”-“开发者设置”中查看微信小程序，请注意不能直接使用服务帐户或订阅帐户。

如果是旅游模式，可以跳过这一步

注：如果我们没有使用注册时绑定的管理员微信账号，可以在手机上体验小程序。然后我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块中，绑定需要体验小程序的微信账号。本教程默认使用管理员微信账号进行账号注册和体验。

2. 创建项目

我们需要使用开发者工具来完成小程序的创建和代码的编辑。

开发者工具安装完成后，打开微信扫码登录。选择创建“”，填写上面得到的名称，设置本地项目名称（不是小程序名称），如“My ”，选择本地文件夹作为代码存放目录，点击“New ”即可”。

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

项目创建成功后，我们可以点击项目进入，看到完整的开发者工具界面，点击左侧导航，在“Edit”中查看和编辑我们的代码，在“”中测试代码并且可以将微信客户端模拟小程序的效果发送到手机，在“项目”中预览实际效果。

3. 编写代码创建小程序实例

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

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

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

//app.({: () {//调用API从本地缓存中获取数据 var logs = wx.('logs') || [] logs.(Date.now()) wx.('logs', logs) }, :(cb){ var that = this; if(this..){ cb =='' && cb(this..) }else{ //调用登录接口 wx.({: () { wx .({: (res) {that.. = res.; cb =='' && cb(that..)} })} });} }, :{ :null }})

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

{'':['//','/logs/logs'],'':{'':'','':'#fff','xt':'','le':''} }

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

/**app.wxss**/. {: 100%;: 弹性; 柔性-：; -:; -: -;: 0; 盒子-：-盒子；}

创建页面

在本教程中，我们有两个页面，页面和日志页面，分别是小程序启动日志的欢迎页面和显示页面。它们都在目录中。微信小程序中每个页面的【路径+页面名称】需要写在app.json中，其中的第一页就是小程序的首页。

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

.wxml 是页面的结构文件：

view=''> view=''=''>='-' src='{{.}}' -size=``>> text='-'>{{.}}text> view> view = ''> text='user-'>{{}}text> view>view>

在这个例子中微信小程序开发文档服务，，，，用于构建页面结构，绑定数据和交互处理功能。

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

//.js//获取应用实例 var app = ()Page({ data: {: '',: {} }, //事件处理函数：() {wx.({ url:'../logs/ logs' }) },: () {.log('') var that = this //调用应用实例方法获取全局数据 app.((){ //更新数据 that.({: }) }) } })

.wxss 是页面的样式表：

/**.wxss**/. {： 柔性; 柔性-：; -: ;}.- {:;:;:; -: 50%;}.- {: #aaa;}。{-最佳：; }

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

.json 是页面的配置文件：

页面的配置文件不是必需的。当页面有配置文件时，页面上的配置项会覆盖app.json中相同的配置项。如果没有指定页面配置文件，本页面将直接使用app.json中的默认配置。

日志的页面结构