前文：

微信小程序开发极简入门（一）

样式

wxss：

/**放在页面的wxss**/
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
.idx_view {
  height: 200rpx;
  background-color: burlywood;
  margin: 20rpx 20rpx 20rpx 20rpx;
}
/**放在app.wxss**/
view {
  background-color: cadetblue;
}
view text{
  color: red;
}

样式没什么好讲的，就是css。

放在app.wxss就是全局样式。

.样式名：只有用class引用才生效。例如.idx_view{...}，只有class="idx_view"才起作用。

组件名：直接起作用。例如 view{...}，所有view组件都是这个样式。

组件的style属性会覆盖样式。

wxml：

<navigation-bar title="首页" back="{{false}}"></navigation-bar>
<scroll-view class="scroll-view" scroll-y type="list">
  <view>
    <label>页面名称：</label><text style="color: orangered;">看字体颜色</text>
  </view>
</scroll-view>

---

页面展示JS的Data

wxml：

<!--index.wxml-->
<navigation-bar title="首页" back="{{false}}"></navigation-bar>
<scroll-view class="scroll-view" scroll-y type="list">
  <view class="idx_view">
    <label>页面名称：</label><text style="color: orangered;">{{idxName}}</text>
  </view>
</scroll-view>

js：

Page({
  data: {
    idxName: "首页"
  }
})

注意：如果wxml组件的属性是boolean，例如checked="true"，合法。但假值必须写成checked="{{false}}"。

---

页面修改JS的Data

<navigation-bar title="首页" back="{{false}}"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <label>页面名称：</label><text >{{idxName}}</text>
  <button bind:tap="showMPName" type="primary" >展示小程序名称</button>
</scroll-view>

Page({
  showMPName() {
    const app = getApp();
    wx.showToast({
      title: app.globalData.mpName,
    })
    this.setData({
      idxName: app.globalData.mpName
    })
  },
  data: {
    idxName: "首页"
  }
})

改数据，并且页面同步改，只能通过this.setData({key:value})的方式。

this.data.key=value不行。

---

双向绑定

前面说的是单向绑定（数据可以影响页面），有时候我们还需要页面的更新能影响到数据&页面。例如：

input输入的内容展示在某个view中，同意协议的多选框勾选后，提交按钮变可用等。

做法有如下：

inputVal(e) {
    console.log(e)
    this.setData({
      bindVal: e.detail.value
    })
  },
  data: {
    idxName: "首页",
    bindVal: "初始内容",
    twBindVal: "",
    ifAgree: false
  }

<view class="idx_view">
    <label>双向绑定内容A：</label><text>{{bindVal}}</text>
    <input type="text" placeholder="请输入内容" catch:input="inputVal" />
  </view>
  <view class="idx_view">
    <label>双向绑定内容B：</label><text>{{twBindVal}}</text>
    <input type="text" placeholder="请输入内容" model:value="{{twBindVal}}" />
  </view>
  <view class="idx_view">
    <checkbox id="ifAgreeCheckBox" model:checked="{{ifAgree}}" /><label for="ifAgreeCheckBox">是否同意</label>
    <button id="submitData" type="primary" disabled="{{!ifAgree}}">提交</button>
  </view>

注意：<label>的for，绑定对应的组件（目前支持button、checkbox、radio、switch、input），代表点击此label时等同点击绑定的组件。