前端小组第一次培训2023/9/24

单双标签组件与CSS引入

HTML

HTML（超文本标记语言）是用于创建网页结构的标记语言。通过HTML，开发者可以定义网页的标题、段落、链接、图像等元素，以及它们的布局和样式。

双标签组件

介绍

双标签组件，即使用时必须成对出现，每有一个<组件名>出现必须出现一个</组件名>与其对应。两标签间一般夹有内容进行使用。

注意单标签与双标签/的出现位置，注意区分。

<组件名>内容</组件名>

text组件

text组件用以渲染文本，在text的双标签中间加入渲染的目标内容。

<text>在此加入文本</text>
<text>123456</text>

其他组件属性详见开发文档👉基础内容 / text (qq.com)

view组件

view组件即视图容器，它同样可以完成渲染文本的任务，但就实际开发而言，一般不用于渲染文本，而是用于嵌套使用，将多个组件包裹，构成一个整体，以便于进行CSS属性的应用。

如下是简单的示例代码。

<view>
    <text>一个整体</text>
    <view>view组件用以渲染文本</view>
    <image src="https://s1.imagehub.cc/images/2023/08/10/wallhaven-zyxvqy.jpeg"/>
    <input placeholder="数字输入框" type="digit"/>
</view>

如下是实际开发中view组件的应用情况

注意：以下示例代码给出的并不是微信原生框架，而是Vue框架，与微信原生框架语法有所不同。

<view class="selector">
    <picker @change="bindPickerChange" :value="index" :range="subjectnum">
        <view>请选择科目数量</view>
        <view class="picker">当前选择：{{index}}</view>
    </picker>
</view>
<view class="main" v-if="subjectinfo.length > 0">
    <view class="head">
        <view>科目</view>
        <view>学分</view>
        <view>成绩</view>
    </view>
    <view class="form-cell" v-for="(item,index) in subjectinfo" :key="index">
        <view class="name">{{item.subject}}{{index+1}}</view>
        <input class="credit" type="digit" placeholder="请输入学分" @input="confirmCredit" :data-index="index"/>
        <input class="grade" type="digit" placeholder="请输入成绩" @input="confirmGrade" :data-index="index"/>
    </view>
</view>
<view class="result" v-if="subjectinfo.length > 0">
    <view class="cal" @click="cal">计算</view>
    <view>您的绩点为:{{result}}</view>
</view>
<view class="gap"></view>
<view class="info">
    由天财网协技术部提供
</view>
</view>

其他组件属性详见开发文档👉视图容器 / view (qq.com)

单标签组件

介绍

单标签组件，即<组件名/>使用时不必成对出现，组件后也不必跟随内容的组件，单标签已足以实现其功能。

注意单标签与双标签/的出现位置，注意区分。

input组件

input组件用以渲染输入框，较为常用的组件属性为placeholder，type，可与JavaScript配合使用记录输入内容。

如下是input组件配合JavaScript记录输入内容的代码。(JS部分有兴趣的同学可以了解，不做硬性要求)

<!-- bindinput为在用户进行输入操作时执行方法func -->
<input placeholder="文本输入框" type="text" bindinput="func"/>
Page({
    data: {
        content: ""	//声明名为content内容为空的字符串类型页面全局变量
    },
    func: function(e) {	//记录输入事件对象e
        console.log(e);	//不知道事件对象e的内容可进行控制台打印寻找需要的属性值
        this.data.content = e.detail.value;	//不需要做渲染层内容更新，不需要this.setData()
    }
})

其他组件属性详见开发文档👉表单组件 / input (qq.com)

image组件

image组件用以渲染图片资源，支持 JPG、PNG、SVG、WEBP、GIF 等格式，较为常用的组件属性为src，mode，图片来源可以是本地也可以是在线图片(图床)，渲染本地图片资源时要使用相对路径进行引用。

<!-- 本地资源 -->
<image src="../../images/image1.png" mode="widthFix"/>
<!-- 在线资源 -->
<image src="https://s1.imagehub.cc/images/2023/08/10/wallhaven-zyxvqy.jpeg" mode="aspectFill"/>

其他组件属性详见开发文档👉媒体组件 / image (qq.com)

CSS

CSS（层叠样式表）是用于设置网页样式和布局的样式表语言。通过CSS，开发者可以控制网页元素的颜色、大小、位置、字体等外观效果，实现网页的美化和排版。

CSS的内联引入

内联引入即在组件标签内添加style属性，style="属性1: 属性值; 属性2: 属性值; 属性3: 属性值;"。

示例代码如下

<!-- 将Hi here.文本颜色改为绿色，字体大小为10像素，text组件背景颜色改为洋红色 -->
<!-- 颜色可用预设的常用颜色英文，也可用16进制颜色码表示(更精确) -->
<text style="color: green; font-size: 10px; background-color: #FF00FF">Hi here.</text>

CSS选择器引入

选择器引入需要指定组件class名，class="name"，注意此处的class不应与C++等面向对象语言中的class混淆，此处的class更像是为组件起了一个别名方便指定CSS属性。

示例代码如下

<view class="module">
    <text class="txt">文本1</text>
    <view>文本2</view>
</view>
/*指定名为module的组件采用弹性布局，方向为纵向*/
.module {
    display: flex;
    flex-direction: column;
}

/*指定名为txt的组件颜色改为红色*/
.txt {
    color: red;
}

/*指定名为module的组件下的所有view组件背景颜色为绿色*/
.module view {
    background-color: green;
}

优先级问题

关于两种方式同时使用时且指定相同属性但值却不同的问题

结论：内联方式的优先级最高。

示例代码如下

<!-- 最终text组件的文本颜色为绿色，背景颜色为黄绿色 -->
<text class="txt" style="color: red;">This is a string.</text>
.txt {
    /*color属性将以内联属性为准而忽略color: green*/
    color: green;
    /*内联未指定background-color，所以background-color: #EAF161;仍然生效*/
    background-color: #EAF161;
}

👉(戳我下载资料)👈

可配合百度网盘不限速帖子食用👉百度网盘不限速 | whaleghostの小窝