小程序 常用组件 和 功能(tab、if···else···、wx:for、获取data数据、跳转页面 )

一、底部tab
在app.json 中添加；
先在pages数组中添加地址，会自动创建页面组件；
iconPath：是图标，可为空；

{
  "pages":[
    "pages/index/index",
    "pages/mine/mine",
    "pages/form/form",
    "pages/date/date"
  ],
  "tabBar":{
    "color":"#333",    
    "selectedColor": "#666",   
    "backgroundColor":"#ccc",  
    "position":"top",   
    "list":[{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "",
      "selectedIconPath": ""
    },{
      "pagePath": "pages/mine/mine",
      "text": "数据",
      "iconPath": "",
      "selectedIconPath":  ""
    },{
      "pagePath": "pages/form/form",
      "text": "表单",
      "iconPath": "",
      "selectedIconPath":  ""
    },{
      "pagePath": "pages/date/date",
      "text": "日历",
      "iconPath": "",
      "selectedIconPath":  ""
    }
    ]}
}

二、循环列表，并 点击获取 该行数据

mine.wxml文件:
  <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="it"  wx:key="id"  >
  {{idx}}: {{it.message}}:{{it.id}} -||-  <text  data-id="{{it.id}}"  bindtap="getId">点击获取Id</text> 
</view>



mine.js文件:
const app = getApp()

Page({
  data: {
      array: [{
        message: '第一房间',
        id: 'unique_01'
      }, {
        message: '第二房间',
        id: 'unique_02'
      }, {
        message: '第三房间',
        id: 'unique_03'
      }],
      text1: {
        index: 0,
        msg: 'this is a template',
        time: '2016-09-15'
      }
  },
  // 事件处理函数
  onLoad() {
  },
  getId(event){
    console.log('获取id',event.currentTarget.dataset.id)
      },
})

三、小程序if···else···

demo1:
<view>
  <view wx:if="{{array.length > 5}}">wx:if  wx:elif=> 1 </view>
  <view wx:elif="{{array.length > 2}}">wx:if  wx:elif=> 2 </view>
</view>
//array 是二的 data.array

demo2:
      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" bindtap="showPick">显示AA</button>
        <button style="margin: 30rpx 0" bindtap="showPick">隐藏AA</button>
      </view>
 
      <view class="pick" wx:if="{{shows}}">
  		 <text>AA</text>
      </view>
      
 demo2.js
 Page({
  data: {
    shows:false,
  },
  showPick: function () {
    var that = this;
    var sh = that.data.shows;
    that.setData({
      shows: !sh
    })
  },
})     

四、跳转新页面
wx.navigateTo({
url: ‘…/edit/edit’
})
跳转新页面，不继承tab组件

//wxml页面
  <view>
    <text bindtap="goEdit" >我的设置》</text>
  </view>

//js页面
Page({
data:{},
  // 事件处理函数
    goEdit(){
    console.log('goEdit');
    wx.navigateTo({
      url: '../edit/edit'
    })
  }
})