微信小程序学习（二）

**小程序官方文档框架学习**

目录结构：

1.根目录下的三个文件：

 app.js:小程序逻辑（App()函数来注册小程序）

 app.json:小程序公共设置（页面文件的路径（pages）、窗口（windows）、网络超时时间（networkTimeout）、底部 tab（tabBar）、调试模式（debug））

app.wxss:小程序公共样式表（全局样式可在此处设置：具备CSS大部分特性）

2.小程序页面由js、wxml、wxss、json四个文件组成（页面的而四个文件必须具有相同的路径和文件名）

逻辑层：

1.注册程序：

    App( )函数：接受一个object参数，其指定小程序的生命周期函数（onLaunch、onShow、onHide、onError等）

                      不要在定义与App()内的函数中调用getApp(),可使用this

                      不要在onLaunch的时候调用getCurrentPage()

                        通过getApp()获取实例之后，不要私自调用生命周期函数

2.注册页面

  Page( )函数：接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等

  初始数据：data（其数据必须转成json格式）

  生命周期函数：onLoad（加载）、onReady（渲染）、onShow（显示）、onHide（隐藏）、onUnload（卸载）

  页面相关事件处理函数：onPullDownRefresh(下拉刷新)、onShareAppMessage（用户分享）

  事件处理函数：在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行Page中定义的事件处理函数

  setData（）函数：接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value

  getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面

3.模块化

   采用 module.exports 来暴露模块接口

   在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

4.API

  网络API、媒体API、文件API、数据缓存API、位置API、设备API、界面API、开放接口API

视图层：

1.WXML：用于描述页面结构（标签语烟，结合基础组件、时间系统） 注：动态数据来自于对应Page的data

  数据绑定：内容（{{}}）、组件属性、控制属性、关键字（“{{双引号之内}}”）

  条件渲染：wx:if、block wx:if、

  列表渲染：wx:for、block wx:for、wx:key

 模板：定义模板（name属性）、使用模板（is属性）

 事件：事件绑定（在组件中绑定其事件处理函数：bindtap）、事件分类（冒泡和非冒泡事件）、事件对象

 引用：import、include

2. WXSS：类似于CSS

3.组件：可以参考微信小程序官方提供的Dome文档及其源码

   视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、客服会话