小程序wxml

微信小程序的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

<template name =" staffName ">

<view>

FirstName: { {firstName}}, LastName: { {lastName}}

</view>

</template>

下面引用上面的模板：

<template is =" staffName " data ="{ { ... staffA}}"></template> //扩展运算符...来将一个对象展开

<template is="staffName" data="{ {...staffB}}"></template>

<template is="staffName" data="{ {...staffC}}"></template>

js:

data:{

staffA: { firstName: 'Hulk', lastName: 'Hu' },

staffB: { firstName: 'Shang', lastName: 'You' },

staffC: { firstName: 'Gideon', lastName: 'Lin' }

}

结果显示：  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