微信小程序

创建小程序

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，最后，勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项)，点击确定，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在 IDE 预览你的第一个小程序。

框架

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由app.js,app.json,app.wxss组成，必须放在项目的根目录
其中:
app.js 表示小程序逻辑
app.json 表示小程序公共设置
app.wxss 表示小程序公共样式表（可选）

一个小程序页面由四个文件组成，分别是:
js ：页面逻辑
wxml: 页面结构
wxss: 页面样式（可选）
json: 页面配置（可选）

配置

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了所有配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

window用于设置小程序的状态栏、导航条、标题、窗口背景色。
注：HexColor（十六进制颜色值），如"#ff00ff"

tabBar如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

逻辑层(App Service)

小程序开发框架的逻辑层由 JavaScript 编写。
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
在 JavaScript 的基础上，我们做了一些修改，以方便地开发小程序。

App

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

getApp()
全局的 getApp() 函数可以用来获取到小程序实例。

var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

Page

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

object 内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销

数据绑定

可以在page里通过WXML对数据进行绑定

{{text}}
{{array[0].msg}}

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

页面相关事件处理函数

onPullDownRefresh: 下拉刷新
onReachBottom: 上拉触底
onPageScroll: 页面滚动,参数为scrollTop，可自定义页面在垂直方向已滚动的距离（单位px）

自定义转发字段

Page({
  onShareAppMessage: function () {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，可以构建出页面的结构(类似DOM结构)。用以下一些简单的例子来看看 WXML 具有什么能力：

数据绑定

 {{message}} 

列表渲染

等价于v-for

 {{item}} 

条件渲染

通过判断view的值来进行选择渲染

 WEBVIEW 
 APP 
 MINA 

Page({
  data: {
    view: 'MINA'
  }
})

模板

先声明一个模板，通过模板标签调用
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

事件

等价于v-on

 {{count}} 

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

数据绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

组件属性

控制属性

关键字

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

算数运算

 {{a + b}} + {{c}} + d 

逻辑判断

组合

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。

 {{item}} 

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

  {{index}}: {{item.message}}

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

  {{idx}}: {{itemName.message}}

block wx:for

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

   {{index}}: 
   {{item}} 

事件

什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

事件的使用方式

在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

 Click me! 

详细的事件如下

引用

WXML 提供两种文件引用方式import和include。

import

import可以在该文件中使用目标文件定义的template,如：
在 item.wxml 中定义了一个叫item的template：

在 index.wxml 中引用了 item.wxml，就可以使用item模板：