小程序 --- 基础案例

1. 样式隔离 --- 封装复选框标签

需求: 复选框组件是公共组件,以后需要在多个页面或多个项目中使用,所以需要给复选框组件设置一些默认样式,并且保证其在其他页面或其他项目中使用时,可以修改当前样式

1. 在 复选框组件.js 文件中配置样式隔离模式

Component({
  options:{
    styleIsolation: "shared"  // 但是这个属性会修改父组件、页面组件、其他使用了样式隔离为 apply-shared 和shared 的组件,这样并不符合需求,这里需要再度添加一个 class 类名, 以确保两个 class 类名同时存在的标签才应用此样式
  }
})

2. 复选框组件中设置样式

// 复选框没有被选中时的样式
.publish-checkbox .wx-checkbox-input {
  width: 24rpx !important;
  height: 24rpx !important;
  border-radius: 50% !important;
  border: 1rpx solid #fda007 !important;
}

// 复选框被选中时的样式
.publish-checkbox .wx-checkbox-input-checked {
  background-color: #fda007 !important;
}

// 复选框选中时前面的对钩样式
.publish-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  font-size: 22rpx;
  color: #fff
}

3. 页面中使用 复选框组件

1. 复选框组件是全局组件,需要在 app.json 中注册组件

{
  "usingComponents": {
    "zidingyi-checkbox": "./components/zidingyi-checkbox/zidingyi-checkbox"
  }
}

2. 页面中使用 复选框组件

<view>
  <!-- 为了不影响其他 checkbox, 这里多添加一个 class 类名 -->
  <zidingyi-checkbox class="publish-checkbox"  label="我已阅读并同意 用户协议 和 隐私协议" />
</view>

4. 组件使用者不满意这个样式,自己修改样式,在自己的 scss 文件中进行修改即可

1. 在 wxml 页面中,使用复选框组件,并在外层包裹一个view 组件,给其 class 类名,用以提高权重

<view class="custom">
  <zidingyi-checkbox label="我已阅读并同意 用户协议 和 隐私协议" />
</view>

2. 在 scss 中编写样式

// 复选框没有被选中时的样式
.custom .publish-checkbox .wx-checkbox-input {
  width: 24rpx !important;
  height: 24rpx !important;
  border-radius: 50% !important;
  border: 1rpx solid #fd07ab !important;
}

// 复选框被选中时的样式
.custom .publish-checkbox .wx-checkbox-input-checked {
  background-color: #fd07ab !important;
}

// 复选框选中时前面的对钩样式
.custom .publish-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  font-size: 22rpx;
  color: #fff
}

2. 父传子 --- 控制选中状态

1. 父组件的 js 文件中 定义初始值

Page({
    data: {
        isChecked: true
    }
})

2. 在父组件的 wxml 文件中 通过数据绑定的方式,向子组件内传递数据

<view>
  <!-- 为了不影响其他 checkbox, 这里多添加一个 class 类名 -->
  <zidingyi-checkbox class="publish-checkbox"  label="我已阅读并同意 用户协议 和 隐私协议" isChecked="{{ isChecked }}"/>
</view>

3. 子组件的 js 文件中,接收父组件传过来的数据, 由于不建议修改父组件传过来的数据,所以利用 properties 数据在页面初次渲染的时候会被监听到的特性,将其赋值给 data,以后如果再修改 复选框是否被选中, 直接修改 data 中的数据

Component({
  properties: {
    isChecked: {
      type: Boolean,
      value: false
    }
  },
  data: {
      checked: false
  },
  // 监听数据是否发生变化
  observers: {
      checked: function(newChecked){
          this.setData({
              checked: newChecked
          })
      }
  }
})

3. 子传父 --- 获取复选框的状态

1. 子组件的 js 文件中定义传递的数据,以及自定义事件名

Component({
  properties: {},
  data: {
    checked: false
  },
  methods: {
    // 将数据传递给父组件
    sendData() {
      // 参数一: 自定义事件名
      // 参数二: 需要携带的数据
      this.triggerEvent("sendChecked", this.data.checked)
    }
  }
})

2. 父组件的 wxml 文件中,绑定自定义事件及事件处理函数

<!-- 父组件中,通过 bind:子组件中定义的自定义事件 来绑定时间处理函数 -->
<view>
    <text>子组件传过来的数据为: {{ checked }}</text>
</view>
<custom01 bind:sendChecked="receiveChecked"/>

3. 父组件的 js 文件中,声明事件处理函数

Page({
  receiveChecked(event){
     if (event.detail) {
         // 发送请求
     } else {
         console.log("请同意协议!")
     }
  }
})