01 xml
组件
view
text-align: center;文本横向居中
line-height 行高
display: flex;横向布局
justify-content: space-around;分散对齐
选择器:nth-child(x)
wxml
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
wxss
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/*
view:nth-child(1):第1,2,3个view
*/
.container1 view:nth-child(1) {
background-color: greenyellow;
}
.container1 view:nth-child(2) {
background-color: palevioletred;
}
.container1 view:nth-child(3) {
background-color: blueviolet;
}
.container1 {
display: flex;
justify-content: space-around;
}
scroll-view
scroll-y:纵向滚动
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
基于view小节改动container1
的样式
.container1 {
width: 100px;
height: 120px;
border: 1px solid red;
}
swiper和swiper-item
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay interval="1000" circular>
<!-- 第1个轮播图 -->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!-- 第2个轮播图 -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- 第3个轮播图 -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: greenyellow;
}
swiper-item:nth-child(2) .item{
background-color: palevioletred;
}
swiper-item:nth-child(3) .item{
background-color: royalblue;
}
text和rich-text
-
text
通过text组件的
selectable
属性,实现长按选中文本内容的效果**(仅text组件支持长按选中复制的效果)**
<view>
手机号支持长按选中效果
<text selectable>1234567890</text>
</view>
-
rich-text
通过组件的
nodes
属性节点,把html字符渲染为对应的UI结构
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
button
open-type
属性:可以调用微信提供的各种功能(客服、转发、用户授权、用户信息等)
<!-- 通过type属性指定按钮颜色2 -->
<button>普通按钮</button>
<button type="default">默认按钮default</button>
<button type="primary">主色调primary</button>
<button type="warn">警告按钮warn</button>
<!-- size="mini" 小尺寸按钮 -->
<button type="default" size="mini">默认按钮default</button>
<button type="primary" size="mini">主色调primary</button>
<button type="warn" size="mini">警告按钮warn</button>
<!-- plain 镂空按钮 -->
<button plain>普通按钮</button>
<button type="primary" plain>主色调primary</button>
<button type="warn" plain>警告按钮warn</button>
可以在
app.json
中修改"style"
版本来选择样式版本
image
默认的image组件也占据一定宽度和高度
<image></image>
<image src="/images/高木1.jpg"></image>
默认情况下图片比例不对导致图片变形,是由于
mode
属性导致。一般使用aspectFill
和aspectFit
<image src="/images/高木1.jpg" mode="aspectFit"></image>
image:nth-child(1) {
border: 1px solid red;
background-color: cornflowerblue;
}
image:nth-child(2) {
border: 1px solid blueviolet;
}
navigator
后续学习
API
小程序中的API是由宿主环境提供的,通过这些丰富的小程序APl,开发者可以方便的调用微信提供的能力
例如:获取用户信息、本地存储、支付功能等。
-
事件监听API
以
on
开头,用来监听某些事件的触发如
wx.onWindowResize(function callback)
监听窗口尺寸变化 -
同步API
以
Sync
结尾执行结果可以通过函数返回值直接获取,如果执行出错会抛出异常 如
wx.setStorageSync('key','valye')
向本地存储中写入内容 -
异步API
类似于jQuery中的
$.ajax(options)
函数,需要通过success、fail、complete接收调用的结果如
wx.request()
发起网络数据请求,通过success回调函数接收数据
wxml模板语法
数据绑定
-
数据绑定的基本原则
-
在data中定义页面的数据
-
Mustache语法的格式 (在VUE中叫插值表达式)
{{要绑定的数据名称}}
Mustache
<view>{{info}}</view>
<image src="{{imgUrl}}" mode="heightFix"></image>
data: {
info:'hello world',
imgUrl:'/images/高木2.jpg'
},
应用场景:绑定内容、绑定属性、运算(三元、算数)
在Mustache中可以进行一些操作
三元运算
if(randonNum1>=5) 数字大于或等于5
else 数字小于5
<view>数字:{{randomNum1}}||{{randomNum1 >= 5 ? '数字大于或等于5':'数字小于5'}}</view>
data: {
randomNum1: Math.random() * 10
},
算数运算
<view>{{randomNum2 * 100}}</view>
data: {
randomNum2: Math.random().toFixed(2)
},
事件绑定
用户在渲染层触发某个事件然后将该事件传递到逻辑层进行业务逻辑处理
-
事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
target和currentTarget
target
是触发该事件的源头组件,而currentTarget
则是当前事件所绑定的组件。
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。此时,对于外层的view来说:
e.target
指向的是触发事件的源头组件,因此,e.target
是内部的按钮组件e.currentTarget
指向的是当前正在触发事件的那个组件,因此,e.currentTarget
是当前的 view组件
bindtap
<button type="primary" bindtap="btnTapHandler">按钮</button>
// 定义按钮的事件处理函数
btnTapHandler(event){
console.log(event)
},
在事件处理函数中为data中的数据赋值
给页面data中的数据重新赋值:this.setData(dataObject)
data: {
count: 0
},
// +1按钮的点击事件处理函数
CountChange() {
console.log('点击+1')
this.setData({
count:this.data.count + 1
})
},
访问当前的data中的count值:this.data.count
重新赋值:count:this.data.count + 1
事件传参 data-x
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。
bindtap="xxx"
xxx统一当作事件名处理,不具备传参能力
-
可以为组件提供
data-*
自定义属性传参,其中*
代表的是参数的名字 -
在事件处理函数中,通过
event.target.dataset.参数名
即可获取到具体参数的值
data-info="{{2}}" | data-info=“2” |
---|---|
传值数字2 | 传值文本2 |
<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>
// data-xxx
btnTap2(e) {
console.log('点击btnTap2',e)
console.log('info',e.currentTarget.dataset.info)
},
点击+2
按钮 e.currentTarget.dataset.info
输出info 2
添加一个事件,点击button后console输出
this.setData({
count: this.data.count + e.target.dataset.info
})
console.log('count',this.data.count)
target
和currentTarget
bindinput
e.detail.value
:获取输入框数据
<input bindinput="inputHandler"/>
// input 输入框的事件处理函数
inputHandler(e) {
console.log(`输入内容`, e.detail.value)
},
文本框和data之间数据同步
<input value="{{msg}}" bindinput="inputHandler"/>
data: {
msg:'你好',
},
// input 输入框的事件处理函数
inputHandler(e) {
console.log(`输入内容`, e.detail.value)
this.setData({
msg: e.detail.value
})
console.log('msg', this.data.msg)
},
若没有this.setData
,msg 的 值仍然是 你好
条件渲染
wx:if
判断是否需要渲染该代码块,也可以用
wx:elif
和wx:else
来添加else判断
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===0}}">女</view>
<view wx:else>保密</view>
data: {
type:1 // 页面只显示男
},
其他用法:
-
wx:if="{{true}}"
:显示 -
wx:if="{{false}}"
:隐藏
结合block使用wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>
标签将多个组件包装起来,并在<block>
标签上使用多个wx:if
控制属性
<block>
并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
console中不显示block
标签
hidden
直接使用 hidden="{{condition}}"
也能控制元素的显示与隐藏
data: {
flagTrue: true,
flagFalse: false,
},
<view hidden="{{flagTrue}}">条件为true隐藏</view>
<view hidden="{{flagFalse}}">条件为false显示</view>
会在页面中渲染,console中显示隐藏的内容
wx:if和hidden
- 运行方式不同
wx:if
以动态创建和移除元素的方式,控制元素的展示隐藏hidden
以切换样式的方式(display:none/block;
),控制元素的显示与隐藏
- 使用建议
- 频繁切换时,建议使用**
hidden
提高渲染效果** - 控制条件复杂时,建议使用
wx:if
搭配wx:elif
、wx:else
进行展示与隐藏的切换
- 频繁切换时,建议使用**
列表渲染
wx:for
通过wx:for
可以根据指定的数组,循环渲染重复的组件结构
<!-- 列表渲染 -->
<view wx:for="{{arr1}}">
索引:{{index}},item:{{item}}
</view>
data: {
arr1:['苹果','华为','小米']
},
默认情况下,当前循环项的索引用index
表示;当前循环项用item
表示。
wx:key="index"
解决报黄
手动指定索引和当前项的变量名*
-
使用
wx:for-index
可以指定当前循环项的索引的变量名 -
使用
wx:for-item
可以指定当前项的变量名
<!-- 手动指定索引和当前项的变量名* -->
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
索引:{{idx}},item:{{itemName}}
</view>
效果同上,但该方法较少使用
wx:key="idx"
解决报黄
wx:key
类似于Vue列表渲染中的:key
,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率。
data: {
userList:[
{id:1,name:'小红'},
{id:2,name:'小白'},
{id:3,name:'小黑'}
]
},
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>