WXML模板语法

1.WXML模板语法--数据绑定

1.1在data中定义数据

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

1.2{{}}语法

<!--.js文件-->
data: {
    msg:'努力学习',
    url:'https://img2.baidu.com/it/u=579782103,1879316808&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1679418000&t=0753bfff4676b1118982af4cbd478ee9',
    num:Math.random()*10,
  },

<!--wxml文件-->
<!--{{}}的使用-->
<!--用在绑定内容-->
<view>{{msg}}</view>

<!--用在绑定属性-->
<image src="{{url}}"></image>

<!--用在运算上-->
<view>{{2+4}}</view>
<view>{{6>7?'桃花':'财运'}}</view>
<view>{{num>5?'大于5':'小于5'}}</view>

1.3在wxml中使用数据

1.3.1在wxml的组件标签内使用数据，即绑定内容

在wxml的组件标签内使用数据用{{}}把定义在.js的data中的数据放在{{}}里面，即完成数据的绑定

1.3.2在wxml的组件标签属性内使用数据，即绑定属性

属性="{{绑定的数据}}"

1.3.3可以在{{}}中写表达式（三元运算、算数运算等）

2.WXML模板语法--事件绑定（以bindtap举例）

2.1什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。(在wxml绑定事件，该事件触发一个写在js文件中的函数)

2.2小程序常用的事件

类型： (1)tap:类似于html的click事件，这里是触摸后马上离开。 在wxml按照写成bindtap或者bind:tap来使用 (2)input:文本框的输入事件。在wxml按照bindput或者bind:input来使用。 (3)change:状态改变时触发。在wxml按照bindchange或者bind:change来使用

2.3事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，不用写在参数中，也可以直接拿到
这个event事件对象，包含了以下属性： 该事件的属性type，触发事件的组件的一些属性值集合target，当前组件的一些属性值集合currentTarget，额外的信息detail

2.4target和currentTarget的区别

target是触发事件的源头组件，而currentTarget是当前事件所绑定的组件 如：

<view style="width:200px;height:100px;background:pink;" bindtap="handler2">
  <button>点击触发事件2</button>
</view>

当点击里面的button时，事件会冒泡到最外层，最外层的view绑定的事件因此被触发。此时targe触发事件的组件是里层button，而currentTarget事件所绑定的组件是最外层的view。
当点击最外层的view时，事件会被触发，此时target触发事件的组件是最外层的view组件，而不是里层的button。而currentTarget事件所绑定在的组件依旧是view。

2.5事件传参

默认形式参数第一个是事件对象（事件对象只需要在形式参数接收，不需要在实际参数处传了），第一后面的才是传进来的参数是拿不到的，打印出来是undefined
小程序的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数（也就是说不能在调用函数名的括号后传递参数，小程序会默认括号里的东西一并是函数名）
怎么办呢？
(1)可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，比如说data-age="{{2}}",参数名为age.
(2)在函数处理中，通过event.target.dataset.参数名才能拿到具体参数的值.

在.wxml文件中

<!--事件传参不能像vue一样写在函数名后括号内，应该使用 data-* 属性-->
<view bindtap="handler3" data-age="{{3}}">点击触发事件3</view>

在.js文件中

handler3(e,a){
    //传进来的参数不能通过写在括号里拿到，拿不到的，结果为undefined
    //console.log(a);//undefined
    //在函数处理中，通过event.target.dataset.参数名才能拿到具体参数的值
    console.log(e.target.dataset.age);//3
  },

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

通过this.setData(dataObject)方法，可以给页面data中的书库重新赋值，如： 在.wxml文件中

<view bindtap="handler4">点击修改count</view>
<view>{{count}}</view>

在.js文件中

data: {
    count:0,
  },
  handler4(){
    //console.log(this);//整个Page中的属性或者方法
    //修改data中的count
    //this.data.count=this.data.count+1;//无效
    //console.log(this.data.count++);//每次点击可以打印出新值
    //那么怎么办呢
    this.setData({
      count:this.data.count+1,//++无效
    })
  },

3.input事件

3.1bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，当往文本框输入值的时候，会触发绑定的写在.js的事件处理函数

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

在.wxml文件

<input bindinput="inputhandler" style="border:'1px solid black';width:100px;height:10px;background:skyblue"></input>
<view>{{inputcontent}}</view>

在.js文件

inputhandler(e){
    console.log(e);//当输入东西时，才会触发函数
    console.log(e.detail.value);//e.detail.value是变化过后，文本框最新的值
    this.setData({
      inputcontent:e.detail.value,//实现数据双向绑定
    })
  },

3.WXML模板语法--条件渲染

3.1wx:if wx:elif wx:else

在小程序中，使用wx:if="{{false/true}}"(布尔值要放在双引号或者单引号内）来判断是否要渲染该代码块

<view wx:if="{{1==2}}">你好</view>
<view wx:elif="{{1==3}}">不怎么好</view>
<view wx:else>不好</view>

3.2结合使用wx:if

如果要一次控制多个组件，并且不想增加组件结构，可以使用标签将多个组件包装起来，并在标签上使用wx:if控制属性（注意：并不是一个组件，他只是一个包裹性质的容器，不会在页面中做任何渲染）

<view wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
  <view>view3</view>
</view>
<!--最外层block不会做渲染-->
<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
  <view>view3</view>
</block>

3.3hidden(相当于v-show)

直接使用hidden="{{true/false}}"也能控制元素的显示与隐藏

3.4wx:if和hidden的区别

共同：都是用来对元素进行显示或者隐藏的
不同点:wx:if是通过动态创建和销毁元素来控制元素的展示和隐藏的。hidden是先把元素创建出来，然后通过display:none/block控制元素的显示和隐藏的。 建议：频繁切换元素的显示或者隐藏，建议使用hidden，因为wx:if要创建销毁太消耗性能。 当控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换。

4.WXML模板语法--列表渲染

4.1 wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构。 默认情况下，当前循环的索引用index表示，当前循环项用item表示
在.js中

data: {
    arr:[1,2,3,4,5,6,7],
  },

在.wxml中

<!--wx:for-->
<view wx:for="{{arr}}" wx:key="index">
  <view>{{item}}</view>
</view>
<!--循环出七个大的view
<view>
  <view>{{item}}</view>
</view>
而不是一个大view中七个小view，所以wx:for写在哪里，就循环他的所有-->

4.2手动指定索引和当前项的变量名

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

data: {
    arr:[1,2,3,4,5,6,7],
  },

在.wxml中

<!--手动指定索引和当前项的变量名-->
<view wx:for="{{arr}}" wx:for-item="myitemname" wx:for-index="myindexname">{{myitemname}}--{{myindexname}}</view>

4.3wx:key的使用

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

<view wx:for="{{arr}}" wx:key="index">{{index}}--{{item}}</view>

wx:key="index"key值不能加{{}},会报警告

WXSS模板样式

1.wxss和css的关系

wxss具有css大部分特性，同时，wxss还对css进行扩充以及修改，以适应微信小程序的开发。与css相比，wxss扩展的特性有： (1)rpx尺寸单位 (2)@import样式导入

2.WXSS模板样式--rpx

2.1rpx实现原理

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

2.2rpx和px的单位换算

在ip6上，屏幕宽度为375px,而我们知道任何屏幕都等分成750个物理像素，即750rpx。则在ip6中750rpx=375px; 即1rpx=0.5px=1物理像素。 在不同设备上1rpx=xx px是不同的。

3.WXSS模板样式--样式导入

3.1什么是样式导入

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

3.2@import的语法样式

@import后需要导入的外联样式表的相对路径，用分号；表示语句结束 声明公共样式，在common文件夹的common.wxss中

.user {
  color:red;
}

在wxss.wxml中

<view class="user">张三</view>
<!--引用外联样式应该在.wxss文件引入-->

在wxss.wxss中引入外联样式，而不会是在.wxml中引入

/* pages/wxss/wxss.wxss */
@import '/common/common.wxss';

4.WXSS模板样式--全局样式和局部样式

4.1全局样式

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

4.2局部样式

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。
注意：
(1)当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。 (2)当局部样式的权重大于或者等于全局样式的权重时，才会覆盖全局的样式。

全局配置

1.全局配置文件和常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：
(1)pages
记录当前小程序所有页面的存放路径
(2)window
全局设置小程序窗口的外观
(3)tabBar
设置小程序底部的tabBar效果
(4)style
是否启用新版的组件样式

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.全局配置--window

2.1小程序窗口的组成部分

(1)navigationBar导航栏区域（到最小化那里）
(2)background背景区域，默认是不可见的，下拉才能显示
(3)页面的主体区域，用来显示wxml中的布局

2.2了解window节点常用的配置项

2.3设置导航栏的标题

设置步骤：app.json->window->navigationBarTitleText

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "navigationBarTitleText": "Chelsea",
  },
}

2.4设置导航栏的背景色

设置步骤：app.json->window->navigationBarBackgroundColor(注意修改的颜色只能是十六进制的)

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "navigationBarBackgroundColor":'#2b4b6b',
  },
}

2.5设置导航栏的标题颜色

设置步骤：app.json->window->navigationBarTextStyle (注意：他的可选值只有black和white)

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
   "navigationBarTextStyle":"balck",
  },
}

2.6全局开启下拉刷新功能

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，下拉后会把背景给显示出来。从而重新加载页面数据的行为。
设置步骤：app.json->window->enablePullDownRefresh设置为true

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
"enablePullDownRefresh": true
  },
}

2.7设置下拉刷新时窗口的背景色

当全局下拉刷新功能之后，默认的窗口背景颜色时白色。可以设置下拉窗口的背景颜色，设置步骤为：app.json->window->backgroundColor(十六进制) "backgroundColor":"#efefef"

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
"backgroundColor":"#efefef"
  },
}

2.8设置下拉刷新时loading的样式

当全局开启下拉刷新功能后，默认的窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为app.json->window->backgroundTextStyle(可选值为light和dark)

2.9 设置上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤：app.json->window->为onReachBottomDistance设置新的数值
注意：默认距离为50px,如果没有特殊需求，建议使用默认值即可。 "onReachBottomDistance": 100

3.全局配置--tabBar

3.1什么是tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的切换页面。小程序通常将其分为： 底部tabBar和顶部tabBar
注意：tabBar中只能配置最少2个，最多5个tab页签。当渲染顶部tabBar时，不显示icon，只显示文本

3.2tabBar的6个组成部分

(1)backgroundColor:tab背景色
(2)selectedIconPath:被选中的icon的图片路径
(3)iconPath:没被选中的icon图片路径
(4)selectedColor:tab上的文字选中时的颜色
(5)color:tab上文字的未选中（未选中）的颜色
(6)borderStyle:tabBar上边框的颜色

3.3tabBar节点的配置项

(1)position:仅支持bottom或者top
(2)borderStyle：仅支持black或者white
(3)color
(4)selectedColor
(5)backgroundColor
(6)list:tab页面的列表，最少2个，最多5个tab

3.4每个tab项的配置选项

(1)pathPath:页面路径，页面必须在pages中预先定义
(2)text:tab上显示的文字
(3)selectedIconPath:选中时的图标路径，当position为top时，不显示icon (4)iconPath:未选中时的图标路径，当position为top时，不显示icon

{
  "pages":[
    "pages/index/index",
    "pages/wxml/wxml",
  ],
  "tabBar":{
    "list":[
      {
        "pagePath": "pages/index/index",
        "text":"首页",
        "iconPath":"/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      },
      {
        "pagePath": "pages/wxml/wxml",
        "text":"wxml",
        "iconPath":"/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      }
    ]
  },
}

4.页面配置

4.1页面配置文件的作用

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

4.2页面配置和全局配置的关系

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

4.3页面配置中常用的配置项

navigationBackgroundColor navigationBarTextStyle navigationBatTitleText backgroundColor backgroundTextStyle enablePullDownRefresh onReachBottomDistance

网络数据请求

1.小程序中网络数据请求的限制

处于安全性方面的考虑，小程序官网对数据接口的请求做出了如下的两个限制： (1)只能请求https类型的接口 (2)必须将接口的域名添加到新人列表中

2.配置request合法域名

登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
注意：
域名只支持https协议 域名不能使用ip地址或者localhost 域名必须经过icp备案 服务器名一个月最多可以申请50次修改

3.发起get请求

调用微信小程序提供的wx.request()方法，可以发起get数据请求，示例代码如下： 在.wxml中

在.js中

handler(){
    wx.request({
      url:'https://www.escook.cn',//请求的接口地址，必须基于https协议
      // data:{
      //   name:'zs',
      // },//发送到服务器的数据
      method:'GET',//请求的方式//POST也一样
      success:(res)=>{//请求成功之后的回调函数
        console.log(res.data);
        this.setData({
          msg:res
        })
      }
    })
  },

4.在页面加载时请求数据

此时需要在页面的onLoad事件中调用获取数据的函数 在.js中

 handler(){
  wx.request({
    url:'https://www.escook.cn',//请求的接口地址，必须基于https协议
    // data:{
    //   name:'zs',
    // },//发送到服务器的数据
    method:'GET',//请求的方式//POST也一样
    success:(res)=>{//请求成功之后的回调函数
      console.log(res.data);
      this.setData({
        msg:res
      })
    }
  })
},
  /**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
  this.handler();
},

5.跳过request合法域名校验

6.关于跨域和Ajax的说明

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