模板：

1、案例描述

2、实现过程

2.1、代码展示

• wxml

<!--pages/kj/demo111-template/index.wxml-->
<view class="box">
  <view class="title">修改字体样式和大小</view>
  <view class="concern">
    <text class="concern" style="font-size: {{font_si}};font-weight: {{font_w}}; font-style: {{font_st}}; text-decoration: {{text_d}};">修改字体展示</text>
    <checkbox-group class="concern" bindchange="checkbox_change">
      <checkbox value="bold">加粗</checkbox>
      <checkbox value="tilt">倾斜</checkbox>
      <checkbox value="underline">下划线</checkbox>
    </checkbox-group>
    <radio-group class="concern" bindchange="radio_change">
      <radio value="15px" checked="true">15px</radio>
      <radio value="25px">25px</radio>
      <radio value="35px">35px</radio>
    </radio-group>
  </view>
</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
.concern{
    margin-top: 10px;
    margin-bottom: 10px;
}

• js

// pages/kj/demo111-template/index.js
var list = [];
var font_si = '15px';
var font_w = '';
var font_st = '';
var text_d = '';
Page({
  data: {
    font_si : font_si,
    font_w : font_w,
    font_st : font_st,
    text_d : text_d
  },
  checkbox_change:function(e){
    list = e.detail.value;
    for(var i = 0;i < list.length;i++){
      if(list[i] == 'bold'){
        font_w = 'bold';
      }
      if(list[i] == 'tilt'){
        font_st = 'italic';
      }
      if(list[i] == 'underline'){
        text_d = 'underline';
      }
    }
    this.setData({
      font_w : font_w,
      font_st : font_st,
      text_d : text_d
    })
    console.log(list)
  },
  radio_change:function(e){
    font_si = e.detail.value;
    this.setData({
      font_si : font_si
    })
  }
})

2.2、结果展示

结果展示.jpg

3、知识汇总

3.1、本节知识

知识要点.jpg
checkbox组件.jpg
checkbox组件属性.jpg
radio组件.jpg
radio组件属性.jpg

3.2、补充知识

知识总结.jpg
wx.showToast的参数属性.jpg

4、踩坑说明

• 函数内部报错：TypeError: this.setDate is not a function

//报错代码
checkbox_change:function(e){
    list = e.detail.value;
    for(var i = 0;i < list.length;i++){
      if(list[i] == 'bold'){
        font_w = 'bold';
      }
      if(list[i] == 'tilt'){
        font_st = 'italic';
      }
      if(list[i] == 'underline'){
        text_d = 'underline';
      }
    }
    this.setDate({
      font_w : font_w,
      font_st : font_st,
      text_d : text_d
    })
    console.log(list)
  }
//修改后的代码
checkbox_change:function(e){
    list = e.detail.value;
    for(var i = 0;i < list.length;i++){
      if(list[i] == 'bold'){
        font_w = 'bold';
      }
      if(list[i] == 'tilt'){
        font_st = 'italic';
      }
      if(list[i] == 'underline'){
        text_d = 'underline';
      }
    }
    this.setData({
      font_w : font_w,
      font_st : font_st,
      text_d : text_d
    })
    console.log(list)
  }
//代码出错的原因，就是Data被输出成Date。

• 关于checkbox和redio的一些说明：
  1、checkbox是多选的，和checkbox-group组合使用。
  2、radio是单选的，和radio-group组合使用。
  3、bindchange这个函数可以在checkbox-group和radio-group中使用。checkbox-group中的bindchange每次传递给js中绑定函数的是一个列表。radio-group中的bindchange每次传递给js中绑定函数的是一个值。
  4、不论是checkbox还是radio，都必须声明一个value，在选框被勾选时，这个value传递给js中绑定函数，js中的绑定函数，通过“返回值.detail.value”在函数中调用返回值。