微信小程序开发2

wxml语法
1.数据绑定的基本原则：
在data中定义数据：在页面对应的js文件中把数据定义到data对象即可

			  在wxml中使用数据：把data数据绑定到页面渲染，使用mustache语法（双大括号）将变量包起来即可

mustache语法的应用场景
绑定内容
绑定属性
运算（三元运算 算术运算）

Page({
  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world',
    randNumber:Math.random()*10,
    random:Math.random().toFixed(2),
    imgSrc:'https://i0.hdslb.com/bfs/archive/956de2627e2cc1a9da53ea1d8762cea33e8ea6e5.png@3840w_360h_1c_90q.webp'
  },

<!-- 绑定属性 -->
<image src="{{imgSrc}}" mode="widthFix"></image>
<!-- 绑定内容 -->
<view>{{info}}</view>
<!-- 三元运算 -->
<view>{{randNumber>=5? '数字等于大于5':'数字小于等于5'}}</view>
<!-- 算术运算 -->
<view>{{random*100}}</view>

2.事件绑定
事件是指渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理

<!-- 事件绑定 -->
<button type="primary" bindtap="btnTap">按钮</button>
  // 定义按钮的事件处理函数
  btnTap(e){
    console.log(e)
  },

通过调用this.setData(dataObject)方法给页面data数据重新赋值

<button type="primary" bindtap="countadd">按钮</button>
  countadd(){
   this.setData({
     count:this.data.count+1
     
   })
  },

事件传参

<button type="primary" bindtap="btnTap2" data-info="{{2}}" >按钮</button>
btnTap2(e){
   this.setData({
     count:this.data.count+e.target.dataset.info
     
   })
  }, 

bindinput语法格式
在小程序中，通过inout事件来响应文本框的输入事件
通过bindinput为文本框绑定输入事件

<input bindinput="inputTap"></input>

在页面的.js文件中定义事件的处理函数

inputTap(e){
    console.log(e.detail.value)
//e.detail.value变换后文本框最新的值
  },

实现文本框和data之间数据同步

Page({
  data: {
    msg:'您好'
  }, 
  <view>
<input value="{{msg}}" bindinput="inputHandler"></input>
</view>
input{
  border: 1px solid red;
 margin: 5px;
 padding: 5px;
 border-radius: 3px;
}
  inputHandler(e){
this.setData(
  {
    msg:e.detail.value
  }
)
  }

条件渲染
wx：if

Page({
  data: {
   、
    type:1,
  }, 
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

结合block使用wx-if，可以避免渲染一些不必要的结点

<block wx:if="{{false}}">
<!-- 可以同时控制；两个模块的出现和隐藏且不渲染出来 -->
  <view >男</view>
<view >女</view>
</block>

hidden
在小程序中直接使用hidden="{{condition}}"控制元素显示和隐藏

<view hidden="{{flag}}">条件为true则隐藏，false则显示</view>

wx:for
通过wx:for可以根据指定数组循环渲染重复组件结构