「小程序学习」_3

currentTarget和target的区别

属性	类型	说明
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合

tabBar

如果要在某页面使用tabBar，则一定要把这个页面加入到list中。例如，希望在posts页面中使用tabBar：

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/movies/movies",
        "text": "电影"
      },
      {
        "pagePath": "pages/posts/posts",
        "text": "文章"
      }
    ]
  },

switchTo()跳转到tabBar

navigateTo()和redirectTo()不支持跳转到tabBar:

使用switchTo()进行跳转:

tabBar的属性

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

WXSS中的一些问题

margin和padding的区别

margin（外间距）是指从自身边框到另一个容器边框之间的距离，就是容器外距离。

padding（内间距）是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

vertical-align

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

API接口

    wx.request({
      url: 'https://douban.uieee.com/v2/movie/top250',
      success: function(res){
        console.log(res);
      },
      fail: function(){
        console.log("failed");
      }
    })

这里，出现了错误：

但是注意到，错误的提示并不是预想中输出到console的failed,这是因为request()函数执行是成功的，即请求成功，访问到了该网址，但是由于使用错误，该网址返回了400(Bad Request)。

fail函数只在网络状况不好（比如断网的时候）执行。

JavaScript for循环

JavaScript for/in 语句遍历对象的属性：

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

这里，每次循环出来的x的值分别是：fname lname age

settedKey传递

  processDoubanData: function(moviesDouban, settedKey) {
    var movies = [];
    ...
    ...
    var readyData = {};
    readyData[settedKey] = movies;
    this.setData(readyData);
  },

通过将settedKey作为属性传入readyData的方式，传递settedKey。

数据绑定

之前不太懂数据绑定关于布尔值运算这块的内容，查了挺多，最后突然想到，为什么不看看官方文档呢Orz官方文档讲的真的好太多了。

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

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

内容

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

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

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

view中的内容为 3 + 3 + d。

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

组合

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

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})

最终组合成数组[0, 1, 2, 3, 4]。

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

最终组合成的对象是 {for: 1, bar: 2}

也可以用扩展运算符 ... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

如果对象的 key 和 value 相同，也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

最终组合成的对象是 {a: 5, b: 3, c: 6}。

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>