<!--index.wxml-->

<view class="container">

<!--

  the framework : make the developer follows the fixed regulation to write code

  1,where is the data? [in the data attribute of the html page object ]

  2,binding to where? [wherever you want just use mustache grammer{{}}]

-->

<!--{{}} mustache grammer -->

<text>{{message}}</text>

<text>{{person.name}}</text>

<!-- you can output inner tag; or in the attribute of the tag  -->

<view class="{{viewClassName}}"></view>

<!-- you can also add to the inner class 

  mustache grammer {{}} use :

  1,inner elements

  2, attribute of the elements

  3, can't use in tag name or attribute; just for value

-->

<view class="add {{viewClassName}}"></view>

<text>{{'hello'}}</text>

<text>{{11111}}</text>

<text>{{1111 + 9999}}</text>

<text>{{100>50?'okay, you are right~':'sorry :D'}}</text>

<!-- checkbox add the checked='false' is also checked;  cause they think its a string;

you need to use {{}} : if the grammer is under misunderstand situation use {{}}

-->

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

</view>

Index.js

// provide the data to the html page

// data is a briage between interface and logic

Page({

  data: {

    message: "hello Lindsay",

    person: {

      name: 'luojin',

      age: 20,

      major: 'computer science'

    },

    viewClassName: 'hi'

  }

})

<!-- 四，列表渲染 list data render  -->

<!--

    1, you need to know the loop content of the html structure

    2，delete the same content， just remain one

    3, add wx:for = 'the data/array / object you want to through '

    4, in the tag (loop) ,use : item = element that you want to though

    if the whole attribute has the [item] keyword, you need to change item keyword

    像这样:  wx:for-item=“” 起别名的效果

    index 可以拿到索引 wx:for-index="bbb" 可以修改index的名字，如果有重名的话

 -->

<view>

  <view wx:for="{{todos}}" wx:key="key"  wx:for-item="aaa">

    <text>{{index}}</text>

    <checkbox checked="{{item.completed}}"></checkbox>

    <text>{{aaa.name}}</text>

  </view>

  <!-- <view>

    <checkbox></checkbox>

    <text>js</text>

  </view>

  <view>

    <checkbox></checkbox>

    <text>css</text>

  </view>

  <view>

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

    <text>html</text>

  </view> -->

</view>

</view>

按钮的使用：

<button bindtap="buttonTapHandle">click </button>

App.js 中的函数代码：

Page({

  buttonTapHandle: function(e){

    console.log(111);

    //  console.dir()将一个对象以树状的形式打印到控制台

    console.dir(e);

  },

<!-- 3，事件冒泡 

    1）基本的事件使用，就是通过给组件 添加一个 ‘bind + 事件名’ 的属性，属性的值指向一个定义在当前页面对象中的js 方法；

    2）冒泡：两个元素相互嵌套，点击内部，外部也会触发；

    3）阻止冒泡：bindtap 换成 catchtap=‘’

  -->

<view bindtap="outerHandle"  style='width:50px;height:50px;background-color:red'>

  <view catchtap="innerHandle" style='width:30px;height:30px;background-color:blue'></view>

</view>

App.js代码

Page({

  innerHandle: function (){

    console.log("inner")

  },

  outerHandle: function (){

    console.log("outer")

}

})

<!-- 4，事件传参

    1）基本使用：bind(XXX) / catch(XXX)

    2）小程序事件冒泡和html中 不一样，这里使用 catch～

    3）如果需要给事件处理函数 指定参数的话，只能通过 dataset 这样方式 ，就是给元素添加 data-

    通过e.target拿到点击的元素 dataset指以data-开头的数据

    data-hello-name="luojin"， 会自动变成驼峰命名法

-->

<button bindtap="buttonTapHandle2" data-name="luojin">事件传参 </button>

buttonTapHandle2: function (e) {

    //data-... 给dom元素记录数据用的

    // 在这里中的this 事件处理函数中的 指向还是页面对象 ！！！ 和html开发不一样

    // console.log(this)

    console.log(e.target.dataset) //对象

  }

SetData()

改变数据

6 

<icon type="download"></icon>

  <icon type="download" size="40px" color="blue"></icon>

  <text>this is a text</text>

  <rich-text space="emsp">this is a text</rich-text>

<progress percent="10" show-info stroke-width="6"/>

<-- 表单控件

  button：type=“default” / primary / warn 主要用来控制类型

  size： default 和 mini

  plain 变透明

  disabled 是否禁用

  loading 是否带有加载图标

  form-type 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件

  hover-class 控制按下去的样式

-->

<button type="default">默认按钮</button>

<button type="primary" size="default" plain>primary按钮</button>

<button type="warn" size="mini" loading>warn按钮</button>

<button hover-class="btn-active">hover class</button>

<!-- 5.3 操作反馈

通过调用方法API 实现，

-->

<button type="primary" bindtap="actionFeedback">操作反馈..</button>

actionFeedback: function(){

    // 当点击按钮式触发

    // console.log(1111)

    // 交互操作组件，必须通过API 调用

    // 1，wx.showActionSheet

   /* wx.showActionSheet({

      itemList: ["A","B","C"], //显示出来的默认列表

      success: function(res){ //点击其中任意一个的回掉函数

        if(!res.cancel){ //res.cancel是否点击取消按钮

          console.log(res.tapIndex) //res.tapIndex 点击的下标

        }

      }

    }) */

    // 2，莫泰框

/* wx.showModal({

      title: 'nihao',

      content: '这是一个莫泰框',

      success: function(res){

        if(res.confirm){

          console.log("用户点击确定")

        }

      }

    }) */

    // 3， 通知

    wx.showToast({

      title: 'hello',

      icon: 'success', // 只支持success 和loading

      duration: 2000

    })

  },