微信小程序学习(一)

视图层

• MINA的视图层由WXML与WXSS编写。
• 将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
• WXML(WeiXin Markup language)用于描述页面的结构。
• WXSS(WeiXin Style Sheet)用于描述页面的样式。
  组件(Component)是视图的基本组成单元。

WXML

数据绑定

• WXML中的动态数据均来自对应Page的data。
• 数据绑定使用”Mustache”语法（双大括号）将变量包起来
• 支持运算
  
  • 算数运算
  • 三元运算
  • 逻辑运算
  • 字符串运算
  • 数据路径运算
• 组合
  
  • 数组
    
    • <view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
  • 对象
    
    • <template is="objectCombine" data="{{for: a, bar: b}}"></template>
  • …拓展运算符:将一个对象展开,复制到一个新的对象
    
    • <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

• 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
• 使用wx:for-item可以指定数组当前元素的变量名
• 使用wx:for-index可以指定数组当前下标的变量名
  
  • -后面是名
• 可以嵌套
• wx:key如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如<input/>中的输入内容，<switch/> 的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。

<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

• 在MINA中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块
• wx:elif="{{}}",wx:else="{{}}"
• 如果我们想一次性判断多个组件标签，我们可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性。
• <block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
• wx:if vs hidden

因为wx:if之中的模板也可能包含数据绑定，所有当wx:if的条件值切换时，MINA有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的，如果在初始渲染条件为false，MINA什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA IS NOT APP </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模版

• 使用name属性，作为模板的名字。然后在内定义代码片段
• 使用is属性，声明需要的使用的模板，然后将模板所需要的data传入
• is属性可以使用Mustache语法，在运行时来决定具体需要渲染哪个模板
• 模板拥有自己的作用域，只能使用data传入的数据。

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

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

事件

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

• WXML的冒泡事件列表：

  类型	触发条件
  touchstart	手指触摸
  touchmove	手指触摸后移动
  touchcancel	手指触摸动作被打断，如来电提醒，弹窗
  touchend	手指触摸动作结束
  tap	手指触摸后离开
  longtap	手指触摸后，超过350ms再离开

  注：除上表之外的其他组件自定义事件都是非冒泡事件，如的submit事件，的input事件，的scroll事件，(详见各个组件)

• 事件绑定
  
  • bind事件绑定不会阻止冒泡事件向上冒泡
  • catch事件绑定可以阻止冒泡事件向上冒泡。

• 事件对象

  • 如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

  属性	类型	说明
  type	String	事件类型
  timeStamp	Integer	事件生成时的时间戳,该页面打开到触发事件所经过的毫秒数。
  target	Object	触发事件的组件的一些属性值集合,触发事件的源组件。
  currentTarget	Object	当前组件的一些属性值集合,事件绑定的当前组件。
  touches	Array	触摸事件，触摸点信息的数组,touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。
  detail	Object	额外的信息.

<!--wxml-->
<view bindtap="add"> {{count}} </view>

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

引用

• WXML提供两种文件引用方式import和include。
• import可以在该文件中使用目标文件定义的template

import的作用域

• import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template
• 如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的emplate，但是C不能使用A定义的template

include

• include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置

wxss

• WXSS(WeiXin Style Sheets)是MINA框架设计的一套样式语言，用于描述WXML的组件样式。
• WXSS用来决定WXML的组件应该怎么显示。
• WXSS具有CSS大部分特性

尺寸单位

• rpx：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
• rem：规定屏幕宽度为20rem；1rem = (750/20)rpx 。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

@import 'style.wxss';

内联样式

• MINA组件上支持使用style、class属性来控制组件的样式。
• style接收动态的样式,静态的样式写到wxss文件中
• 动态的样式写到wxss中

选择器

选择器	样例	样例描述
.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组件前边插入内容