做任何程序开发要首先找到其官方文档，微信小程序目前还在邀请内测阶段，目前官方放出了部分开发文档，经过笔者一天的查看和尝试，感觉文档并不全面，但是通过这些文档已经能够看出其大概面貌了。闲话不多说，我们先来看看其有哪些官方文档。
工具/原料
微信公众平台开发者文档
微信号
方法/步骤
1、现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口，这个入口才就是专门针对微信小程序开发的文档，如下图：
2、点击“微信公众平台.小程序”，进入详细页，如下图：
3、创建一个项目开发者工具安装完成后我们就可以将其打开，初次打开会弹出创建项目的窗口，如下图：
4、为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个quickstart项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的demo，为了方便后面的学习，请务必选择“是”。
5、点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是app.js、app.json、app.wxss这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
6、下面我们简单了解这三个文竭惮蚕斗件的功能，方便修改以及从头开发自己的微信小程序。app.js是小程序的脚本代码。我摩学固椹们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的API，如本例的同步存储及同步读取本地数据。app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。app.wxss是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。 我们注意到，在实例程序的代码中还有2个文件夹，一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹，pages是存放所有页面的文件夹。我们着重讲一下这个pages.
7、小程序页面文件构成 在这个示例中，我们有两个页面，index页面和logs页面，即欢迎页恽但炎杰和小程序启动日志的展示页，他们都在pages目录下。微信小程序中的每一个页面的【路径+敌颉缪莽页面名】都需要写在app.json的pages中，且pages中的第一个页面是小程序的首页。每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。index.wxml是页面的结构文件：
8、本例中使用了<vie嘛术铹砾w/>、<image/>、<text/>来搭建页面结构，绑定数据和交互处理函数。inde旌忭檀挢x.js是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。//index.js//获取应用实例varapp=getApp() Page({ data:{ motto:'HelloWorld', userInfo:{} },//事件处理函数 bindViewTap:function(){ wx.navigateTo({ url:'../logs/logs' }) }, onLoad:function(){ console.log('onLoad')varthat=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--><viewclass="containerlog-list"> <blockwx:for-items="{{logs}}"wx:for-item="log"> <textclass="log-item">{{index+1}}.{{log}}</text> </block></view>logs页面使用<block/>控制标签来组织代码，在<block/>上使用wx:for-items绑定logs数据，并将logs数据循环展开节点//logs.jsvarutil=require('../../utils/util.js') Page({ data:{ logs:[] }, onLoad:function(){this.setData({ logs:(wx.getStorageSync('logs')||[]).map(function(log){returnutil.formatTime(newDate(log)) }) }) } })
9、完成上传即可