目录结构及点击按钮改变title

导航栏相关设置： 

WXML 是这么写 :

<text>{{msg}}</text>

JS 只需要管理状态即可:

this.setData({msg: 'Hello World'})

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。

 

 条件逻辑：if elif else

data（{
            online:1
}）

<view>

 <text wx:if="{{online===0}}">在线</text>

 <text wx:elif="{{online===1}}">离线</text>

 <text wx:else>隐身</text>

</view>

列表渲染：

    list:[
      {name:'tom',age:18},
      {name:'jack',age:19},
      {name:'dava',age:20},
    ]

  <view wx:for="{{list}}" wx:key="{{index}}">
    <text>{{index}}-{{item.name}}-{{item.age}}</text>
    </view>

使用wx:for-item 特殊属性指定数组当前元素的变量名，使用wx:for-index指定数组当前下标的变量名

  <view 
    wx:for='{{list}}'
    wx:for-item='user' 
    wx:for-index="id" 
    wx:key='id'>
    {{id}}_{{user.name}}_{{user.age}}
  </view>

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕。

事件是通过bind:tap这个属性绑定在组件上

---

双向绑定：（原理：给输入框绑定一个value和事件，获取输入框的值，给值重新赋值。更新页面this.setData）

 <text>{{inputValue}}</text>
 <input type='text' value="{{inputValue}}" bind:input='onInput' placeholder="请输入"/>

    inputValue:"你好"

  onInput(e){
    const inputValue=e.detail.value
    this.setData({inputValue})
  }

 双向绑定语法：

<input type="text" model:value='{{inputValue}}'/>