微信小程序模板与配置（一）wxml模板语法渲染页面结构

一、数据绑定

基本原则：在data中定义数据，在wxml中使用数据

1、在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中即可： 

/**

   * 页面的初始数据

   */

  data: {

    info: 'hello world'

  },

输出结果：

2、Mustache语法/插值表达式的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可，语法格式为：<view>{{要绑定的数据名称}}</view>

<view>{{info}}</view>

3、Mustache语法的应用场景

动态绑定内容（案例如2）、动态绑定属性、运算（三元运算、算术运算等）

（1）动态绑定属性

/**js文件*/
/**
   * 页面的初始数据
   */
  data: {
   imgSrc: '/pages/image/1.jpg'，//本地图片
 //  imgSrc: 'http://www.itheima.com/images/logo.png' //外部链接图片
},

<!--wxml文件-->
<image src="{{imgSrc}}"></image> 

输出结果：

（2）三元运算

/**js文件*/
  /**
   * 页面的初始数据
   */
  data: {
    // 10以内的随机数字
    RandomNum1: Math.random() * 10  
  },

<!--wxml文件-->
<view>{{RandomNum1 >=5?'数字大于或等于5':'数字小于5'}}</view>

输出结果：

调试器查看输出结果：

找到调试器-AppData，点击“编译”，

（3）算术运算

总结：

以上演示的所有代码

/**js文件中的代码*/
Page({
  /**
   * 页面的初始数据
   */
  data: {
//动态绑定内容
info: 'hello world',
//动态绑定属性
     imgSrc: '/pages/image/1.jpg',
    // 10以内的随机数字
    RandomNum1: Math.random() * 10,
    //算术运算：生成一个带两位小数的随机数
    RandomNum: Math.random().toFixed(2)
  },
})

<!--wxml文件-->
<!—动态绑定内容 -->
 <view>{{info}}</view> 
<!—动态绑定属性-->
 <image src="{{imgSrc}}"></image>  
<!—三元运算-->
  <view>{{RandomNum1 >= 5 ? '数字大于或等于5' : '数字小于5'}}</view> 
<!—算术运算 -->
<view>生成100以内的随机数：{{RandomNum * 100}}</view> 

注：编写边看实现效果，全部代码写完可能只能显示最后两条，清除缓存重新编译即可。

二、事件绑定

什么是事件？事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

有关渲染层和逻辑层的详细文档参考：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

1、小程序中常用的事件

2、事件对象的属性列表：

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下：

3、target和currentTarget区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。

简单来说，点击“按钮”，如果使用e.target，点击“按钮”才会起作用；如果使用e.currentTarget，点击“view”也会起作用。

4、bindtap的语法格式：

在小程序里面，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

通过bindtap,可以为组件绑定tap触摸事件，语法如下：

<!--wxml文件-->
<!--事件绑定-->
<button type="primary" bind:tap="btnTapHandler">按钮</button>

//在页面的.js文件中定义对应的事件处理函数，时间参数通过形参event（一般简写成e）来接收：
//js文件中：
//定义按钮的事件处理函数
  btnTapHandler(e){
    console.log(e)
  },

测试效果：

三、事件传参与数据同步

在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

wxml文件：

<button type="primary" bind:tap="CountChange">+1</button>

/**js文件：*/
 /**
   * 页面的初始数据
   */
  data: {
count: 0
},
 //+1 点击事件的处理函数
  CountChange(){
    this.setData({
      count: this.data.count + 1
    })
  },

1、事件传参：

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

小程序会把bindtap的属性值，统一当作事件名称来处理。

e.g 该代码不会工作

<button type=”primary” bindtap=’btnHandler(123)’>事件传参</button>

这相当于要调用一个名为btnHandler(123)的事件处理函数。

正确的做法是 ：

可以为组件提供data-*自定义属性传参，其中*代表参数名称，示例代码如下：

<!—wxml页面-->

<!--事件传参-->

<!--显示数值-->

<button type="primary"  bind:tap="btnTap2" data-info="{{2}}">+2</button>

<!--显示字符串-->

<button type="primary"  bind:tap="btnTap3" data-info="2">+2</button>

在事件处理函数中，通过event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下:

//事件绑定的处理函数   this.data.count表示原来的值  e.target.dataset.info表示点击按钮的值

  btnTap2(e){

    this.setData({

      count: this.data.count + e.target.dataset.info

    })

  },

2、bindinput的语法格式

在小程序里面，通过input事件来响应文本框的输入事件，语法格式如下：

通过bindinput，可以为文本框绑定输入事件

<!—wxml页面—>

<!--bindinput-->

<input bindinput="inputHandler"></input>

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

 //bindinput值的获取

  inputHandler(e){

    console.log(e.detail.value)

  },

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

步骤：

（1）定义数据

/** js*/

data: {

msg: ‘你好’

},

（2）渲染结构

<!—wxml-->

<input value="{{msg}}" bindinput="inputHandler"></input>

（3）美化样式

/*wxss页面*/

input {

  border:1px solid purple;

  margin: 5px;

  padding: 5px;

  border-radius: 3px;

}

（4）绑定input事件处理函数

        (在页面上输入值，同步到原来的值)

/** js页面*/

inputHandler(e){

    this.setData({

      msg: e.detail.value

    })

  },

在文本框中输入值，会返回

四、条件渲染：

1、wx:if

在小程序中，使用wx:if=”{{condition}}”来判断是否需要渲染该代码块：

也可以用wx:elif 和wx:else来添加else判断：

/**js*/

data: {

type: 1

},

<!—wxml- ->

<!--条件渲染-->

<view wx:if="{{type === 1}}">男</view>

<view wx:elif="{{type === 2}}">女</view>

<view wx:else>保密</view>

测试结果：

2、结合<block>使用wx:if

如果一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，示例如下：

<!—wxml页面-->

<!--wx:if后就只有true和false两种值，true就显示，false就隐藏-->

<block wx:if="{{false}}">

<view>男</view>

<view>女</view>

<view>保密</view>

</block>

注：<block>并不适用一个组件，它只是一个包裹性质的容器，不回在页面中做任何渲染。如果使用<view>，就会渲染出一个组件，就像是两个div外面还有一个div。

3、hidden

在小程序中，直接使用hidden-“{{condition}}”也能控制元素的显示与隐藏：

js文件：

data: {

flag: true

},

wxml文件：

<!--hidden-->

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

4、wx:if和hidden的区别

（1）运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏；

hidden以切换样式的方式（display:none/block;），控制元素的显示与隐藏

<!—wxml页面 -->

<!--hidden与wx:if的对比-->

<view hidden="{{!flag}}">如果条件为true就隐藏，为false就显示：</view>

<view wx:if="{{flag}}">这是使用wx:if展示的元素</view>

如果flag为true,

若flag为false,

简单来说，当条件不符合时，wx:if判断的值是不存在的。而hidden隐藏的是真实存在的。

使用建议：

频繁切换时，建议使用hidden

控制条件复杂时，使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

五、列表渲染

1、wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

js文件中定义数组：

data: {

 arry: ['OPPO','MI','vivo']

},

wxml文件中渲染列表：

<!--列表渲染-->

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

索引是：{{index}},item项是{{item}}

</view>

默认情况下，当前循环的索引用index表示；当前循环项用item表示。

手动指定索引和当前项的变量名（不常用）

使用wx:for-index可以指定当前循环项的索引变量名

使用wx:for-item可以指定当前项的变量名

示例代码如下：

<!--指定索引项和变量名-->

<view wx:for="{{arry}}" wx:for-index="dex" wx:for-item="items">

索引是：{{dex}},item项是{{items}}

</view>

输出结果同上。

2、wx:key的使用

类似于Vue列表渲染中的 :key,小程序在实现列表渲染是，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

/**js文件中定义对象*/

data: {

/**名字一定要用’’包裹，否则无法显示*/

List: [

      {id: 1,name:'小芳' },

      {id: 2,name: '小明'},

      {id: 3,name: '小王'}

    ]

},

<!—wxml页面中-->

<!—id不能使用{{}}包裹，如果数组中没有定义id，也可以写成index - ->
<view wx:for="{{List}}" wx:key="id">{{item.name}}</view>