一、原生UI组件

1、文本组件 text  /text  行内组件

2、视图容器组件 view  /view  块级组件

3、按钮组件 button  /button  默认独占一行，设置size=mini可以一行多个 （有扩展）

open-type 的合法值

4：input输入框    input /input   默认无边框 （有扩展）

5、image 图片     image /image   组件默认宽度300px、高度225px（只要有该组件就有宽高）（有扩展）

           src ：支持本地/和网络上的图片

           mode ：指定图片裁剪、缩放的模式

  Mode可选值

6、 可滚动视图区域 scroll-view    /scroll-view

使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

Bug & Tip

1. tip: 基础库 2.4.0以下不支持嵌套textarea、map、canvas、video 组件
2. tip: scroll-into-view 的优先级高于 scroll-top
3. tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4. tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

7、滑块视图容器 swiper  /swiper  其中只可放置swiper-item组件，否则会导致未定义的行为。

easing-function 的合法值

change事件 source 返回值

从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下：

1. autoplay 自动播放导致swiper变化；
2. touch 用户划动引起swiper变化；
3. 其它原因将用空字符串表示。

Bug & Tip

1. tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

     swiper-item  /swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。

二、wsxx样式表 （id class :before  nth:child  属性选择器都支持）

   1、支持绝大多数css选择器

   2、自定义属性需要 data-* ,才可以被属性选择器选中

   3、一个手机屏幕被分为750rpx，在iPhone6约等于 1px = 2rpx

  4、@import  “wxss外联样式的相对路径”;          支持导入外联样式表

  5、app.wxss中样式是全局样式，会作用每一个页面。Page下面的wxss是局部样式表，只作用当前页面，当权重相对时，局部         样式优先

三、数据绑定与事件绑定

  简单的页面可以使用 Page() 构造器进行注册

1. 数据定义在data对象，页面使用直接用{{text }} ( 属性还是内容都用花括号，支持三元表达式和简单的运算 ）

Page({  data: {    text: "This is page data."  },  onLoad: function(options) {    // 页面创建时执行  },  onShow: function() {    // 页面出现在前台时执行  },  onReady: function() {    // 页面首次渲染完毕时执行  },  onHide: function() {    // 页面从前台变为后台时执行  },  onUnload: function() {    // 页面销毁时执行  },  onPullDownRefresh: function() {    // 触发下拉刷新时执行  },  onReachBottom: function() {    // 页面触底时执行  },  onShareAppMessage: function () {    // 页面被用户分享时执行  },  onPageScroll: function() {    // 页面滚动时执行  },  onResize: function() {    // 页面尺寸变化时执行  },  onTabItemTap(item) {    // tab 点击时执行    console.log(item.index)    console.log(item.pagePath)    console.log(item.text)  },  // 事件响应函数  viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    }, function() {      // this is setData callback    })  },  // 自由数据  customData: {    hi: 'MINA'  }})

2、bindtap  触摸事件  (阻止事件冒泡   catchtap )

  view bindtap=”ontap”  /view   

     不支持后面跟小括号传参。事件函数定义在js文件与data平级，第一个形参就是事件对象

3、bindinput  输入框输入事件

    通过事件对象 e.detail.value 拿到输入框最新的值

4、文本框与data数据的同步（小程序没有v-model)

   ① bindinput监听文本框，e.detail.value获取最新值来赋值

   ②调用函数this.setData({info: e.detail.value })修改data中的数据

5、事件传参 data-*

     ①在组件中通过自定义属性传参 data-info=”123”

    ②在事件函数中，通过 e.target.dataset.参数名 获取到参数值

四、条件渲染

    1、wx:if=” “  wx:elif=” “    wx:else

    2、 block /block 一次需要判断多个标签，可以用block标签包裹，只起包括作用，不会渲染到页面中。只接收控制属性

    3、hidden=“ ” 条件为true时隐藏。相当于dispalay=none

 五、列表渲染

   1、wx:for={{数组名}}   直接通过{{index}} {{item}}就可以获取到索引和值

     ①wx:key=”index” 用索引做key值

    ②wx:for-item=”v”  wx:for-index=”i” 手动指定每项名和索引名

    ③ *this代表每一项本身    wx:key=”*this”  每一项需要是唯一的字符串或数字

 六、wxs(weixin script)  小程序脚本语言（不支持es56高级语法）官方文档

   ①wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行

   ②wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致

   ③wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API

   ④wxs 函数不能作为组件的事件回调。在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍

   ⑤wxs 遵循了 CommonJS 规范