小程序（二）

1. WXML 模板语法

1.1 数据绑定

• 在data中定义页面数据
• 在 WXML 中使用数据

页面的数据：

Page({
    data:{
        info:'init data'
    }
})

页面结构：

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

1.2 事件绑定

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

（1）小程序中常用的事件：

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

        当事件回调触发时，会收到一个事件对象 event 。

（2）  通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值。

Page({
    data:{
        count:0
},


changeCount(){
    this.setData({
        count:this.data.count+1
    })
  }
})

（3）事件传参

        可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字。

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

// info 参数的名字
// 数值2  参数的值

        在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值。

（4）文本框与data之间的数据同步

        定义数据：

Page({
    data:{
        msg:'hello!'
    }
})

        渲染结构：

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

        绑定 input 事件处理函数：

// 文本框内容改变的事件
iptHandler(e){
    this.setData({
        msg:e.detail.value
    })
}

1.3 条件渲染

（1）wx:if

        在小程序中，使用 wx:if="{{xxx}}" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加 else 判断。      

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

         注意： <block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

（2）hidden

          在小程序中，使用 hidden="{{xxx}}" 控制元素的显示与隐藏。

（3）wx:if 与 hidden 的对比

           

         ① 运行方式不同

•  wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
•  hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

        ② 使用建议

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

  1.4 列表渲染

•  通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构。
•  使用 wx:for-index 可以指定当前循环项的索引的变量名。
•  使用 wx:for-item 可以指定当前项的变量名。
• 在实现列表渲染时，要为渲染出来的列表项指定唯一的 key 值， 从而提高渲染的效率。

2. WXSS 模板样式

2.1 rpx

        rpx 是微信小程序独有的，用来解决屏适配的尺寸单位。

        rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕， 在宽度上等分为 750 份。小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

2.2 样式导入

        使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

2.3 全局样式

        定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

2.4 局部样式

         在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。

3. 全局配置

        app.json 是小程序的全局配置文件。常用配置项：

• pages：记录大年小程序所有页面的存放路径
• window：全局设置小程序窗口的外观。
• tabBar：设置小程序底部的 tabBar 效果。
• style：是否启用新版的组件样式。

 （1）window节点配置项：

 （2）tabBar

        tabBar 是移动端应用常见的页面效果，用于实现多页面快速切换。

        tabBar节点的配置项：

4. 页面配置

        小程序中每个页面的 .json 配置文件，用来对当前页面的窗口外观、页面效果进行配置。

        页面配置配置项：  

 5. 网络数据请求

小程序中网络数据请求：

• 只能请求 HTTPS 类型的接口。
• 必须将接口的域名添加到信任列表中。

调用微信小程序提供的 wx.request() 方法，可以发起 GET/POST 数据请求。 

wx.request({
    url:'请求地址'
    method:'GET'
    data：{
        name:'zs'
        age:18
    },
    success:(res)=>{
        console.log(res)
    }
})