组件通信与表单组件（二）

本页对应 组件通信与表单组件，共 7 段视频，约 44 分钟。

学习目标

1. 能全局安装多色图标转换工具，并在字体文件所在目录执行命令，生成包含指定类名前缀的多色图标样式文件。
2. 能说明 PowerShell 执行 npm 脚本报权限错误的原因，并能以管理员身份修改执行策略后验证命令可正常执行。
3. 能将生成的多色图标样式文件放入项目并在 App.vue 中全局引入，使用“公共类名 + 图标类名”在页面中正确显示多色图标。
4. 能说明多色图标转换后以背景图实现的本质，并通过调整宽高验证图标尺寸变化。
5. 能在 uni-icons 中通过自定义前缀和图标类名集成多色图标，并验证显示效果与普通图标一致。
6. 能安装网络请求模块，创建工具目录封装请求实例、配置基地址并导出，通过测试页面点击按钮验证请求地址拼接与发送成功。

知识点

多色图标为什么要转换

uni-app 当前项目里，普通字体图标能用，但多色图标不能直接按字体图标的方式使用。转写里明确说“小程序不支持多色图标”，所以要把阿里图标库下载下来的多色图标做一次转换。
怎么想：多色图标本质不是单纯字体，转换工具处理后，最终仍以图片/背景图方式呈现。
怎么做：先全局安装转写中提到的转换工具（读作 iconfont-plus，实际包名以讲义为准），在解压后的多色字体文件目录中打开命令行执行转换。
易错点：不要以为转换后还是“字体图标”；后面看生成 CSS 会发现它用的是 background，尺寸也要用宽高控制。

npm install -g iconfont-plus
iconfont-plus

转换时按提示设置：输出文件夹可用默认 iconfont-vue；CSS 文件名可用默认；CSS prefix 改为 icon-symbol；字体大小默认 16；是否生成原生小程序组件可选默认。转写强调“只改了前缀名字，其他基本默认”。

转换结果与文件放置

转换完成后，目录里会多出 iconfont-vue 文件夹，里面有 CSS 和原生组件文件。
为什么需要：项目里真正要用的不是整个工具产物，而是转换后的样式文件。
怎么做：只把生成的 CSS 样式文件复制到项目根目录，转写中改名为 color-fonts.css。然后在 App.vue 里全局引入。
易错点：CSS 里不能省略分号；文件名实际中最好与讲义一致，方便对照代码。

/* App.vue 的 style 中 */
@import './color-fonts.css';

多色图标在页面中的使用

怎么想：用法与普通图标一致：一个公共类名 + 一个图标类名。公共类名来自转换时设置的 icon-symbol，图标类名从生成 CSS 中复制。
怎么做：

<text class="icon-symbol icon-xxx"></text>

如果要改大小，不要只写 font-size，因为转换后本质是背景图，应改宽高：

.icon-symbol {
  width: 26px;
  height: 26px;
}

易错点：类名之间要有空格；图标类名不要抄错；尺寸用 width/height，不是单纯 font-size。

与 uni-icons 整合

多色图标也能配合 uni-icons 使用。把图标类名放到 type，再用 custom-prefix 指定公共前缀。
怎么做：

<uni-icons type="icon-xxx" custom-prefix="icon-symbol" size="26"></uni-icons>

易错点：custom-prefix 不是随便写 custom，要写转换时设置的公共前缀；type 里放具体图标名。转写演示后两个图标显示一致，说明单色、多色图标都能整合进组件。

PowerShell 执行报错

安装或执行 Node 脚本时，PowerShell 可能报“未授权/安全”类错误。
为什么需要：这不是命令写错，而是 Windows 执行策略限制了脚本执行。
怎么做：以管理员身份打开 PowerShell，执行执行策略命令，提示时输入 A 或 Y 确认。
易错点：改完要关闭旧窗口再试；用 CMD 可能不报这个错，但课堂仍建议把 PowerShell 权限配置好。

Set-ExecutionPolicy RemoteSigned

网站图标 favicon

项目默认标签页没有小图标，正式项目一般会配。
怎么做：把图标放到项目根目录，在 index.html 的 head 中写 link，路径用 / 开头。
易错点：图标没放根目录会 404；浏览器有缓存，打开调试时可在刷新按钮右键“清空缓存”后再看。

<link rel="icon" href="/favicon.ico">

网络请求模块安装与封装

uni.request 只负责发请求，不包含项目业务。实际项目要处理 baseURL、token、拦截器等，所以要做二次封装。转写推荐使用 luch-request，用法接近 axios。
怎么做：安装后在 utils/http.js 中实例化并导出。

npm install luch-request

// utils/http.js
import Request from 'luch-request'

const http = new Request({
  baseURL: '讲义提供的测试基地址'
})

export { http }

易错点：baseURL 不配，请求路径不会按预期拼接；导出与导入的括号要对应；测试代码建议放独立 pages/test/index.vue，不要到处乱写。

<template>
  <u-button type="primary" @click="handleClick">测试请求</u-button>
</template>

<script>
import { http } from '@/utils/http.js'

export default {
  methods: {
    handleClick() {
      http.request({
        url: '/ic'
      })
    }
  }
}
</script>

点击按钮后打开 Network，检查是否出现 /ic 请求、基地址是否拼上。只要能成功发出请求，就说明这一层封装基本可用。

先看现象：报红不一定是 npm 装坏了

为什么需要：在 Windows 的 PowerShell 里执行 npm 相关命令时，常见报错会提到“未授权”“禁止运行脚本”“security”等字样。很多同学第一反应是 node 或 npm 坏了，其实转写稿里反复强调：这是操作系统认为脚本不安全，限制了脚本执行。

怎么想：先看报错关键词。只要出现“脚本”“安全”“未授权访问权限”这类信息，就优先怀疑 PowerShell 执行策略，而不是急着重装 node。转写稿里的“C tree”就是 security 的同音误写，本质是安全策略限制。

怎么做：不要先改项目代码，也不要反复重装依赖。先确认当前终端是 PowerShell，再按下面的步骤查策略、改策略，最后关闭窗口重新验证。

易错点：把权限问题误判成包安装失败；在普通窗口里改策略；改完不关原窗口就测试，导致以为没生效。

用管理员身份打开 PowerShell

为什么需要：修改执行策略属于系统级设置，普通权限窗口可能改不动。转写稿里明确说“要以管理员打开”，并现场用 Windows 键搜索 CMD/PowerShell，再右键选择“以管理员身份运行”。

怎么想：不是所有命令都需要管理员，但“设置执行策略”这一步需要。先拿到管理员终端，后面的查询和设置才有意义。

怎么做：按 Windows 键，搜索 PowerShell 或 CMD，右键选择“以管理员身份运行”。转写稿里用 CMD 搜索入口，再以管理员身份运行，这是可行的；核心是管理员权限。

易错点：只在普通 PowerShell 里输入命令；打开的是项目内置终端而不是管理员终端；窗口标题没有“管理员”字样就开始改。

先查询，再设置执行策略

为什么需要：直接设置虽然也能做，但先查询能确认当前策略，排查时心里有数。转写稿里说“先查一下”，对应的就是查询执行策略。

怎么想：先 Get 查看，再 Set 修改。转写稿中“ge的 side”“Ourse”“高的晒”都是现场口误或同音，实际命令应纠正为 Get-ExecutionPolicy 和 Set-ExecutionPolicy。

怎么做：在管理员 PowerShell 中执行：

Get-ExecutionPolicy

查看当前策略后，再执行：

Set-ExecutionPolicy RemoteSigned

出现确认提示时，按转写稿输入 A，表示“全是/全部同意”。执行完成后关闭该窗口。

易错点：把 ExecutionPolicy 拼错；把 RemoteSigned 写成其他值；提示出现后不敢输入，或输入了非预期选项；设置完不关闭窗口。

关闭窗口，回到项目目录重试

为什么需要：执行策略修改后，原窗口可能仍沿用旧状态。转写稿里设置完特意说“这个窗口需要关闭掉”，再执行原命令验证。

怎么想：改的是终端环境限制，验证时要用新窗口。并且要回到正确目录，不能在上一个目录乱执行。

怎么做：关闭所有 PowerShell 窗口，重新打开项目目录。若使用图标转换工具，转写稿的做法是：解压多色图标文件，进入字体文件所在目录，按住 Shift 右键“在此处打开 PowerShell 窗口”，再执行课堂的转换命令。全局安装时可用：

npm install <课堂图标转换工具包名> -g

包名以讲义为准。安装后按提示设置输出目录、CSS 文件名、类名前缀等；转写稿中只改了前缀为 icon-symbol，其他保持默认。

易错点：目录跑错，不在字体文件目录执行；内置终端下载失败时不知道用外部终端；前缀和后面代码不一致；只拿生成目录里的 CSS 文件即可，不要把所有生成物都塞进项目。

替代方案与最终检查

为什么需要：转写稿提到，如果不用 PowerShell 而用 CMD，可能没有这个报错。但 CMD 切目录、操作成本稍高，所以仍建议把 PowerShell 设置好。

怎么想：解决权限问题后，优先保持原开发习惯；不要为了省事长期把策略设得过宽。RemoteSigned 是较常见的折中设置。

怎么做：重新执行原 npm 命令，若不再爆红即解决。若仍报错，依次检查：是否管理员、命令拼写、是否关闭旧窗口、是否在正确目录、是否被其他安全软件拦截。

易错点：设置一次就以为永久无问题；在不同终端之间混用；把“A 全是”理解成随便乱设；忽略项目目录和包名。

多色图标转换：为什么需要与怎么做

为什么需要：小程序/uni-app 中普通字体图标只能单色，优医咨询需要多色图标；但多色图标本身仍是图片资源，需要转换后才能按类名使用。
怎么想：用 iconfont 转换工具，把下载解压后的多色图标目录处理成“样式文件 + 背景图资源”，以后用类名引用。
怎么做：全局安装转换工具；进入“多色字体文件所在目录”执行命令。macOS 权限不足时加 sudo。

npm install iconfont-tools -g
# macOS 权限不足时：
sudo npm install iconfont-tools -g

在解压后的字体文件目录打开 PowerShell，执行转换命令（转写听作 iconfont-tools -o，以讲义/提示为准）：

iconfont-tools -o

按提示填写：输出文件夹可用默认名；CSS 文件名可用默认名；CSS prefix 改为 icon-symbol；字体大小默认 16；是否生成原生小程序组件可选默认。只改前缀时，其他直接回车。
易错点：命令必须在字体文件目录执行，目录跑错会找不到文件；prefix 必须与后续代码一致；生成的原生小程序组件在 uni-app 中可忽略。

转换后的本质：背景图而非字体颜色

为什么需要：要知道多色图标为什么改 width/height 而不是 font-size。
怎么想：打开生成 CSS，若看到 background: url(...)，说明多色图标被转成了背景图。
怎么做：保留生成的样式文件和图片资源，后续通过公共类名 + 图标类名使用。关键代码形态是：

/* 生成样式中可见背景图，而不是字体颜色 */
background: url(...);
width: 16px;
height: 16px;

易错点：把尺寸写成 font-size 无效；只复制 CSS 不复制图片资源会导致背景图丢失。

在 uni-app 中引入多色图标

为什么需要：图标要在多个页面使用，应全局引入，避免每页重复。
怎么想：把生成样式放到项目根目录，例如 color-fonts.css，在 App.vue 中全局引入。
怎么做：

<style>
@import './color-fonts.css';
</style>

页面中使用公共类名和具体图标类名，图标类名从生成 CSS 中复制：

<text class="icon-symbol icon-xxx"></text>

调整尺寸时改宽高：

.icon-symbol {
  width: 26px;
  height: 26px;
}

易错点：CSS 引入语句末尾不能省略分号，否则会报错；类名前缀要和生成文件一致；icon-xxx 要换成实际图标类名，不能照抄占位名。

与 uni-icons 配合使用

为什么需要：项目里已有 uni-icons，多色图标也应能统一到组件用法中。
怎么想：uni-icons 支持自定义前缀：图标类名放 type，公共前缀放 custom-prefix。
怎么做：

<uni-icons type="icon-xxx" custom-prefix="icon-symbol" size="26"></uni-icons>

易错点：type 里不要带公共前缀；custom-prefix 要写生成文件中的前缀；尺寸仍受背景图宽高影响。

网站图标配置

为什么需要：正式项目浏览器标签页需要小图标，优医咨询不能“光秃秃”。
怎么想：uni-app 的 index.html 中仍有 <head>，可写 <link>。
怎么做：把图标放项目根目录，在 index.html 的 <head> 下加入：

<link rel="icon" href="/favicon.ico">

易错点：路径写 / 表示根目录；图标没生效时，在打开调试的情况下右键刷新按钮“清空缓存”；未打开调试时右键可能无反应。

PowerShell 报错与网络请求模块

为什么需要：执行 npm 脚本时 PowerShell 可能因执行策略限制报“禁止运行脚本”。
怎么想：这是系统权限限制，不是命令写错；以管理员身份调整执行策略。
怎么做：管理员打开 PowerShell，先查看再设置：

Get-ExecutionPolicy
Set-ExecutionPolicy RemoteSigned

提示确认时输入 A（全部同意），关闭窗口后重试。网络请求使用 luch-request，安装后在 utils/http.js 封装：

npm install luch-request

import Request from 'luch-request'
const http = new Request({
  baseURL: '讲义中的测试地址'
})
export default http

测试页按钮点击发请求：

<template>
  <view>
    <button type="primary" @click="handleClick">测试请求</button>
  </view>
</template>
<script setup>
import http from '@/utils/http.js'
const handleClick = () => {
  http.request({ url: '/ic' })
}
</script>

易错点：Set-ExecutionPolicy 必须管理员权限；export default 导入时不要加花括号；baseURL 不配会导致请求路径不生效；测试代码建议放独立 test 页面，避免污染业务页面。

代码示例

1. PowerShell 执行 npm 脚本报错解决（管理员身份运行）

# 1. 先按 Win 键 -> 输入 cmd -> 右键“以管理员身份运行”
#    也可以在开始菜单搜索 PowerShell，右键“以管理员身份运行”

# 2. 先查看当前执行策略
Get-ExecutionPolicy

# 3. 修改执行策略，放开脚本执行权限
Set-ExecutionPolicy RemoteSigned

# 4. 出现确认提示时，输入 A 回车（A 表示“全是”，即全部同意）
#    执行策略的更改在注册表或本地计算机上更新。是否要更改执行策略?
#    [Y] 是  [A] 全是  [N] 否  [L] 全否  [S] 暂停  [?] 帮助 (默认值为“N”): A

# 5. 关闭当前窗口，重新打开 PowerShell / CMD，再次执行 npm 命令验证
npm -v

关键行与易错点

• 报错的关键词是 UnauthorizedAccess、因为在此系统上禁止运行脚本，本质是 操作系统限制了 Node 脚本的执行权限，不是 npm 装坏了，也不是包有问题。
• Set-ExecutionPolicy RemoteSigned 必须 以管理员身份 执行，普通窗口改不了。
• 提示里输入的是 A（全是），不是 Y，只输入 Y 只能改当前这一条。
• 改完必须 关掉旧窗口重新开一个 再执行命令，否则还是旧策略。
• 不想改策略也可以直接用 CMD 代替 PowerShell，CMD 没有这个限制，只是切换目录稍微麻烦一点。

---

2. 多色图标转换（iconfont-to-font）

# 1. 全局安装转换工具（Mac 电脑前面要加 sudo）
npm install iconfont-to-font -g

# 2. 解压从阿里巴巴图标库下载的多色图标压缩包
#    找到解压后包含 iconfont.css、iconfont.ttf 等字体文件的目录

# 3. 切换到该目录（这一步最关键，目录跑错就转换不出东西）
cd D:\projects\优医咨询\iconfont多色图标

#    也可以在资源管理器里：按住 Shift + 右键 -> 在此处打开 PowerShell 窗口

# 4. 执行转换命令
iconfont-to-font

# 5. 按提示逐项回答（除类名前缀外，其余全部回车用默认值）
#    设置输出文件夹的名称:                    -> 回车（用默认文件夹名）
#    输出 CSS 样式的文件名:                   -> 回车（用默认文件名）
#    CSS prefix 类名:                         -> 输入 icon-symbol   ← 只改这一项
#    设置字体的大小（默认 16）:                -> 回车（16）
#    是否产生原生小程序组件（默认 是）:        -> 回车（本项目用不到，可忽略）

# 6. 转换完成后，目录下会多出输出文件夹，里面的 CSS 就是最终要用的文件
#    打开可以看到：.icon-symbol-xxx { background: url(...) ; width: 16px; height: 16px; }

关键行与易错点

• 第 3 步的“切换到多色图标所在目录”是整个流程的关键，必须在有字体文件的那一层目录打开命令行，否则工具找不到源文件。
• 交互式提问里 只有 CSS 前缀改了（icon-symbol），其余全部默认。前缀改了以后，所有类名都会变成 icon-symbol-xxx，后面写页面代码要跟这个名字保持一致，否则图标不显示。
• 生成后目录里会出现两类东西：CSS/字体文件（要用的）和原生小程序组件（wxss、wxml、js、json，uni-app 里用不到，直接忽略）。
• 转换的本质是把多色图标又转成了背景图——生成的 CSS 里是 background: url(...)，理解了这一点，后面调大小才不会用错属性。

---

3. 多色图标在 uni-app 中的引入与使用 + 网站图标

<!-- App.vue -->
<script>
export default {
  onLaunch() {
    console.log('App Launch')
  },
  onShow() {
    console.log('App Show')
  },
  onHide() {
    console.log('App Hide')
  }
}
</script>

<style>
/* 引入转换后的多色图标样式文件（放在项目根目录，名字按课堂约定 color-fonts.css） */
/* 注意：这里的分号不能省略，省略会直接报错 */
@import './color-fonts.css';

page {
  background-color: #f5f6f7;
}
</style>

<!-- pages/index/index.vue -->
<template>
  <view class="box">
    <!-- 用法一：公共类名 + 图标类名，和普通图标用法完全一致 -->
    <text class="icon-symbol icon-symbol-dianpu" style="width: 26px; height: 26px;"></text>

    <!-- 用法二：配合 uni-icons，图标类名放 type，公共前缀放 custom-prefix -->
    <uni-icons type="icon-symbol-dianpu" custom-prefix="icon-symbol" size="26"></uni-icons>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>
.box {
  display: flex;
  align-items: center;
  padding: 20rpx;
}
</style>

<!-- index.html（项目根目录，保留 uni-app 原有的 script 标签，只加 link） -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>优医咨询</title>
    <!-- 网站图标：图片放项目根目录，路径以 / 开头 -->
    <link rel="icon" href="/favicon.ico" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

关键行与易错点

• @import './color-fonts.css'; 写在 App.vue 的全局 style 里 才是全局生效；结尾分号千万不能省，这是本节最容易踩的坑。
• 页面里写的是 两个类名：icon-symbol（公共类名）+ icon-symbol-dianpu（图标类名），中间必须有空格，和普通字体图标写法一致，只是换了个类名，记忆成本很低。
• 调大小用 宽高 而不是 font-size：因为转换后图标本质是 background 背景图，生成时提示的“字体大小 16”实际写进了 width/height，所以放大要改宽高。
• uni-icons 用法：图标类名放 type，custom-prefix="icon-symbol" 指定自定义前缀，单色图标和多色图标都能这样整合。
• index.html 里的 <link rel="icon" href="/favicon.ico"> 只要放在 head 下即可；图标文件放 项目根目录（因为路径写的是 /）。刷新后没生效，要在打开调试面板的状态下右键刷新按钮 → 清空缓存再刷新，没开调试时右键是没有“清空缓存”选项的。

常见错误

1. PowerShell 执行 npm/iconfont 命令报“禁止运行脚本/未授权”→系统执行策略限制脚本执行→以管理员身份打开 PowerShell/CMD，执行 Set-ExecutionPolicy RemoteSigned（按提示选 A/Y），关闭窗口后重试。
2. iconfont 转换命令找不到字体文件或输出异常→终端不在多色字体文件解压目录→在字体目录中 Shift+右键打开 PowerShell，或先 cd 到该目录再执行转换命令。
3. 多色图标页面不显示→生成文件未放对位置、未在 App.vue 全局引入，或类名前缀与转换时指定不一致→只取生成的 CSS 样式文件放项目根目录，在 App.vue 引入，并统一公共类名前缀。
4. 引入样式时报错→CSS/SCSS 中省略了分号→补齐分号后保存重试。
5. 修改 font-size 后多色图标尺寸不变→多色图标转换后本质是背景图→用 width、height 控制尺寸。
6. 请求地址拼接错误或 404→未配置 baseURL，或 request 路径与基地址重复/缺斜杠→实例化时配置 baseURL，请求处只传相对路径并检查拼接结果。
7. favicon 已配置但不生效→浏览器缓存或 link 路径错误→确认 index.html 的 head 中 link 路径正确，调试状态下刷新按钮右键“清空缓存”后再刷新。
8. uni-icons 渲染多色图标失败→type 与 customPrefix 拆分错误→按“公共类名前缀 + 图标类名”拆分，customPrefix 配公共前缀，type 配图标名。

练习

1. 全局安装 iconfont 转换工具，在多色字体解压目录执行转换，记录输出目录、CSS 文件名和自定义类名前缀。
2. 将生成的 CSS 文件放入项目根目录并在 App.vue 全局引入，在页面用“公共类名 + 图标类名”展示多色图标，并将尺寸改为 26 验证宽高控制。
3. 使用 uni-icons 渲染同一个多色图标，正确配置 customPrefix 与 type，与普通类名写法对比显示效果。
4. 复现 PowerShell 脚本执行报错，按管理员方式修改执行策略并重新打开终端，验证 npm 命令可正常执行。
5. 新建 utils/http.js，实例化请求模块并配置 baseURL 后导出；在 test 页面点击按钮发请求，通过 Network 面板确认基地址与路径拼接正确。

课堂画面

原视频对照

#	视频	时长
1	优医咨询-多色图标转换	08:28
2	powershell执行报错解决	04:45
3	优医咨询-多色图标应用	06:50
4	优医咨询-多色图标与uni-icons	01:45
5	优医咨询-网站图标	03:54
6	优医咨询-网络请求模块安装	08:10
7	优医咨询-网络请求配置基地址	10:35

小结

1. 多色图标不能直接按字体图标使用，需先转换再接入。
2. 转换成功的关键是终端目录正确、公共类名前缀统一。
3. 生成结果只需保留 CSS 样式文件，并在 App.vue 全局引入。
4. 多色图标用法与普通图标一致：公共类名加图标类名。
5. 多色图标尺寸由宽高控制，不是 font-size。
6. PowerShell 报错多与执行策略权限有关，改完需重开终端验证。
7. 网络请求应先封装实例、配置基地址并导出，再用测试页验证。
8. favicon 配置在 index.html 中完成，不生效时优先排查路径与缓存。