微信小程序中的標簽
1.text標簽
text標簽相當于 html 中的 span標簽 行內(nèi)元素 不會換行
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
模板語法
數(shù)據(jù)綁定
把數(shù)據(jù)放到js文件的data對象中 使用插值表達式 {{}} 直接在wxml中使用
data中的數(shù)據(jù)不能直接通過賦值改變
正確的寫法: 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>
//插值表達式中可以加入表達式 (數(shù)字的加減,字符串拼接,三元表達式)
列表渲染
wx:for-item='item'
wx:for-index='index'
wx:key='*this' 表示你的數(shù)組是一個普通數(shù)組 *this表示是 循環(huán)項
block標簽
1.占位符標簽
2.寫代碼的時候可以看到此標簽
3.頁面渲染 小程序會把他移除掉
業(yè)務場景 加入需要for循環(huán)并且排版簡單時 可以使用block標簽站位 執(zhí)行for循環(huán)
條件渲染
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
規(guī)定屏幕寬度為 750px
換算公式 假設元素寬100px
? px = 750rpx
1px = 750rpx/?
100px = 750px *100/?
在wxss樣式中使用calc屬性換算
width:calc(750rpx*100/375)
樣式導入
使用 @import 語句導入外聯(lián)樣式 只支持相對路徑
選擇器
小程序中不支持通配符 *
小程序中的 less
原生小程序不支持less
如果要使用 在vscode中使用less插件 并且在全局json文件中 配置
"less.compile":{
"outExt":".wxss"
}
