微信开发者工具的tabBar和数据双向绑定

一. tabBar

tabBartabBar其实就是微信分类栏

1.1 在全局样式这里添加tabBar

 做分类栏起码要有两个页面

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",        //路径
      "text": "首页",                         //名字
      "iconPath": "icons/home.png",           //鼠标没放上去的图片
      "selectedIconPath": "icons/home-o.png"  //鼠标放上去后的图片
    },
    {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "icons/my.png",
      "selectedIconPath": "icons/my-o.png"
    }
  ]}

 注意事项：

pages和tabBar的页面顺序要保存一致

这个启动页面是paes，tabBar的第一个，不然分类栏是不会出不来

·

这就是分类栏 

二. 数据双向绑定        

2.1 添加一个label的用户名

<view>
    <label>用户名：<label>{{username}}</label></label>
    <input class="input1" placeholder="请输入用户名" bindinput="inputStr" value="{{username}}" />
</view>

bindinput="inputStr" 

2.2 在data里添加一个username，然后创建一个方法用来实现双向绑定

/**
* 页面的初始数据
*/
data: {
    username:"zs"
},

inputStr:function(e){
    //console.log(e);
    var name=e.detail.value;
    this.setData({
        username:name
    })
}

//小程序Data的赋值必须使用setData方法，错误：this.Data.title='xxx'; 

2.3 创建按钮点击获取文本框里的值

<view>
    <button class="bind1" bindtap="testClike" data-age="19">点我</button>
</view>

小程序里的方法传值不能用 bindtap=“testClike(age)”  必须用data-xx="xx"

2.4 接收按钮传过来的值

testClike:function(str){
    console.log(str.target.dataset.age);
    console.log("username:"+this.data.username);
}

接收点击按钮时按钮传过来的值，然后接收文本框传过来的值