目录

• 数据绑定
• 事件绑定
• 条件渲染
• 列表渲染
• WXSS 模板样式
• 全局配置
• 页面配置
• 网络数据请求

数据绑定

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

Page({
  data: {
    info: 'init data',
    msgList: [
      {msg: 'hello'},
      {msg: 'world'}
    ],
    imgSrc: 'http://www.itheima.com/images/logo.png'
  }
})

2、在WXML中使用数据

Mustache 语法的主要应用场景如下：
绑定内容
绑定属性
运算（三元运算、算术运算等）

<view class="container">
    <!-- 绑定内容 -->
    <text>\{\{ info \}\}</text>

    <!-- 绑定属性 -->
    <image src="\{\{ imgSrc \}\}" mode="aspectFit"></image>

    <!-- 运算（三元运算、算术运算等）  -->
    <text>\{\{ randomNum > 5 ? '随机数大于5' : '随机数小于等于5' \}\}</text>
</view>

事件绑定

一、事件介绍

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

2、常用事件

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

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

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。
此时，对于外层的 view 来说：
e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

二、代码

<!-- 方法传参跟vue中不同：data-info 传递参数 -->
<button type="primary" bind:tap="tapHandler" data-info="hello wolrd">按钮</button>

<!-- 和 info 进行绑定 -->
<input bindinput="inputHandler" value="\{\{ info \}\}"></input>

page({
    tapHandler(e){
        // 事件对象
        console.log(e)

        // 修改info的值
        this.setData({
            // dataset 是一个对象，包含了所有通过 data-*传递过来的参数项
            info: e.target.dataset.info
        })
    },
    inputHandler(e){
        // e.detail.value 是变化过后，文本框的新值
        console.log(e.detail.value)

        this.setData({
            info: e.detail.value
        })
    }
})

条件渲染

一、wx:if

在小程序中，使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块：
也可以用 wx:elif 和 wx:else 来添加 else 判断：
如果要一次性控制多个组件的展示与隐藏，可以使用一个 标签将多个组件包装起来，并在 标签上使用 wx:if 控制属性，示例如下：

<block wx:if="\{\{type == 0\}\}">
  <view>男1</view>
  <view>男2</view>
</block>

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

<block wx:else>
  <view>保密1</view>
  <view>保密2</view>
</block>

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

二、hidden

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

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

三、区别

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

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

列表渲染

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

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。
使用 wx:for-index 可以指定当前循环项的索引的变量名
使用 wx:for-item 可以指定当前项的变量名

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

Page({
  data: {
    cars:[
      { id:0, name: '特斯拉' }, 
      { id:1, name: '问界' }, 
      { id:2, name: '小米' }, 
    ],
  }
})

<view wx:for="\{\{cars\}\}" wx:key="id">
  <text>\{\{index\}\}</text> - <text>\{\{item.name\}\}</text>
</view>

<view wx:for="\{\{cars\}\}" wx:for-index="idx" wx:for-item="car" wx:key="id">
  <text>\{\{idx\}\}</text> - <text>\{\{car.name\}\}</text>
</view>

WXSS 模板样式

一、WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。

WXSS 具有 CSS 大部分特性，
WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。

与 CSS 相比，WXSS 扩展的特性有：
rpx 尺寸单位
@import 样式导入

二、rpx

1、什么是 rpx 尺寸单位

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

2、rpx 的实现原理

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。 在较小的设备上，1rpx 所代表的宽度较小
在较大的设备上，1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

3. rpx 与 px 之间的单位换算

在 iPhone6 上，屏幕宽度为375pt，共有750个物理像素，等分为 750rpx。则：
750rpx = 375pt = 750 物理像素
1rpx = 0.5pt = 1物理像素

官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
开发举例：在 iPhone6 上如果要绘制宽100pt，高20pt的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。

三、样式导入

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

@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：

helloMP/components/common.wxss 文件

.small-p{
  padding: 5px;
  color: red;
}

helloMP/pages/day02/day02.wxss 文件

@import "../../components/common.wxss";

.container {
  background-color: lightgray;
}

全局样式和局部样式

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

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

注意：
当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

pages:记录当前小程序所有页面的存放路径

window:全局设置小程序窗口的外观

tabBar:设置小程序底部的 tabBar 效果

style:是否启用新版的组件样式

一、window

在app.json文件内配置

{
 "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "黑马程序员",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  }
}

二、tabBar

1、什么是 tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
底部 tabBar
顶部 tabBar

注意：
tabBar中只能配置最少 2 个、最多 5 个 tab 页签
当渲染顶部 tabBar 时，不显示 icon，只显示文本

2、tabBar 的 6 个组成部分

backgroundColor：tabBar 的背景色
selectedIconPath：选中时的图片路径
borderStyle：tabBar 上边框的颜色
iconPath：未选中时的图片路径
selectedColor：tab 上的文字选中时的颜色
color：tab 上文字的默认（未选中）颜色

3、tabBar 节点的配置项

在app.json内的配置

{
  "tabBar": {
    "color": "#ff00ff",
    "selectedColor": "#ff0000",
    "backgroundColor":"#dddddd",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }]
  }
}

4、每个 tab 项的配置选项

页面配置

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

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

在message.json文件内

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "消息页面",
  "backgroundColor": "#ff0000",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true
}

网络数据请求

一、小程序管理后台配置

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：
只能请求 HTTPS 类型的接口
必须将接口的域名添加到信任列表中

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口
配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意事项：
域名只支持 https 协议
域名不能使用 IP 地址或 localhost
域名必须经过 ICP 备案
服务器域名一个月内最多可申请 5 次修改

配置好后：IDE右上角详情 - 项目配置 - 域名信息 查看配置的域名信息

二、发送请求

1、get请求

<!-- get请求 -->
<button type="primary" bind:tap="sendReqeust">Get请求</button>

Page({
  sendReqeust(e){
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: {
        name: 'zs',
        age: 22
      },
      success: function(res){
        console.log(res)
      }
    })
  }
})

2、post请求

<!-- post请求 -->
<button type="primary" bind:tap="sendPost">Post请求</button>

Page({
  sendPost(){
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: 'POST',
      data: {
        name: 'ls',
        gender:'男'
      },
      success: (res) => {
        console.log(res)
      }
    })

  }
})

3、页面刚加载时

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。
此时需要在页面的 onLoad 事件中调用获取数据的函数，示例代码如下：

Page({
  onLoad: function(options){
    this.sendPost()
  }
})

三、注意事项

1、跳过 request 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。
右上角详情 - 本地设置 - 不校验合法域名、web-view… 这个开关打开
注意：
跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

2、关于跨域和 Ajax 的说明

跨域问题只存在于基于浏览器的 Web 开发中。
由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，
由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。

行者常至，为者常成！