一文带你揭开微信小程序开发的神秘面纱-写在微信小程序发布的第一天

      今天早上一上网就被小程序刷屏了，于是抱着怀疑的态度试玩了一下，感觉确实非常的不错，比html5流畅很多，页面加载速度也非常的快，玩起来完全感觉不到卡顿，感觉跟原生的没啥太大的区别，在好奇心的驱使下于是花了2小时研究了一下微信的官方文档，写了下面这篇入门教程，希望能够帮助到你了解小程序的开发流程。

首先我们可以来分析下微信小程序的项目目录是怎么样的

在这里面我们主要关注三个文件分别是app.js 文件，app.json文件和app.wxss文件，其他的文件我们暂时可以不用管，那么这三个文件是干嘛用的呢，首先app.js文件主要是app的主文件，就相当于我们C语言里面的main文件，是整个小程序启动的入口，小程序的生命周期是放在这个文件里面，那么我们来看看这个文件里面有哪些东西：

是不是感觉语法比较熟悉，其实就是js代码，只不过里面的调用api全部来自于微信内部，其中的onLaunch方法就是小程序的启动入口。一般的缓存获取和网络调用一般都是些在js文件里面，然后获取到的数据会通过setData方法传到view层。
小程序的设计模式也是采用的MVC模式，即 视图，数据模型 和控制器，在小程序里面view的生成和描述全部是放在.wxml文件里面，我们可以在目录里面新建一些文件夹，里面专门用来存储视图文件和布局文件等。从第一张截图我们可以看到我们新建了一个pages 文件夹，里面有三个文件，其实也就是对应着三个页面，分别是登录页，注册页和首页，我这里所说的页面的意思在Android里面称为Activity,在iOS里面叫Controller，跟它们一样，小程序里面的页面也有自己的生命周期，就是下面这几个，可以简单看下，跟android里面Activity和iOS里面Controller的生命周期基本没啥大区别，果然是天下技术一大抄啊，腾讯又发挥自己的特长了

data Object 页面的初始数据
onLoad Function 生命周期函数–监听页面加载
onReady Function 生命周期函数–监听页面初次渲染完成
onShow Function 生命周期函数–监听页面显示
onHide Function 生命周期函数–监听页面隐藏
onUnload Function 生命周期函数–监听页面卸载
onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数

每一个页面都包含三个文件，一个.js文件，一个.wxml文件，一个.wxss文件，.js文件里面主要用来写一些逻辑层的东西，.wxml文件是view层文件，这里面就放了一个页面里面需要的所有视图，这写视图都会放在这文件里面定义，类似于android里面的.R文件，我们通过一段代码来看看这个文件里面是如何来布局视图的

<view class="detailView">  <view  class="loginInfo">    <text class="loginInfo-account">账号:</text>   <input  bindinput="bindKeyInput" placeholder="请输入账号"/>    <text class="loginInfo-password">密码:</text>    <input  bindinput="bindKeyInput" placeholder="请输入密码"/>  </view>   <view bindtap="login" class="loginBtn">   <button class = "loginBtn-loginButton">立即登录</button>>   </view></view>

看到了么，就是采用的xml标签形式的布局方式，上面这个代码就是一个简单的登录框，相信学前端的童鞋可以很快的就写出来
在小程序里面，一个input表示一个输入框，一个text表示一个文本标签，这个东东在小程序里面通称为组件，除了上面这两个组件为，下面还给大家列出一些常用组件，有编程经验的同学看名字就知道这些组件是用来干嘛的，至于其用法基本跟html差不多
view 视图容器
scroll-view 可滚动视图容器
swiper 滑块视图容器
基础内容(Basic Content)：
组件名 说明
icon 图标
text 文字
progress 进度条
表单(Form)：
标签名 说明
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
picker-view 内嵌列表选择器
slider 滚动选择器
switch 开关选择器
label 标签
导航(Navigation)：
组件名 说明
navigator 应用链接
多媒体(Media)：
组件名 说明
audio 音频
image 图片
video 视频
地图(Map)：
组件名 说明
map 地图
画布(Canvas)：
组件名 说明
canvas 画布

基本跟html5差不了多少，学html5的同学基本可以轻松上手了，真羡慕，
那么组件声明完之后，我们还需要定义组件的布局方式，这些布局方式是以css文件形式写在.wxss文件里面的，那个文件就是微信小程序的样式表文件，格式跟css一样,只是里面的属性采用的是微信自家定义的。
ok，上面的讲解基本上讲完了一个页面的组成，在写完.wxml和.wxss文件后就要开始写.js文件了，咱直接上代码图：

这个就是.js文件了，首先通过getApp获取到小程序的全局单例，然后就可以直接加载view了，我们看看他是怎么加载的，

//index.js//获取应用实例var app = getApp()Page({  data: {    motto: 'Hello World',    userInfo: {}  },  //事件处理函数  bindViewTap: function() {    wx.navigateTo({      url: '../logs/logs'    })  },  //进入  enterInfoLoginPage:function(){    wx.navigateTo({      url: '../login/login',      success: function(res){        // success      },      fail: function() {        // fail      },      complete: function() {        // complete      }    })  },

就是上面这个函数，所有定义好的组件全部以数组的形式装到Page里面即可，然后组件上的文字或者图片内容就放到data字段里面就好了pages数组里面的数据结构就是一个字典，所有组件和组件内容全部以键值对的形式装入。然后下面那个事件处理函数就是我们给组件绑定的事件监听处理，在android里面叫clickListerner。在ios里面叫Target,，这些组件的监听事件是定义在.wxml文件里面的，看下面的代码：

 <view bindtap="enterInfoLoginPage" class="usermotto">    <text class="user-motto">{{motto}}</text>  </view>

bindtap=”enterInfoLoginPage” 这个就是给text这个组件绑定了一个事件监听器，方法名叫enterInfoLoginPage, 这个方法需要在.js文件里面实现。

接下来我们讲app.json 文件，那么这个文件是干嘛用的，这个其实类似于android项目里面的AndroidManifest.xml文件，用来注册Activity的，app里面所有的Activity都需要提前在这个文件里面注册好，当然iOS里面没有这个玩法，作为一名iOS开发者我觉得很幸运/坏笑。所以小程序里面的玩法就是借鉴的android的，所有需要用到的page需要全部提前在app.json文件里面注册，来看看怎么注册的:

{  "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/logs/login"//登录页面  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"  },  "tabBar": {    "list": [{      "pagePath": "pagePath",      "text": "首页",      "selectedIconPath": "selectedIconPath"    },{       "pagePath": "pagePath",       "text": "日志"    }]  },

看到了吗，所有的页面全部以数组的形式放在pages里了，放的格式是 “目录地址/文件名”，下面的window就是小程序的主窗口，小程序的主要背景色以及导航条的一些颜色就是在这里面设置的。剩下的tabbar就是底部栏，就是我们玩app时底部那几个切来切去的底部按钮，都可以在这里面进行设置。比如上面这段代码里面我定义了这个小程序底部只有两个Tab, 一个首页，一个发现，一般的app都是有4个的，既然叫小程序就要突出小字，所以要少一些，一般就2个甚至没有。
讲到这里，本期的教程就基本讲完了，回顾一下，小程序的开发流程是怎么样的，
第一步，在.wxml文件里面定义组件 ，采用xml标签格式
第二步：在.wxss文件里面定义组件的布局样式，采用css格式
第三步：在.js文件里面通过组件名来加载定义的组件
第四步：在app.json文件里面注册所有的page
第五步：在app.js里面拿到小程序的实例并加载page即可。

本期教程比较简单，只是给大家梳理一下小程序的开发流程以及目录结构，下一期会给大家具体的讲讲小程序的功能开发，包括小程序的数据缓存，网络调用，页面跳转等。需要了解更多关于微信小程序开发的知识请加本人微信：bubiandeai05
原创于 2016-1-9，转载请注明出处，谢谢！