微信小程序的html的内容写在了wxml里面。他是用的是封装好的标签
view button text
数据绑定
<view>{ {}message}</view>
page({
data:{
message:'hello'
}
})
判断 wx:if wx:elif wx:else
<view wx:if="{
{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{
{view == 'APP'}}"> APP </view>
<view wx:else="{
{view == 'MINA'}}"> MINA </view>
page({
data:{
view:'MINA'
}
})
模板 template
...
来将一个对象展开
js:
data:{
结果显示: FirstName: Hulk, LastName: Hu
FirstName: Shang, LastName: You
FirstName: Gideon, LastName: Lin
循环 wx:for
有时候报错
Now you can provide attr "wx:key" for a "wx:for" to improve performance
只需要加上一个wx:key="XXX"(这个XXX可以任意指定一个作为主键的值。index 或者item.name,或者是item里面的某个属性。它一定是不能改变的量唯一性)
<view wx:for={ {a}} wx:key="index">索引:{ {index}},对应的值:{ {item.name}}</view> //必须的写item才能显示出来,这个item就代表的for循环里面的每一项.
使用 wx:for-item
可以指定数组当前元素的变量名
使用 wx:for-index
可以指定数组当前下标的变量名:
<view wx:for={ {a}} wx:key="index">索引:{ {index}},对应的值:{ {item.name}}</view>如果用wx:for-item, wx:for-index就变成了 <view wx:for={ {a}} wx:key="index" wx:for-index="iii" wx:for-item="JJJ">索引:{ { iii}},对应的值:{ { JJJ.name}}</view>
相当于把原来的index和item重命名了。下面直接用重命名的就可以了。
js:
data:{
a:[{"name":1},{"name":2}{,"name":3},{"name":4}],
}
结果就是 索引:0,所对应的值1
索引:1,所对应的值2
索引:2,所对应的值3
索引:3,所对应的值4
注意:wx:for的每个子项都可以用item来获取,如果有具体的参数就是item.name(参数名)
比如你数组写的是items。子项是item.name.数组名是a。子项也是item.name.并不是a.name啊
事件的使用方式
点击事件:bindtap catchtap 区别是bind
事件绑定不会阻止冒泡事件向上冒泡,catch
事件绑定可以阻止冒泡事件向上冒泡。
事件对象属性列表
changedTouches触摸事件,当前变化的触摸点信息的数组 currentTarget当前组件的一些属性值集合 detail额外的信息 type事件类型 timeStamp 触发事件时候的时间戳
常用的e.target.id获取点击元素的id值,e.target.dataset.X 当前组件上由data-
开头的自定义属性组成的集合
<view data-alpha-beta="1" data-alphaBeta="2" bindtap