微信小程序

小程序wxml与html不同标签

<!--相当于div-->
<view><view>

<!--相当于span-->
<text></text>

<!--相当于img-->
<image src=""></image>

小程序wxss与css差别

rpx 可以根据屏幕宽度进行自适应 iphone6 1rpx = 0.5px

@import "xxx.wxss": 引入外部样式文件

小程序绑定事件

bindtap/bind:tap 给元素绑定一个点击事件

bind:tap = functionname

bindtap = functionname

<!--点击事件名位click-->
<button bindtap="click">按钮</button>

绑定后 在js写事件内容

click: function(){
    console.log(点击成功);
}

catchtap与bindtap 绑定点击事件区别

<view id="div1" catchtap="click1">
  <view id="div2" catchtap="click2"></view>
</view>
<view id="div3" bindtap="click3">
  <view id="div4" bindtap="click4"></view>
</view>

#div1{
  width: 600rpx;
  height: 600rpx;
  background: #000;
}
#div2{
  width: 200rpx;
  height: 200rpx;
  background: pink;
}
#div3{
  width: 600rpx;
  height: 600rpx;
  background: #00ffff;
}
#div4{
  width: 200rpx;
  height: 200rpx;
  background: #ffff00;
}

click1: function(){
    console.log('div1');
},
click2: function(){
    console.log('div2')
},
click3: function () {
    console.log('div3');
},
click4: function () {
    console.log('div4')
}

点击div1 div1

点击div2 div2

点击div3 div3

点击div4 div4 div3

所以

bindtap 有事件冒泡

catchtap 没有事件冒泡

capture-bind 支持事件捕获

capture-catch 中断捕获阶段 取消冒泡阶段

event.target.dataset 自定义的属性data-x

<view id="div1" catchtap="click1" data-index="1">

#div1{
  width: 600rpx;
  height: 600rpx;
  background: #000;
}

click1: function(event){
    console.log(event);
    //获取自定义data-index 的值
    console.log(event.target.dataset)
  }

小程序数据绑定

双向数据绑定

用 { { } } 来绑定数据

data: {
    msg: "hello world"
}

    <text>{{}}</text>

wx:for 循环输出数组

<!--index 索引 item 内容-->
<view wx:for="{{list}}">{{index}}:{{item}}</view>

data: {
    list:[111,222,333,444,555]
  },

setData 设置data值

<text>{{msg}}</text>
<!--点击按钮更改text标签内容-->
<button bindtap="click">按钮</button>

data: {
    msg:"hello world" ,
},
click: function(){
    console.log(this.data.msg)//你好
    this.setData({
    msg:"你好"
})

wx:if 条件判断

wx:if ->if

wx:elif w->else if

wx:else ->else

<text wx:if="{{isLogin}}">hello</text>
<text wx:else="{{isLogin}}">world</text>

data: {
    isLogin:true
},
  //显示hello

block wx:if 不会渲染在页面里 但会执行属性里的属性

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>