微信小程序中的标签
1.text标签
text标签相当于 html 中的 span标签 行内元素 不会换行
1.可以让用户长按复制 selectable 属性
<text selectable ></text>
2.只能嵌套 text
3.可以对空格回车进行编码 decode
<text decode>
< //左括号
>
&
'
 
&emsp
</text>
2.view标签
view标签相当于 html 中的 div标签 块元素 会独占一行
3.checkbox
checkbox标签相当于 html 中的 复选框
4.image
src
mode
模板语法
数据绑定
把数据放到js文件的data对象中 使用插值表达式 {{}} 直接在wxml中使用
data中的数据不能直接通过赋值改变
正确的写法: this.setData({
num:newNum
})
Page({
data:{
num:1,
msg:'hello,world',
isShow:'false',
person:{
age:20,
name:'张三'
}
}
})
在wxml中使用
<text>{{num}}</text>
<text>{{msg}}</text>
<text>{{isShow}}</text>
<text>{{person.age}}</text>
//自定义标签属性
<text data-i='{{num}}'></text>
//使用bool类型充当属性时 字符串和花括号之间一定不能存在空格 不然会失效
<checkbox checked="{{isShow}}"></checkbox>
//插值表达式中可以加入表达式 (数字的加减,字符串拼接,三元表达式)
列表渲染
wx:for-item='item'
wx:for-index='index'
wx:key='*this' 表示你的数组是一个普通数组 *this表示是 循环项
block标签
1.占位符标签
2.写代码的时候可以看到此标签
3.页面渲染 小程序会把他移除掉
业务场景 加入需要for循环并且排版简单时 可以使用block标签站位 执行for循环
条件渲染
wx:if='{{true}}'
wx:elif='{{false}}'
wx:else
直接在标签中写 hidden
<text hidden></text> 此时是隐藏
<text hidden='false'></text>此时是显示
事件绑定
绑定input事件
1.绑定 input 事件 bindinput=''
2.获取input中的值 e.detail.value
this.setData({
msg:e.detail.value
})
绑定点击事件
1.绑定点击事件 bindtap
2.无法在小程序事件中直接传参
3.通过自定义属性的方式来传参 data-i
e.currentTarget.dataset.i
样式 WXSS
尺寸单位 rpx
规定屏幕宽度为 750px
换算公式 假设元素宽100px
? px = 750rpx
1px = 750rpx/?
100px = 750px *100/?
在wxss样式中使用calc属性换算
width:calc(750rpx*100/375)
样式导入
使用 @import 语句导入外联样式 只支持相对路径
选择器
小程序中不支持通配符 *
小程序中的 less
原生小程序不支持less
如果要使用 在vscode中使用less插件 并且在全局json文件中 配置
"less.compile":{
"outExt":".wxss"
}
