今天（2017/1/9）微信小程序终于上线了，可以说这是张小龙在微信上的又一大战略性的布局。至于微信小程序的各种特点以及简单使用，想必各位读者也跟我一样在被朋友圈刷屏之后已经有所了解。小程序的开发与传统的web前端开发极其相似，想必各位技术宅们关心的是如何去开发一个小程序，这里我简单介绍一下如何简单上手开发小程序。
第一步：安装
要开发小程序，当然需要工具了，前往微信官网下载 微信开发者工具
安装之后打开，需要通过微信扫二维码登录。
扫码登录后，选择 本地小程序项目 ，点击添加项目，然后填写相关信息：
AppID: 企业申请后获得，或受邀参与内测的可以去
微信·公众平台里查看，只是测试用的话，选择无AppID.依次填写
项目名称和项目目录，在第一次创建项目时，建议勾选在当前目录中创建 quick start 项目选项。这会帮助创建一个初始的 demo。
第二步：基本配置
进入创建的初始 demo 后，可以看到如下页面：
点击编辑后，可以发现右边目录结构中有两个文件夹以及根目录下的三个文件，三个文件分别为app.js、app.json、app.wxss,以下分别介绍这三个文件的作用：
app.js
//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.js为脚本文件，我们可以在app.js中监听并处理小程序的生命周期函数、声明全局变量以及调用各类提供的 API。如初始demo中调用登录接口以及获取数据。
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}该文件由两部分组成，我们可以在定义页面的路径，也可以在里面定义一些小程序的窗口背景色，配置导航条样式，配置默认标题。我们可以发现，这正好对应pages文件中的两个页面。如果我们要添加新的页面，也需要在这里先申明路径，“pages”数组中的一个页面为小程序的首页。
注意：app.json中不能添加任何注释！！！
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;
} app.wxss中定义小程序的公共样式，这里申明的样式我们可以在其他的页面中直接引用。
第三步：页面创建
前面介绍过这个初始demo中有两个页面，微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 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>index.wxml为页面结构，相当于我们写的.html文件，index.wxml与.html还是存在一些区别。我们发现上述文件中的</view>标签与.html中的</div>标签很相似。其他<view/>、<image/>、<text/>标签的使用与.html中类似。
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.js 是页面的脚本文件，与我们之前的.js文件的功能一样。在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
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;
}index.wxss为页面的样式表，类似.css。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
第四步：调试
点击开发框左侧的调试进入调试界面：
以下是我们用chrome进行前端开发时的调试界面（以百度为例）：
天呐~又是惊人的相似，再一次说明了微信小程序开发与web前端开发的关系。调试区域分为六个部分：Wxml、Console、Sources、Network、Appdata、Storage
Wxml
这里我们可以看到真实的页面结构以及结构对应的样式，同时我们也可是对结构以及样式进行操作，并实时查看结果：
Console
与通过chrome调试一样，Console 有两大功能：开发者可以在此输入和调试代码以及当代码出错时，错误信息会显示在这里。
Sources
Sources panel 用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。
Network
用于观察和显示 request 和 socket 的请求情况，以及每次请求所花的时间：
Appdata
Appdata 用于显示当前项目当前时刻 appdata 具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。
Storage
Storage 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。
第五步：项目预览
开发者工具右侧的“项目”模块中包括：当前项目细节、上传以及项目的一些其他设置。
由于没有AppID，部分功能无法使用。