一:WXML模板语法
1:数据绑定
1:基本原则
a:在data:{ }中定义数据
b:在wxml中使用
在对应页面的.js文件中使用,把数据定义到data对象中
Page({
data: {
name:'这是一个数据'
},
})
Mustache语法格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可,语法格式为:
<view> {{ 要绑定的数据名称 }} </view>
主要应用场景:绑定内容,绑定属性,简单的运算(三元表达式,算数运算)等
二:事件绑定
常用的事件:
类型:tap ,绑定方式:bindtap或者bind:tap,手指触摸后马上离开,类似于click事件
类型:input ,绑定方式:bindimput或者bind:input,文本框输入事件
类型:change ,绑定方式:bindchange或者bind:change,状态改变时触发
事件对象:
事件回调触发时,会收到一个事件对象event,基础属性
type:String:事件类型
timeStInteger:页面打开到触发事件所经过的毫米数
target:Object:触发事件的组件一些属性的集合
currentTarget:Object:当前组件的一些属性
detall:Object:额外的信息
touches:Array:触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches:Array:触摸事件,当前变化的触摸点信息的数组
注意点:target和currentTarget的区别
target是谁触发了就是给的属性集合,列如在父盒子上定义一个事件,点击子盒子触发,这个事件会以冒泡的形式触发父盒子上定义的事件,那么对于外层的容器来说:
a:e.target指向的是触发事件的源头组件,也就是子盒子。
b:e.currrentTarget指向的是绑定事件的父盒子。
(补充:关于阻止冒泡发生:js原生语法:e.prevenDefault,vue语法:@click.prevant)
绑定点击事件绑定bindtap语法格式
绑定触摸事件tap
通过 bindtap绑定
<button type="primary" bindtap="clickxx" >按钮</button>
Page({
data:{
},
clickxx(e){
console.log(e);
}
})
更改data中的数据,重新赋值
通过this.setData(Obj)方法
Page({
data:{
count:'tsy'
},
clickxx(){ //触发函数
this.setData({
count:'sssss'
})
console.log(this.data.count);
},
})
事件传参
微信小程序的传承不能在bintop里写,微信小程序的传参比较特殊,格式如下
data-参数名=“{{参数值}}”
会在事件对象中显示所传参数值:事件对象.target.dataset.参数名
<button type="primary" bindtap="clickxx" data-eve="{{55}}" >按钮</button>
Page({
clickxx(e){
console.log(e.target.dataset.eve);
}
})
事件绑定bindinput语法格式
<input type="text" placeholder="请输入用户名" bindinput="gettext"></input>
Page({
gettext(e){
console.log(e.detail.value);
}
})
实现文本框和data之间的数据同步
步骤:
1:定义数据
Page({
data:({
msg:'tsy' 定义变量msg,值tsy
})
})
2:结构渲染
<input value="{{msg}}" bindinput="getdata"></input>
定义事件函数getdata
3:样式美化
略
4:绑定input事件处理函数
getdata(e){
this.setData({
msg:e.detail.value
})
}
条件渲染
1:在小程序中用wx:if="{{判断条件}}",来判断是否渲染该模块
<view wx:if="{{ true }}"> 渲染该模块 </view>
<view wx:if="{{ false }}"> 不渲染该模块 </view>
可以配合 wx:elif 和 wx:else 一起用
2:wx:if可以和<block></block>标签一起使用,注意block并不是一个组件,只起到一个容器的作用,不会再页面中做任何渲染。
<block wx:if="{{ false }}">
//不显示
<view>xianshi</view>
<view>xianshi</view>
</block>
<block wx:if="{{ true }}">
//显示
<view>xianshi</view>
<view>xianshi</view>
</block>
3:hidde
在小程序中用hidde可以做到组件的显示隐藏
<view hidden="{{ false }}">显示</view>
<view hidden="{{ true }}">隐藏</view>
4:wx:if 和 hidden的区别
wx:if :是将组件动态的创建和移除的方式
hidden;是以样式切换的方式(display:none、block;)来控制元素的显示和隐藏
列表渲染wx:for
1wx:for
Page({
data:({
dataArr:[1,2,5,4,7,8,6]
}),
})
<view wx:for="{{dataArr}}"> 索引:{{ index }} ,当前项{{ item }} </view>
打印
可以用用wx:for-index和wx:for-item来自定义索引变量名和当前项变量名
<view wx:for="dataArr" wx:for-index="idx" wx:for-item="itemName">
索引:{{idx}}
当前项:{{itemName}}
</view>
2:wx:key
为循环项加上唯一标识
data:({
daArr:[
{ id:1, name:'tss'},
{ id:2, name:'tsyy'},
{ id:3, name:'tjh'}
]
}),
<view wx:for="{{ daArr }}" wx:key="id"> {{ item.name }}</view>
二,wxss模板样式
1.rpx
rpx是微信小程序独有的,解决屏适配的尺寸单位
将屏幕分成750份,即当前屏幕的宽都为750rpx
不同大小屏幕的1rpx单位大小不一样
rpx和px之间的单位换算
列 苹果6屏幕宽度为375px,分成750个物理像素,为750rpx
750rpx = 375px = 750物理像素
1rpx = 0.5px = 1物理像素
2样式导入
@import 需要导入的外联样式表的相对路径
/** common.wxss **/
.a{
width:100rpx
}
/** app.wxss **/
@import "common.wxss"
.b{
hieght:100rps
}
3:局部样式和全局样式
在app.wxss中定义的wxss文件在所有小程序页面中适用,即全局样式
在pages中定义的wxss只在所处文件夹中适用,即局部样式
4:全局配置
小程序根目录下的app.json文件是小程序的全局配置文件
常用的配置项
1:pages
记录当前小程序所有页面的存放路径
2:window
全局设置小程序窗口的外观
3:tabBar
设置小程序底部的tabBar效果
4:style
是否用新版的组件样式
5:全局开启下拉刷新功能
重新加载页面数据
全局设置下拉刷新
小程序根目录下app.json文件中的window下设置
enablePullDownRefresh 属性 :false / 下拉不刷新 true / 下拉刷新
改变下拉背景颜色:
backgroundColor
改变下拉加载样式
backgroundTextStyle
列子
"window":{
"enablePullDownRefresh":true,
"backgroundColor": "#000000",
"backgroundTextStyle":"dark"
}
6:设置上拉触底的距离
上拉触底,为了加载更多数据
onReachBottomDistance
7:全局设置tabar
tabar的组成部分:
backgroColorlor :tabar的背景颜色
selectcdlcenPath:选中图片路径
selectedColor:选中时的文字颜色
borderStyle:上边边框颜色
iconPath:未选中图片时的图片路径
color:字体颜色
tabar节点的配置项:
list:数组类型 tab页签的列表,最少2个,最多5个
position: tabBar的位置,只支持botton/top
borderStyle: tabBar上边框的颜色,仅支持black/white
color: 文字默认颜色
selectedColor: 被选中时文字颜色
backgroundColor: 背景颜色
重点list
tab项的配置选项:
pagePath: 页面路径,页面必须在pages中预先定义
text: tab上显示的文字
iconPath: 未被选中的图标路径:当position为top时,不显示icon
selectediconPath: 选中时的图表路径:当position为top时,不显示icon
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "text"+++
},{
"pagePath": "pages/logs/logs",
"text": "texts"
}]
},
8:页面配置
小程序可以在app.json的window节点中可以全局配置每个页面的窗口表现
导航栏背景颜色颜色
"navigationBarBackgroundColor": "#000000"
导航栏标题颜色
"navigationBarTextStyle": "white" 值选项只支持 white / black
导航栏标题文字内容
"navigationBarTitleText": "这是桃十一的小程序",