29. 教你零基础搭建小程序：小程序的常见组件—radio

子们，来了。

这一章继续继续，讲解小程序的常见组件（7）— radio单选框。

它与网页的单选框用法是大致相同的，但是有2个细节需特别注意。

1、可以通过 color属性来修改颜色

如上图，"选中"图标被选中时，默认样式是呈现绿色，这里可以通过 color属性来修改颜色。

2、当需要选中某个单选框，触发某一事件时，需和radio group 一起使用。

啥意思呢？看不懂？

别急，我们用一个需求来讲讲就懂了。

需求：创建男，女两个标签，当选中一个时，在图标下方显示文字"你选中的为男/女"

撸起袖子加油干：

1、新建一个页面 demo15

2、打开demo15.wxml 文件，删除原先的代码，写入如下代码：

  <radio-group bindchange="    ">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

3、保存，小程序界面显示男，女两标签。

点击男/女标签，图标出现红色选中，但没有提示文字。

别着急，我们慢慢来。

4、给radio-group 绑定change 事件，修改代码成如下：

（与上面代码神似，注意观察啊）

 <radio-group bindchange="handlechange">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

5、在demo15.wxml中，加上view标签，用来显示页面中显示的值，代码如下：

<radio-group bindchange="handlechange">  
  <radio color="red" value="male">男</radio> 
 <radio color="red" value="female" >女</radio> 
 </radio-group>

<view>您选中的是：{{gender}}</view>

保存后，小程序页面选中某个图标后，出现提示文字。

6、在demo15.js文件中，写入页面逻辑的代码。

首先先删除原先的代码，只保留data部分。

写入如下代码（内含每步的注释）：

Page({
  data: {
    gender: ""
 },
 handleChange(e){
 // 1 获取单选框中的值
 let gender=e.detail.value;
 // 2 把值 赋值给 data中的数据
 this.setData({
 // gender:gender
 gender
 })
 }
})

保存后，小程序显示如下，选中某一个图标，下面就会有提示文字。

我们的需求实现了。

以上步骤很好的解释了radio 单选框的第2个细节：

当需要选中某个单选框，触发某一事件时，需和radio group 一起使用。

还有第一个细节：radio的颜色属性。

我们演示一下：

很简单，只需一步就搞定。

修改demo15.wxml文件中 radio color 的部分，
这里将原先的红色修改为绿色（green），其余不变。

代码如下：

  <radio-group bindchange="handlechange">
 <radio color="green" value="male">男</radio>
 <radio color="green" value="female" >女</radio>
 </radio-group>
 
 <view>您选中的是：{{gender}}</view>

保存后，图标被选中后的颜色发生了变化：

到这里，我们的第一个小细节也演示完了。

单选框的用法基本就这两点与网页中的单选框的使用不同，其余具体知识点，请移步官方文档。

快门传送：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

TML元素介绍（一）

个人学习总结输出，持续更新。Day day study！Day day up！

这里的元素大多数是普通元素。此处的普通指的是：几乎没有自己特殊的属性，只指定通用属性和各种事件属性。

基本元素

:定义HTML注释。
<html>:HTML5文档的根元素，允许省略，但不建议省略。
<head>:HTML5文档的页面头部分，允许省略，但不建议省略。
<title>:HTML5文档页面标题。
<body>:页面主体部分。
<title>:定义标题1-标题6。
<p>:定义段落。
<br>:插入一个换行。
<hr>:水平线，主题结束语义。
<div>:文档中的节。
<span>:与div类似，表示一般性文本，为内联元素。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <h1>标题1</h1>
 <h2>标题2</h2>
 <h3>标题3</h3>
 <h4>标题4</h4>
 <h5>标题5</h5>
 <h6>标题6</h6>
 <p>
 <span>
 其后无br
 </span>
 <span>
 其后有br
 </span>
 <br>
 <span>
 其后有hr
 </span>
 <hr>
 <span>
 其后有div
 </span>
 <div id="">
 一般p内不包含div，div内可包含一切，所以以往大量使用，造成了语义化不明确。
 </div>
 </p>
 </body>
</html>

文本格式相关元素

<b>:粗体文本
<i>:斜体文本
<em>:表示强调，样式也是斜体
<strong>:粗体文本,与<b>用法类似。
<small>:小号字体文本。
<sup>：上标文本
<sub>：下标文本
<bdo>：文本显示方向


 <p>
 <b>b加粗</b><strong>strong加粗</strong>正常
 <small>缩小</small>2<sup>2</sup>a<sub>2</sub>
 <hr >
 <bdo dir="ltr">左向右</bdo>
 <hr >
 <bdo dir="rtl">左向右</bdo>
 </p>

旧的语义相关元素

<abbr>：表示缩写，
title：属性代表全称。
<address>：表示地址
<blockquote>：表示长文本引用。
cite：属性指定出处
<q>：表示短文本引用。
<cite>：作品标题。
<code>：代码文本。
<dfn>：用于定义专业术语。
<del>：待删除线文本。
cite：属性指定原因、
datetime：属性标注修改时间
<ins>：表示插入的文本。
cite：属性指定原因、
datetime：属性标注修改时间
<pre>：预格式化。内部可直接使用本来需要转移的文本。
<samp>：示范文本。
<kbd>：用于定义键盘文本。
<var>：表示变量。


 <p>
 <abbr title="中华人民共和国">中国</abbr>
 <address>西安市雁塔区幸福小区3单元403室</address>
 <cite>作品标题</cite>
 <blockquote cite="www.baidu.com">表示长文本引用。通常带有`cite`属性指定出处（可以使url）</blockquote>
 <q>表示短文本引用。</q>
 <code>
 let tempDom=document.querrySelect('#id');
 dom.hidden=true;
 </code>
 <dfn>牛顿第三定理：</dfn>
 <br>
 <del>待删除线文本。通常带有`cite`属性指定原因、通常带有`datetime`属性标注修改时间</del>
 <br>
 <ins>表示插入的文本。常带有`cite`属性指定原因、通常带有`datetime`属性标注修改时间</ins>
 <pre>/\'''"""</pre>
 <samp>示范文本。</samp>
 <kbd>ctrl</kbd>
 <var>i</var>
 </p>

H5新增语义元素

<mark>：标记重点。
<time>：标注时间。
datetime：提供格式化的时间，内容本身格式标准，可以不使用此属性。
pubdate：boolean 是否是发布日期
<details>与<summary>：摘要与详情，如果摘要放在详情里，摘要可见，点击摘要显示详情。
<ruby>、<rtc>、<rb>、<rt>和<rp>元素：用于为东亚文字定义解释。
<bdi>:将一段文本隔离出来设置属性。
<wbr>：建议换行。（可使得浏览器在单词中间换行）
<menu>和<menuitem>:用来定义菜单和菜单项。暂无浏览器支持。支持如下属性：
type：三个值，radio、checkbox、command（默认值）
label：指定菜单项文本
icon：指定菜单项图标。
disabled：指定菜单项是否不可用。
checked：type为checkbox或radio时候有意义
radiogroup：type为radio时候有意义，指定菜单项所属分组。
default：指定默认菜单项。

这是一个<mark>重点</mark>
 <time pubdate="true" datetime="2019-10-14 22:05">2019-10-14 22:05</time>
 <details>
 <summary>摘要</summary>
 这是详情、、、、
 </details>
 <ruby>
 <rb>饕</rb>
 <rp>(</rp>
 <rt>tao</rt>
 <rp>)</rp>
 <rb>餮</rb>
 <rp>(</rp>
 <rt>tie</rt>
 <rp>)</rp>
 </ruby>

H5新增结构元素

没啥好说的，见名知其意，解决以前全用div语义化缺失的问题。

<article>：一块独立内容；
<section>：几块分开内容；
<header>、<footer>、<header>、<nav>、<aside>
<figure>和<figcaption>：定义图片区域，<figcaption>是标题

看到这里了，关注吧，由浅入深，持续更新一起学习进步。如果有什么建议和补充，请积极评论。

在线咨询

上一篇：丢掉JS，CSS也可以独立完成许多牛掰的功能
下一篇：男朋友老是说自己R语言很6，快来用这40道题目检测他

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

29. 教你零基础搭建小程序：小程序的常见组件—radio

TML元素介绍（一）

您的项目需求