2022/4/2 微信小程序

12-34

API

WXML模板语法

数据绑定

基本使用

例：
定义数据

数据绑定，并渲染数据

效果

Mustache语法的使用

绑定内容

绑定属性

运算

事件绑定

常用事件：

事件对象的属性列表

bindtap

打印出的event如下：

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

this.setData方法：赋值
取data中的变量：this.data.变量名

事件传参

正确的传参方法：

注：在data-*=“参数值"中，双引号中的内容若不使用{{}}，则传入的是字符串，不是数值型。
当使用**data-info=”{{2}}"时：

当使用data-info=“2”**时：

取值方法：

bindinput

文本框和data的数据同步

注：此处的input中的value参数为文本框的初始值。


例：

  <input bindinput="inputdatain" value="{{str}}"/>

inputdatain(e){
  this.setData({
    str:e.detail.value
  }),
  console.log(this.data.str)
},

使用如上代码，进行输入，删除的结果为：

条件渲染

wx:if

用view和block做包裹的区别：当用view做包裹容器时，外层会渲染一个view；而用block做包裹容器时，只会渲染出内部的内容。用block做包裹可以提高渲染效率，避免渲染出不必要的内容。

注：在使用时一定要用Mustache语法，即{{}}。否则为字符串，永远为真

<view wx:if="{{true}}">
  <view>a</view>
  <view>b</view>
</view>

<block wx:if="{{true}}">
  <view>a</view>
  <view>b</view>
</block>

hidden

wx:if和hidden的区别

例如下代码

<view>
  <view hidden="{{!flag}}">hidden test</view>
  <view wx:if="{{flag}}">if test</view>
</view>

均为显示条件（hidden为true因此，false显示）

当均为不显示条件时，wx:if不会渲染，hidden只是隐藏，依然渲染。

列表渲染

wx:for

wx:key

注：wx:key中不需要使用{{}}。若数组中没有类似本例中的id作为key，可用index代替。wx:for一般需要指定wx:key以提高效率，不提供会报错。
如此数组中，每项仅有一个元素，可以用index作为wx:key

wxss

rpx

样式导入

用于指定统一的样式，共所有页面使用

全局样式和局部样式

全局配置

window

tabBar

在app.json文件中直接输入tabBar后回车，会自动生成tabBar列表样式。

页面配置

网络数据请求

配置request合法域名

发起get请求

发起post请求

在页面刚加载时请求数据

request请求的注意事项