微信小程序入门基础（2）

1.数据绑定

数据绑定的运行与逻辑

小程序里面都是通过数据绑定的形式进行显示数据
小程序的数据只有出现在data中的数据才能进行数据绑定，才能进行数据显示

小程序只能单向数据绑定（自动）
就是页面上的值改动，不能自动改变JS。但是可以通过其他方式进行改变，比如事件的方式

一般是页面加载时就要从服务器去取数据了也就是在onLoad函数里。setData函数的作用是把从服务器获取的数据复制到data里边，这样才能实现数据绑定。this.setData()

以下将展示小程序提供的更加多元化的复杂的数据绑定方式。

index.wxml
 <!--数据绑定--内容-->
<view>{
  {message}}</view>

<!--数据绑定--组件属性-->
<view id="item-{
  {id}}">组件属性id-{
  {id}}</view>

<!--数据绑定---控制属性-->
<view wx:if="{
  {condition}}">控制属性{
  {condition}}</view>

<!--数据绑定---三元运算-->
<view hidden="{
  {flag ? true : false}}">Hidden--{
  {flag}}</view>

<!--数据绑定---算数运算-->
<view>{
  {a + b}} + {
  {c}} + d</view>

<!--数据绑定---逻辑判断-->
<view wx:if="{
  {length > 5}}">6</view>

<!--数据绑定---字符串运算-->
<view>{
  {"Hello  " + name}}</view>

<!--数据绑定---数组组合-->
<view wx:for="{
  {[zero, 1, 2, 3, 4, 5, 6]}}">{
  {item}}</view>

<!--数据绑定---对象-->
<!--最终组合成的对象是{for: 1, bar: 2}-->
<template is="objectCombine" data="{
  {for: x, bar: y}}"></template>

<!--数据绑定---扩展运算符 ... 来将一个对象展开-->
<!--最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}-->
<template is="objectCombine" data="{
  {...obj1, ...obj2, e: 5}}"></template>

<!--数据绑定---对象的 key 和 value 相同-->
<!--最终组合成的对象是{foo: 'my-foo', bar:'my-bar'}-->
<template is="objectCombine" data="{
  {foo, bar}}"></template>

index.js
Page({
  data:{
    //内容
    message:'Hello MINA!',

    //组件属性
    id: 0,

    //控制属性
    condition: true,

    //三元运算
    flag:false,

    //算数运算
    a: 1,
    b: 2,
    c: 3,

    //逻辑判断
    length: 6,

    //字符串运算
    name: 'MINA',

    //数组组合
    zero: 0,

    //对象
    x: 0,
    y: 1,

    //对象展开
    obj1: {
        a: 1,
        b: 2
    },
    obj2: {
        c: 3,
        d: 4
    },
    e: 5,

    //对象key和value相同
    foo: 'my-foo',
    bar: 'my-bar'
  },
})

附注：小程序中的true/false

vertical = 'false'

vaertical = '{
  {false}}'

JS补充知识：引号说明值是字符串，字符串’false’值会被判定是true，非空字符串在js中判定是true。 如果要用的话加上’{ {false}}’。 例如 vertical = ‘{ {false}}’

2.调试工具 AppData panel

微信小程序调试工具：Wxml Panel、Sources Panel、AppData Panel、Storage Panel、Network Panel、Console Panel、Sensor Panel

AppData panel 用于显示当前项目运行时小程序 AppData 具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。

3.缓存

本地数据缓存是小程序存储在当前设备上硬盘上的