一、tabBar

1.1 list中至少有2条，最多有5条；

1.2 默认颜色用“color”，被选中的颜色用“selectedColor”

二、循环数组

wxml:

使用wx:for之后，需要加入wx:key='{{index}}'来指定下标

如：

<view wx:for='{{list}}' wx:key='{{index}}'>

姓名：{{item.name}}，年龄：{{item.age}}

</view>

js:

pageData.forEach(function(item, index){
       console.log(item); //这里的item就是从数组里拿出来的每一个每一组
       that.setData({
       id: item.id,
       title: item.title
   })
})

三、像素单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。

四、引入文件

比如引入样式文件的格式：@import '../../style/common.wxss';

第三方组件库推荐：WeUI、iView Weapp、Vant Weapp

五、JS交互

5.1 点击事件使用bindtap

例如

wxml：<button size='mini' bindtap='addOne'>点我加1</button>

js：如果改变data里面的值，需要使用setData

addOne: function(){
  this.setData({
    count: this.data.count + 1
  })
},

5.2 防止事件传播

如图，蓝色区域是红色区域的子元素；

我们希望点击子元素的时候，避免触发父元素的点击事件

这时候，可以使用catchTap来绑定点击事件：

<view class='father' catchtap='ontapFather'>
  <view class='child' catchtap='ontapChild'></view>
</view>

5.3 自定义属性

使用data- 自定义属性

比如自定义id：data-id='1111'

取值：e.currentTarget.dataset.id

6.体验小程序

更多内容，请关注公众号：java高手之路

在公众号回复：小程序资源   即可免费获取以下微信小程序视频教程！