微信小程序学习笔记二（数据绑定）

小程序介绍

    利用 XML + CSS + JS 编写移动应用程序

微信小程序的一大特性就是： 动态绑定数据。

数据绑定（基本语法）

假设在pages内的index文件夹下：

index.js中的代码

Page({
    //有一个data属性
    data : {
        greeting : "Hello World",
        textColor : "blue",
        isShowError : false,
        isLoading : true,
        num1 : 100,
        num2 : 200,
        username : Rose,
        languages : {
            {name:"Chinese",country:"China"},
            {name:"Korean",country:"Korea"},
            {name:"English",country:"British"}
        }
    }
})

index.wxml中代码

{{内容}}：出现双括号，就会使用框架去查询index.js中data属性中是否有“ 内容 ”这个成员，如果有则显示。

① 绑定标签内容

<view>{{greeting}}view>

② 绑定标签属性

<view class="txt-{{textColor}}">这行文字会显示成蓝色view>

③ 三元运算

<view>{{isLoading ? '加载中......' : '加载完毕！！！'}}view>

④ 算术运算

<view>{{num1}} + {{num2}} = {{num1 + num2}}view>

⑤ 字符串运算

 <view>{{"Hello," + username}}view>
 

⑥ 逻辑运算

<view wx:if="{{num1 + num2 === 300}}">总数等于300view>
 

⑦ 组合数据

<view wx:for="{{[1,2,3,4,5,6,num1,num2]}}" wx:for-item="n">{{n}}view>

⑧ 组合对象

<template name="t1">{{val1}} | {{val2}}template>

<template is="t1" data="{{val1:num1,val2:num2}}">template>

⑨ 简单的条件渲染

<view wx:if="{{isShowError}}">
    <text class="error-msg">text>
view>

⑩ 带分支的条件渲染

<view wx:if="{{num1 > 100}}">1view>
<view wx:elif="{{length > 50}}">2view>
<view wx:else>3view>

11 . 用来进行包含了多个组件的条件渲染

<block wx:if="{{true}}">
    <view>view1view>
    <view>view2view>
block>

12 . 列表选渲染

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{languages}}" wx:for-index="i" wx:for-item="langu">
    {{i}} : {{langu.name}} : {{langu.country}}
view>

注意：

<view wx:for="array">{{item}}view>


<view wx:for="{{['a','r','r','a','y']}}">{{item}}view>

重点：

<view wx:for="{{array}} ">view>

<view wx:for="{{['a','r','r','a','y']+' '}}">

13 . 模板（可重用）

    
    <template name="pro1">
        <view>
          <text>Name : {{name}}text>
        view>
        <view>
          <text>Age : {{age}}text>
        view>
    template>

    
    <template is="pro1" data="{{name:"Rose",age:20}}">template>

    

14 . 引入其他文件中的模板

1 . 使用：导入文件中的template模板

<import src="templates/pro1.wxml" />


<template is="pro1" data="{{name:'Jack',age:20}}">template>

2 . 使用：相当于将文件里的内容赋值到include处

<include src="templates/banner.wxml" />

15 . 对象

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



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

事件机制

在小程序中，绑定事件有两种方法

① bind方法

     使用bind方法，可以接受冒泡事件

② catch方法

     若使用了catch事件后，就不会再往上冒泡，会在当前元素截止。

<view class="outer" bindtap="outerTap">
    <view class="center" catchtap="centerTap">
        <view class="inner" bindtap="innerTap">view>
    view>
view>

//index.js中的代码
Page({
  outerTap : function (event) {
        console.log("outer");
        console.log(event);
  },
  centerTap : function (event) {
        console.log("center");
        console.log(event);
  },
  innerTap : function (event) {
        console.log("inner");
        console.log(event);
  }
})