鲁达 小程序开发准备
在官网上直接注册小程序账号，可以管理你的小程序的权限，查看数据报表，发布小程序等操作。登录账号，获取对应的小程序的 AppID（创建小程序项目需要用到）。
接着下载微信开发者工具，建立了“普通快速启动模板”（选择空目录下才有此选项），或者直接选择小程序官方Demo或者weui小程序版UI当做学习Demo
创建小程序项目
小程序代码构成
微信小程序目录
wxml文件
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
这个其实就是“html”，不能使用W3C的标签，转而使用的是微信自定义的标签，常见的就是用<view>代替<div>，具体有哪些标签可以查看官网微信基础组件。页面结构是以<page>为父节点节点，没有<html>和<body>。
小程序wxml页面
下面代码就是简单的数据绑定和事件： <!-- wxml代码 --> <view bindtap="add"> {{count}} </view> Page({ data: { count: 1 }, add: function(e) { ({ count: + 1 }) } })js文件
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。App() 必须在 根目录下的a 中注册，且不能注册多个。
App({ onLaunch: function(options) { // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） }, onShow: function(options) { // 当小程序启动，或从后台进入前台显示，会触发 onShow }, onHide: function() { // 当小程序从前台进入后台，会触发 onHide }, onError: function(msg) { // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 con(msg) }, globalData: { // 全局变量，注意App()和Page不同，一个是globalData,一个是data name: 'Gensen' } //开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问 myMethod: function() { con); // "Gensen" } })Page()函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。相对一个全局一个局部，对应每个页面都有一个。
Page({ data: { // 页面的初始数据 text: "This is page data." }, onLoad: function(options) { // 生命周期函数--监听页面加载 // 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。 }, onReady: function() { // 生命周期函数--监听页面初次渲染完成 // 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 // 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。 }, onShow: function() { // 生命周期函数--监听页面显示 }, onHide: function() { // 生命周期函数--监听页面隐藏 // 当navigateTo或底部tab切换时调用。 }, onUnload: function() { // 生命周期函数--监听页面卸载 // 当redirectTo或navigateBack的时候调用。 }, onPullDownRefresh: function() { // 页面相关事件处理函数--监听用户下拉动作 // 需要在aon中的`window`选项中或页面配置中开启`enablePullDownRefresh`。 // 当处理完数据刷新后，`wx.stopPullDownRefresh`可以停止当前页面的下拉刷新。 }, onReachBottom: function() { // 页面上拉触底事件的处理函数 }, onShareAppMessage: function () { // 用户点击右上角转发 return { title: '自定义转发标题', path: '/page/logs/logs' } }, onPageScroll: function() { // 页面滚动触发事件的处理函数 }, onTabItemTap(item) { // 当前是 tab 页时，点击 tab 时触发 con) con) con) }, // 开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问 viewTap: function() { // 直接修改 而不调用 是无法改变页面的状态的，还会造成数据不一致 ({ text: 'Set some data for updating view.' }, function() { // 回调函数 }) }, customData: { hi: 'MINA' } })Page 实例的生命周期
js部分还包括路由、模块、API（小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等）后续再细讲。wxss文件
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。其实就是CSS改了个后缀名，不同的地方是多了rpx尺寸单位和样式导入，样式选择器只能使用一部分，像后代子代选择器就不能用了，目前支持的选择器如下：
选择器 样例 样例描述 .class .intro 选择所有拥有 class="intro" 的组件 #id #firstname 选择拥有 id="firstname" 的组件 element view 选择所有 view 组件 element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 ::after view::after 在 view 组件后边插入内容 ::before view::before 在 view 组件前边插入内容 定义在 a 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 a 中相同的选择器。
小程序全局样式设置
配置文件
aon
用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。程序启动默认的第一个页面，就是aon的pages中的第一个页面。
微信小程序aon配置
注意：json文件不能注释，不然会报错（上面图片大误）
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比aon全局配置简单得多，只是设置 aon 中的 window 配置项的内容，页面中配置项会覆盖 aon 的 window 中相同的配置项。
结尾
先简单介绍下微信小程序代码结构和不同文件对应的功能和作用，后续有空将细讲某个模块或者一些常用的应用场景。