本教程将带你一步步建设完成一个微信小程序，
，
，，并可以在手机上体验该小程序的现实效果。。。。这个小程序的首页将会显示接待语以及目今用户的微信头像，
，
，，点击头像，
，
，，可以在新开的页面中审查目今小程序的启动日志。。。。下载源码

1. 获取微信小程序的 AppID

登录 https://mp.weixin.qq.com ，
，
，，就可以在网站的“设置”-“开发者设置”中，
，
，，审查到微信小程序的 AppID 了，
，
，，注重不可直接使用服务号或订阅号的 AppID 。。。。

注重：若是我们不是用注册时绑定的治理员微信号，
，
，，在手机上体验该小程序，
，
，，那么我们还需要操作“绑定开发者”。。。。即在“用户身份”-“开发者”？？？椋
，
，，绑定上需要体验该小程序的微信号。。。。本教程默认注册帐号、体验都是使用治理员微信号。。。。

2. 建设项目

我们需要通过开发者工具，
，
，，来完成小程序建设和代码编辑。。。。

开发者工具装置完成后，
，
，，翻开并使用微信扫码登录。。。。选择建设“项目”，
，
，，填入上文获取到的 AppID ，
，
，，设置一个外地项目的名称（非小程序名称），
，
，，好比“我的第一个项目”，
，
，，并选择一个外地的文件夹作为代码存储的目录，
，
，，点击“新建项目”就可以了。。。。

为利便初学者相识微信小程序的基本代码结构，
，
，，在建设历程中，
，
，，若是选择的外地文件夹是个空文件夹，
，
，，开发者工具会提醒，
，
，，是否需要建设一个 quick start 项目。。。。选择“是”，
，
，，开发者工具会资助我们在开发目录里天生一个简朴的 demo。。。。

项目建设乐成后，
，
，，我们就可以点击该项目，
，
，，进入并看到完整的开发者工具界面，
，
，，点击左侧导航，
，
，，在“编辑”里可以审查和编辑金狮贵宾会代码，
，
，，在“调试”里可以测试代码并模拟小程序在微信客户端效果，
，
，，在“项目”里可以发送到手机里预览现实效果。。。。

3. 编写代码

建设小程序实例

点击开发者工具左侧导航的“编辑”，
，
，，我们可以看到这个项目，
，
，，已经初始化并包括了一些简朴的代码文件。。。。最要害也是必不可少的，
，
，，是 app.js、app.json、app.wxss 这三个。。。。其中，
，
，，.js后缀的是剧本文件，
，
，，.json后缀的文件是设置文件，
，
，，.wxss后缀的是样式表文件。。。。微信小程序会读取这些文件，
，
，，并天生小程序实例。。。。

下面我们简朴相识这三个文件的功效，
，
，，利便修改以及重新开发自己的微信小程序。。。。

app.js是小程序的剧本代码。。。。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。。。。挪用框架提供的富厚的 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){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //挪用登录接口
      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": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

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

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

建设页面

在这个教程里，
，
，，我们有两个页面，
，
，，index 页面和 logs 页面，
，
，，即接待页和小程序启动日志的展示页，
，
，，他们都在 pages 目录下。。。。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，
，
，，且 pages 中的第一个页面是小程序的首页。。。。

每一个小程序页面是由同路径下同名的四个差别后缀文件的组成，
，
，，如：index.js、index.wxml、index.wxss、index.json。。。。.js后缀的文件是剧本文件，
，
，，.json后缀的文件是设置文件，
，
，，.wxss后缀的是样式表文件，
，
，，.wxml后缀的文件是页面结构文件。。。。

index.wxml 是页面的结构文件：

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

本例中使用了<view/>、<image/>、<text/>来搭建页面结构，
，
，，绑定命据和交互处理函数。。。。

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 的 window 中相同的设置项。。。。若是没有指定的页面设置文件，
，
，，则在该页面直接使用 app.json 中的默认设置。。。。

logs 的页面结构

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

logs 页面使用 <block/> 控制标签来组织代码，
，
，，在 <block/> 上使用 wx:for 绑定 logs 数据，
，
，，并将 logs 数据循环睁开节点。。。。

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

运行效果如下：

4. 手机预览

开发者工具左侧菜单栏选择"项目"，
，
，，点击"预览"，
，
，，扫码后即可在微信客户端中体验。。。。