微信小程序_1

对应课程链接：https://www.bilibili.com/video/BV1LF4m1E7kB?spm_id_from=333.788.videopod.episodes&vd_source=2fbb4b17075136a98e03423a799add2c
微信公众平台：https://mp.weixin.qq.com/
微信开发者工具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
微信官方文档（小程序）：https://developers.weixin.qq.com/miniprogram/dev/framework/

一、小程序基础

1.1 什么是小程序

微信小程序是一种运行在微信内部的轻量级应用程序。
在使用小程序时不需要下载安装，用户扫一扫或搜一下即可打开应用。
它也体现了 “用完即走” 的理念，用户不用关心安装太多应用的问题。它实现了应用“触手可及”的梦想，
应用无处不在，随时可用，但又无须安装卸载。

特点:

小程序的四大特性：无须安装、用完即走、无须卸载、触手可及

无须安装：体积小，用户感知不到下载的过程
触手可及：用户扫一扫或搜一下即可打开应用，通过下拉能访问使用的小程序
用完即走，无须卸载

1.2 微信小程序账号注册

小程序开发与网页开发不一样，在开始微信小程序开发之前，
需要访问微信公众平台，注册一个微信小程序账号。
在拥有了小程序的账号以后，我们才可以开发和管理小程序，
后续可以通过该账号进行开发信息的设置、成员的添加，也可以用该账号查看、运营小程序的相关数据。

📌 注意事项：

在申请账号前，我们需要先准备一个邮箱，该邮箱要求：

1️⃣ 未被微信公众平台注册❗

2️⃣ 未被微信开放平台注册❗

3️⃣ 未被个人微信号绑定过 ! 如果被绑定了需要解绑或使用其他邮箱 ❗

1). 打开微信公众平台，点击立即注册

2). 选择注册的帐号类型，在这里我们需要 选择小程序

3). 输入账号信息

4). 邮箱激活，需要进入邮箱进行激活

06-账号激活

5). 信息登记，注册类型 ( 需要选择 中国大陆和个人，企业其他需要资质认证 )

6). 主体信息登记与确认

📌 注意:
在进行管理员身份验证的时候，推荐使用自已的微信进行扫码，
将自已设置为小程序账号的管理员，方便以后对小程序进行开发、成员等相关的设置

08-主体信息登记-确认

7). 小程序注册完成，点击前往小程序，即可进入小程序后台

1.3 完善小程序账号信息

在完成小程序账号的注册后，你便可以打开微信公众平台对小程序账号进行一些设置，
这是你开发前的准备工作，完善后才可以进入后续的开发步骤，这是因为小程序在后续进行
提交审核的时候，小程序账号信息是必填项，因此在注册小程序以后，需要补充小程序的基本信息，
如 名称、图标、描述 等。

📌 注意事项：

在填写小程序类目时 不要选择游戏类型，否则微信官方将会视为小游戏开发 ❗

点击 前往填写，填写小程序基本信息即可

点击 前往设置 , 设置小程序类目信息

1. . 点击右上角添加类目

2). 管理员授权

3). 手机微信进行认证

4). 添加小程序类目，

1.4 小程序开发者 ID

小程序的开发者账号是免费的，只要开发者满足开发资质就可以免费注册，并且会获得对应的开发者 ID
一个完整的开发者 ID 由和一个组成。

小程序 ID 即 AppId 是小程序在整个微信账号体系内的唯一身份凭证，后续在很多地方都会用到，
例如：新建小程序项目、真机调试、发布小程序等操作时，必须有小程序 ID。

小程序密钥是开发者对小程序拥有所有权的凭证，
在进行微信登录、微信支付，或进行发送消息等高级操作时会使用到

在微信公众后台，单击左侧开发标签，选择 "开发管理"，在新的页面中点击 "开发设置"，
就可以看到开发者 ID 信息。请妥善保管你的小程序 ID 和小程序密钥，
在后续的开发中会经常使用到，获取位置见下图：

1.5 开发成员＆体验成员

小程序提供了两种不同的成员角色：项目成员 和 体验成员
- 项目成员：参与小程序开发、运营的成员，可登陆小程序管理后台，包括运营者、开发者及数据分析者。
  管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。
- 体验成员：参与小程序内测体验的成员，可使用体验版小程序，
  但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

成员管理

1.6 微信开发者工具

为了帮助开发者简单和高效地开发和调试微信小程序，微信官方提供了微信开发者工具，
利用开发者工具可以很方便地进行小程序开发、代码查看以及编辑、预览和发布等功能。

在微信开发者工具下载页面，可以看到微信开发者工具包含三个版本：
- 稳定版：稳定性高，开发中一般推荐大家使用稳定版本
- 预发布版：稳定性尚可，一般包含新的、大的特性，通过了内部测试
- 开发版：稳定性差，主要用于尽快修复缺陷和敏捷上线小的特性，如果想体验新特性，可以使用这个版本

选择合适的版本进行下载，在下载完成后，双击下载好的微信开发者工具安装包，根据引导点击下一步、我接受、

直至安装完成。第一次使用微信开发者工具的时候，需要使用手机微信扫码登录，登录成功即可进入项目选择界面

📌 注意事项：

微信开发者工具必须联网使用 ❗

1.7 创建小程序项目

1.7.1 创建项目

使用小程序开发者工具创建一个新的项目，步骤如下：

1). 打开微信开发者工具，左侧选择小程序，点击 + 号即可新建项目

在弹出的新页面，填写项目信息
- 项目名称：输入项目名称
- 目录：选择小程序开发文件夹，注意：
- AppID：填写自己申请的小程序 AppID
- 开发模式：选择小程序
- 后端服务：选择不使用云服务
- 模板选择：选择不使用模板

3). 点击确定，如果能够看到小程序的开发主界面，说明小程序项目已经创建成功

1.7.2 开发者工具设置

为了后续高效的对小程序项目进行开发，我们需要对微信开发者工具进行一些个性化的设置，

例如：设置模拟器位置、编辑器主题、编辑区行高等，

当然你可以继续使用官方默认的，也可以按照自己的喜好设置，设置步骤如下：

1). 将小程序模拟器移动右侧：点击菜单栏的视图 ➡ 外观 ➡ 将模拟器移到右侧，
小程序模拟器即可调整到右侧

2). 小程序主题设置，点击菜单栏的设置 ➡ 外观设置 ➡ 在弹框中将主题和调试工具选择为深色

3). 编辑区的设置，点击菜单栏的设置 ➡ 编辑器设置 ➡ 按照自己的喜好调整行距和字号，或者其他设置

1.8 小程序目录结构＆文件介绍

在将小程序项目创建好以后，我们先来熟悉小程序项目的目录结构，如下图：

一个完整的小程序项目分为两个部分：主体文件、页面文件

主体文件 又称小程序全局文件，顾名思义，全局文件能够作用于整个小程序，影响到小程序的每个页面，
且 主体文件必须放到项目的根目录下，主要由三部分组成：

文件名	作用	是否必须
`app.js`	小程序入口文件	必须
`app.json`	小程序的全局配置	必须
`app.wxss`	小程序的全局样式	非必须

页面文件 是每个页面所需的文件，小程序页面文件都存放在 pages 目录下，
一个页面一个文件夹，每个页面通常由四个文件组成，每个文件只对当前页面有效：

文件名	作用	是否必须
`.js`	页面逻辑	必须
`.wxml`	页面结构	必须
`.wxss`	页面样式	非必须
`.json`	页面配置	非必须

📌 注意事项：

页面文件，wxss、json 文件能够覆盖主体文件中的样式和配置
强烈建议：页面文件夹名称和页面文件名称要保持一致

新建小程序文件和文件夹作用清单：

shell

├─pages	                    ➡ 小程序页面存放目录
│
│  ├─index				   ➡ index 文件夹代表是 index 页面所需的文件
│  │      index.js          ➡ index 页面逻辑
│  │      index.json        ➡ index 页面配置
│  │      index.wxml        ➡ index 页面结构
│  │      index.wxss        ➡ index 页面样式
│  .eslintrc.js              ➡ Eslint 配置文件
│  app.js                    ➡ 小程序入口，即打开小程序首页执行的项目
│  app.json                  ➡ 小程序的全局配置
│  app.wxss                  ➡ 小程序的全局样式
│  project.config.json       ➡ 小程序开发者工具配置
│  project.private.config.json
│  sitemap.json              ➡ 小程序搜索优化

1.9 切换渲染模式

小程序目前有两种渲染模式，一种是 Skyline 渲染模式 ，一种是 WebView 渲染模式
默认是 Skyline ，这是最新的渲染模式，目前还不是很成熟，所以要切换成 WebView

那么如何切换 ❓

1). 打开 app.json 文件

删除如下三个配置项：

3). 删除后 ctrl + s 保存一下，保存后如下

1.10 如何调试小程序

首先可以做一项配置：我们发现如下控制台会打印很多系统信息, 这会影响我们调试

右键隐藏

点击这个叉号可以再显示

在进行项目开发的时候，不可避免的需要进行调试，那么如何调试小程序呢 ❓

📌 注意事项：

微信开发者工具缓存非常严重❗❗❗❗

如果发现代码和预期不一样，先点击编译❗

编译后还是没有达到预期的效果，就需要清除缓存❗ 甚至重启项目才可以❗

1.11 如何新建页面

第一种方式：
- 1). 在 pages 目录上点击右键 新建文件夹，输入页面目录的名称，例如：list
- 2). 在 list 目录上点击右键 点击新建page，输入页面文件的名称，例如：list
- 3). 不要输入后缀！！直接回车

📌 注意事项：

在输入页面文件名称的时候，不要输入后缀名 ❗
新建页面成功以后，会自动在 app.json 的 pages 选项中新增页面路径

第二种方式：
- 在 app.json 的 pages 选项中，新增页面路径即可
- 在新增页面目录以后，会自动在 pages 目录下生成页面文件

1.12 调试基础库

小程序调试基础库是指微信开发者工具中可以选择的微信基础库版本。
微信基础库是指小程序的运行环境，给小程序提供了运行所需的各种 API 和工具，
以及基础框架和运行逻辑等。

小程序开发者可以在微信开发者工具中选择所需的微信基础库版本，作为运行和调试小程序时的运行环境。
每个小程序有自己所允许使用的基础库最低版本要求，开发者需要选择要兼容的基础库版本，
从而确保小程序的功能正常运行。

举个例子：分享到朋友圈这个功能 , 从基础库 2.11.3 开始支持

二、小程序配置文件

2.1 介绍

JSON是一种轻量级的数据格式，常用于 前后端数据的交互 ，但是在小程序中，
JSON 扮演的 静态配置 的角色，用于配置当前页面或组件的属性和行为，
每个页面或组件也都可以拥有一个对应的 json 文件。

小程序中常见的配置文件有以下几种：
- 全局配置文件：app.json ➡ 小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。
- 局部配置文件：页面.json ➡ 小程序页面配置文件，用于配置当前页面的窗口样式、页面标题等
- 项目配置文件：project.config.json ➡ 小程序项目的配置文件，
  用于保存项目的一些配置信息和开发者的个人设置
- 搜索配置文件：sitemap.json ➡ 配置小程序及其页面是否允许被微信索引，
  提高小程序在搜索引擎搜索到的概率

2.2 全局配置

小程序 app.json 文件是小程序的全局配置文件，用于配置小程序的一些全局属性和页面路由。
当小程序启动时，会自动读取 app.json 文件中的配置，根据配置生成对应的页面和组件、
界面表现、网络超时时间、底部 tab，在小程序运行过程中起着关键的作用。

2.2.1 pages

pages 字段：用于指定小程序由哪些页面组成，用于为了让小程序知道由哪些页面组成
以及页面定义在哪个目录，每一项都对应一个页面的路径（含文件名）信息

json

{
  "pages": [
    "pages/index/index",
    "pages/list/list"
  ]
}

📌 注意事项：

文件名不需要写文件后缀框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理
小程序中新增/减少页面，都需要对 pages 数组进行修改。
未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）

详细文档: pages 配置项

2.2.2 window

window 字段：用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	描述	类型	默认值
`navigationBarBackgroundColor`	导航栏背景颜色	`HexColor`	`#000000`
`navigationBarTextStyle`	导航栏标题颜色，仅支持 `black` / `white`	`string`	`white`
`navigationBarTitleText`	导航栏标题文字内容	`string`
`backgroundColor`	下拉 `loading` 的样式，仅支持 `dark` / `light`	`string`	`dark`
`enablePullDownRefresh`	是否开启全局的下拉刷新	`boolean`	`false`
`onReachBottomDistance`	页面上拉触底事件触发时距页面底部距离单位为 `px`	`number`	`50`

我们按照下图来配置 window

json

{
  "window": {
    "navigationBarBackgroundColor": "#f3514f", 
    "navigationBarTitleText": "慕尚花坊",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark"
  }
}

详细文档: window 配置项

2.2.3 tabBar

tabBar 字段：定义小程序顶部、底部 tab 栏，如果小程序是一个多 tab 应用，
例如：可以在客户端窗口的底部或顶部通过 tab 栏可以切换页面，
可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar 是用于切换页面的，所以我们先快速创建几个页面：

📌 小技巧：

当我们想要选中一个文字，想同时修改一样的文字的时候，比如下面这两个想同时修改：

那么就可以按 Ctrl + D 可以选中下一个相同的文字，要是想选中多个就多按几次...

tabBar 配置项

属性	描述	类型	默认值
`color`	tab 上的文字默认颜色，仅支持十六进制颜色	`HexColor`
`selectedColor`	tab 上的文字选中时的颜色，仅支持十六进制颜色	`HexColor`
`backgroundColor`	tab 的背景色，仅支持十六进制颜色	`HexColor`
`borderStyle`	tabbar 上边框的颜色，仅支持 `black` / `white`	`string`	`black`
`list`	tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
`position`	tabBar 的位置，仅支持 `bottom` / `top`	`string`	`bottom`

List 配置项：list 是一个数组，只能配置最少 2 个、最多 5 个 tab，
tab 按数组的顺序排序，每个项都是一个对象

属性	描述	类型	是否必填
`pagePath`	页面路径，必须在 pages 中先定义	string	是
`text`	tab 上按钮文字	string	是
`iconPath`	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，	string	是
`selectedIconPath`	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。	string	是

📌 注意事项：

list 是一个数组，只能配置最少 2 个、最多 5 个 tab ( 配置一个的时候报错是正常的 )
当 position 为 top 时，不显示 icon （tabBar 的位置放在页面上方不会有 icon）

按照下图来配置 tabBar

示例代码：

json

"tabBar": {
    "selectedColor": "#f3514f",
    "color": "#666",
    "borderStyle": "black",
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "/assets/index.png",
            "selectedIconPath": "/assets/index-active.png"
        },
        {
            "pagePath": "pages/cate/cate",
            "text": "分类",
            "iconPath": "/assets/cate.png",
            "selectedIconPath": "/assets/cate-active.png"
        },
        {
            "pagePath": "pages/cart/cart",
            "text": "购物车",
            "iconPath": "/assets/cart.png",
            "selectedIconPath": "/assets/cart-active.png"
        },
        {
            "pagePath": "pages/profile/profile",
            "text": "我的",
            "iconPath": "/assets/profile.png",
            "selectedIconPath": "/assets/profile-active.png"
        }
    ]
}

2.3 页面配置

小程序的页面配置，也称 局部配置 ，每一个小程序页面也可以使用自己的 .json 文件
来对本页面的窗口表现进行配置
需要注意的是：页面配置文件的属性和全局配置文件中的 window 属性几乎一致
只不过这里不需要额外指定 window 字段，因此如果出现相同的配置项，
页面中配置项会覆盖全局配置文件中相同的配置项 (就近原则)。

属性	描述	类型	默认值
`navigationBarBackgroundColor`	导航栏背景颜色	HexColor	#000000
`navigationBarTextStyle`	导航栏标题颜色，仅支持 `black` / `white`	string	white
`navigationBarTitleText`	导航栏标题文字内容	string
`backgroundColor`	下拉 `loading` 的样式，仅支持 `dark` / `light`	string	dark
`enablePullDownRefresh`	是否开启全局的下拉刷新	boolean	false
`onReachBottomDistance`	页面上拉触底事件触发时距页面底部距离单位为 px	number	50

完成下面这个页面：

📌 注意：局部没有的会使用全局，局部有的会覆盖全局。
- 可以发现这里的刷新点 (backgroundTextStyle) 是 light 样式的，而全局是 dark
  所以对于这些局部特殊的，我们需要写出来去覆盖全局的配置，其它全局有的可以省略配置

示例代码：

json

{
  "usingComponents": {},
  "navigationBarTitleText": "商品分类",
  "navigationBarBackgroundColor": "#00AF92",
  "backgroundTextStyle": "light"
}

2.4 项目配置文件

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，
例如编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，
你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，
你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，
其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

project.config.json ：文件中配置公共的配置，
project.private.config.json ：配置个人配置

project.private.config.json 文件同样可以对项目进行配置
project.private.config.json 中的相同设置优先级高于 project.config.json

📌 注意事项：

project.private.config.json 写到 .gitignore 避免版本管理的冲突。
与 最终编译结果 有关的设置必须设置到 project.config.json 中

比如：点击下面这个按钮更改配置，会发现左边 project.config.json 这两项会发生变化

还有下面这个选项：是否校验域名合法性，如果我们后期需要测试本地的接口（localhost）
就要打开这个（不校验）, 否则无法测试 ...

📌 思考：

这个选项可以把 JS 编译成 ES5 ，左边的 es6 变成了 true . 也就是项目支持写更新的 es 语言，

勾选这个后会把更新的 es 语言编译成 es5 ，以确保更好的兼容性。

以上的描述，显然会影响 最终编译结果 ，那么必须设置到 project.config.json 中

对比上面这个，是否校验域名这个显然就不会影响 最终编译结果 ，那么它会在个人配置里

项目配置文件的配置选项比较多，如有需要

可以参考详细的官方配置文档：项目配置文件

2.5 支持使用 sass/less

小程序代码包要求代码文件为 wxml / wxss / js / json / wxs。
如果我们希望使用 sass 或 less 去开发小程序，就需要将 sass / less 文件编译成对应的 wxss 文件。

在 project.config.json 文件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"]，
即可开启工具内置的 sass 编译插件。如需同时开启 typescript 编译插件，
可将该字段修改为 ["typescript ", "sass"]。目前支持三个编译插件：typescript、less、sass

配置好以后，记得需要将 .wxss 改成 .scss ！！

📌 注意：

我们在配置的时候，编译插件的名称是 sass，但是文件的后缀名是 .scss

这是因为 Sass 是 Css 预处理语言，scss 是 Sass 的一个语法版本

官方文档：开发辅助，支持以编译插件的形式，扩展编译功能

2.6 sitemap.json

微信现已开放小程序内搜索，当开发者允许微信索引时，微信会通过爬虫的形式，
为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。

可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。
(开发时一般不用特别设置，默认都是下方这样，允许所有页面被索引) , 语法如下：

json

{
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}

配置项说明：

属性	属性说明	属性值
`action`	是否允许被搜索	可选项有：`allow`、`disallow`
`page`	允许/不允许被搜索的页面	页面路径或者通配符

json

// 所有页面都会被微信索引（默认情况）
{
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}

json

// 配置 path/index/index 页面不被索引，其余页面允许被索引
{
  "rules":[
    {
      "action": "disallow",
      "page": "path/index/index"
    }
  ]
}

📌 注意事项：

没有配置 sitemap.json 则默认所有页面都能被索引
sitemap.json 文件中默认的设置，是优先级最低的默认规则，所有页面都会被微信索引

三、小程序样式＆组件

3.1 介绍

在开发 Web 网站的时候：
页面的结构由 HTML 进行编写，例如：经常会用到 div、p、 span、img、a 等标签
页面的样式由 CSS 进行编写，例如：经常会采用 .class 、#id 、element 等选择器

不过不用担心，小程序中提供了同样的角色：
- 其中 WXML 充当的就是类似 HTML 的角色，只不过在 WXML 中没有div、p、 span、img、a 等标签，
  在 WXML 中需要使用小程序提供的 view、text 、image、navigator 等标签来构建页面结构，
  小程序提供的这些标签，我们称为 "组件"，开发者可以通过组合这些基础组件进行快速开发。
- WXSS 则充当的就是类似 CSS 的角色，WXSS 具有 CSS 大部分的特性，
小程序在 WXSS 也做了一些扩充和修改，新增了尺寸单位 rpx、提供了全局的样式和局部样式，
另外需要注意的是WXSS 仅支持部分 CSS 选择器。

小程序给提供的组件文档：WXML

小程序样式官方文档：WXSS

3.2 尺寸单位

随着智能手机的发展，手机设备的宽度也逐渐多元化，这就需要开发者在开发的时候，
需要 适配不同屏幕宽度 的手机。为了解决屏幕适配的问题，微信小程序推出了 rpx 单位

小程序运行在手机移动端，宿主环境是微信，因为手机尺寸的不一致，在写 CSS 样式时，
开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，会采用一些技巧来算像素单位
从而实现页面的适配。而 WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，
只要交给小程序底层来换算即可。

rpx : 小程序新增的拓展单位，可以根据屏幕宽度进行自适应，
小程序规定任何型号手机：屏幕宽都为 750 rpx。

📌 注意事项：

小程序规定任何型号手机：屏幕宽都为 750 rpx

🔔 开发建议：

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

原因：

设计稿宽度是 750px，而 iPhone6 的手机设备宽度是 375px，设计稿想完整展示到手机中，就需要缩小一倍

在 iPhone6 下，px 和 rpx 的换算关系是：1rpx = 0.5px， 750rpx = 375px，刚好能够填充满整个屏幕的宽度

测试代码：

➡️ pages/cart/cart.wxml

html

<!-- 需求：绘制一个盒子，让盒子的宽度占据屏幕的一半 -->

<!-- view 是小程序提供的组件，是容器组件，类似于 div，也是一个块级元素，占据一行 -->
<!-- 如果想实现需求，不能使用 px，px 使固定单位，不能实现自适应，需要使用小程序提供的 rpx  -->
<!-- 微信小程序规定，不管是什么型号的手机，屏幕的宽度都是 750rpx -->
<!-- rpx 单位能够实现自适应的 -->
<view class="box">iraionly.cn</view>

➡️ pages/cart/cart.scss

css

/* 通过演示使用 css 作为单位，px 是不具有响应式的 */

/* image {
  width: 375px;
  height: 600px;
  background-color: lightgreen;
} */

.box {
  width: 375rpx;
  height: 600rpx;
  background-color: lightgreen;
}

效果：

可以看到，无论是宽度 375px 的 iPhone 6/7/8 还是宽度 414px 的 iPhone 6/7/8 Plus ,
在设置的是 375 rpx 都可以显示为自适应的宽度一半

3.3 全局＆局部样式

在进行网页开发时，我们经常创建 global.css、base.css 或者 reset.css 作为全局样式文件
进行重置样式或者样式统一，然后在每个页面或组件中写当前页面或组件的局部样式，
小程序中也存在全局样式和局部样式，这一节我们来学习一下小程序中的全局样式和局部样式

📌 知识点：

全局样式：指在 app.wxss中定义的样式规则，作用于每一个页面，例如：设置字号、背景色、宽高等全局样式

局部样式：指在 page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

示例：
在 app.scss 中定义全局样式，设置 text 组件的颜色以及字号大小，
这段样式将会作用于任意页面的 text 组件

scss

/* app.scss */
text {
  color: lightseagreen;
  font-size: 50rpx;
}

然后在 profile.scss 中定义局部样式，设置 text 组件的颜色以及字号大小，
会发现 局部样式将全局样式进行了覆盖

scss

/* pages/profile/profile.scss */
text {
  color: red;
  font-size: 30rpx;
}

3.4 组件

使用小程序常用的组件实现项目首页的效果，会使用以下组件：
- view 组件
- text 组件
- image 组件
- navigator 组件
- swiper 和 swiper-item 组件
- scroll-view 组件
- 字体图标

3.4.1 view

view 是小程序提供的组件，是容器组件，类似于 div，也是一个 块级元素，占据一行

分析首页页面结构，使用 view 组件将页面拆分成 4 个区域
📌 注：index.wxml ＆ index.scss 之前都有些默认的代码，我们可以全部删除
➡️ pages/index/index.wxml

html

<!-- 轮播图区域 -->
<view class="swiper">1</view>

<!-- 公司相关信息 -->
<view class="info">2</view>

<!-- 商品导航区域 -->
<view class="good-nav">3</view>

<!-- 商品推荐区域 -->
<view class="good-hot">4</view>

➡️ pages/index/index.scss

scss

page {
  height: 100vh; //100vh 表示 100% 的视口高度
  background-color: #efefef !important;
}

📌 说明：在 CSS 中，vh 是一个相对单位，代表 “视口高度”（viewport height)。
100vh 表示 100% 的视口高度，也就是整个浏览器视口（即用户可视区域）的高度。

3.4.2 swiper

在进行网页开发的时候，实现轮播图的时候，我们通常先使用 HTML 、CSS 实现轮播图的样式结构，
然后使用 JS 控制轮播图的效果，或者直接使用插件实现轮播图的功能，
而在小程序中实现小程序功能则相对简单很多。
在小程序中，提供了 swiper 和 swiper-item 组件实现轮播图：
- swiper：滑块视图容器，常用来实现轮播图，其中只可放置 swiper-item 组件，否则会导致未定义的行为
- swiper-item：仅可放置在 swiper 组件中，宽高自动设置为100%，代表 swiper 中的每一项

我们可以使用 swiper 组件提供的属性，实现轮播图的订制，常见属性如下：

属性	说明	类型
`indicator-dots`	是否显示面板指示点	boolean (默认 false)
`indicator-color`	指示点颜色	color (默认：rgba(0, 0, 0, .3))
`indicator-active-color`	当前选中的指示点颜色	color (默认：#000000)
`autoplay`	是否自动切换	boolean (默认 false)
`interval`	自动切换时间间隔	number (默认 5000)
`circular`	是否采用衔接滑动	boolean (默认 false)
其他属性...

示例代码：

➡️ pages/index/index.wxml

html

<!-- 轮播图区域 -->
<view class="swiper">
    
  <!-- swiper 组件实现轮播图区域的绘制 -->
  <!-- swiper 组件，滑块视图容器 -->
  <swiper 
    circular
    autoplay
    interval="3000"
    indicator-dots
    indicator-color="#fff"
    indicator-active-color="#f3514f"
    >
    <swiper-item>
      第一张轮播图
    </swiper-item>
    <swiper-item>
      第二张轮播图
    </swiper-item>
    <swiper-item>
      第三张轮播图
    </swiper-item>
  </swiper>
    
</view>

➡️ pages/index/index.scss

scss

//页面
page {
  height: 100vh;
  background-color: #efefef !important;
}

//轮播图区域
.swiper {
    swiper {
      swiper-item {
          // 在 Sass 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器
          // 下面这段代码在编译以后，生成的代码是 swiper-item:first-child
          &:first-child{
            background-color: skyblue;
          }
          &:nth-child(2) {
            background-color: lightcoral;
          }
          &:last-child {
            background-color: lightseagreen;
          }
      }
    }
}

3.4.3 image

在这一节中，我们开始来学习小程序中的image组件，通过学习该组件掌握组件的学习方法和使用技巧
在小程序中没有 img 标签，添加图片需要使用小程序提供的 image 组件，image组件的语法如下：

html

<image src="/assets/tom.png" mode="heightFix" lazy-load=”{{ true }}“ />

📌 image 组件

src：图片资源地址
mode：图片裁剪、缩放的模式
lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress 属性：长按转发给朋友、收藏、保存图片

📌 注意：

image 组件默认具有宽度和高度，宽度是 320px 高度是 240px
image 组件不给 src 属性设置图片地址，也会占据宽和高

示例代码：

➡️ pages/index/index.wxml

html

<!-- 轮播图区域 -->
<view class="swiper">
  <!-- swiper 组件实现轮播图区域的绘制 -->
  <!-- swiper 组件，滑块视图容器 -->
  <swiper 
    circular
    autoplay
    interval="3000"
    indicator-dots
    indicator-color="#fff"
    indicator-active-color="#f3514f"
    >
    <swiper-item>
      <image src="/assets/banner/banner-1.png" mode=""/>
    </swiper-item>
    <swiper-item>
      <image src="/assets/banner/banner-2.png" mode=""/>
    </swiper-item>
    <swiper-item>
      <image src="/assets/banner/banner-3.png" mode=""/>
    </swiper-item>
  </swiper>
</view>

➡️ pages/index/index.scss

scss

// 页面
page {
  height: 100vh;
  background-color: #efefef !important;
}

//轮播图区域
.swiper {
    swiper {
      swiper-item {

          image {
            height: 100%;
            width: 100%;
          }
          // 在 Sass 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器
          // 下面这段代码在编译以后，生成的代码是 swiper-item:first-child
          // &:first-child{
          //   background-color: skyblue;
          // }
          // &:nth-child(2) {
          //   background-color: lightcoral;
          // }
          // &:last-child {
          //   background-color: lightseagreen;
          // }
      }
    }
}

3.4.4 text

在小程序中，如果需要渲染文本，需要使用 text 组件 , 即 <text><text>
常用的属性有两个：
- user-select : 文本是否可选，用于长按选择文本
- space : 显示连续空格（ensp 中文字符空格一半）（emsp 中文字符空格）（nbsp 字符大小）

📌 注意事项：

除了文本节点（添加 user-select）以外的其他节点都无法长按选中
text 组件内只支持 text 嵌套，嵌套其他组件是没效果的

示例代码：

➡️ pages/index/index.wxml

html

<!-- 公司相关信息 -->
<view class="info">
  <text>同城配送</text>
  <text>行业龙头</text>
  <text>半小时送达</text>
  <text>100% 好评</text>
</view>

➡️ pages/index/index.scss

scss

// 页面
page {
  height: 100vh;
  background-color: #efefef !important;

  padding: 16rpx;
  box-sizing: border-box; // 怪异盒模型 ： 盒子宽度 = 内容 + 内边距 + 边框

  display: flex; //整个页面上也用 flex 布局
  flex-direction: column; //改变主轴方向为 y 轴

  > view { // 子元素的全部view
    &:nth-child(n + 2){  // 这里的 n 是一个从 0 开始的计数器
      margin-top: 16rpx;  // 第二个子元素开始，离上面都有 margin
    }
  }
}

// 轮播图
.swiper {
  border-radius: 16rpx;
  overflow: hidden;
  swiper {
    height: 360rpx;
  
    swiper-item {
  		//轮播图图片
        image {
            height: 100%;
            width: 100%;
            border-radius: 16rpx;
        }
    }
  }
}

//公司信息
.info {
  display: flex; //flex 布局
  justify-content: space-between; //子元素在主轴方向的对齐方式； space-between 先两边贴边，再平分剩余空间
  background-color: #fff;
  padding: 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}

3.4.5 商品导航区域

到目前为止我们已经学习了 view 、text、image 以及 swiper 和 swiper-item组件的使用
接下来需要实现的是主页里面的商品导航区域的结构

在网页开发中，实现该布局非常简单，使用 div 嵌套或者 ul 包裹住 li，li 在包裹住 img 就能够实现该效果
但在小程序中没有 HTML 中的 div、ul、li 标签，我们使用的是 <view> <image> <text>

示例代码：

➡️ pages/index/index.wxml

html

<!-- 商品导航区域 -->
<view class="good-nav">
  <view>
    <image src="/assets/category/cate-1.png" mode=""/>
    <text>爱礼精选</text>
  </view>
  <view>
    <image src="/assets/category/cate-2.png" mode=""/>
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="/assets/category/cate-3.png" mode=""/>
    <text>永生玫瑰</text>
  </view>
  <view>
    <image src="/assets/category/cate-4.png" mode=""/>
    <text>玫瑰珠宝</text>
  </view>
  <view>
    <image src="/assets/category/cate-5.png" mode=""/>
    <text>香水护体</text>
  </view>
</view>

➡️ pages/index/index.scss

scss

//商品导航区域
.good-nav {
  display: flex;  // 外面整体导航区域使用flex
  justify-content: space-between; // 外面整体导航区域 flex 是延水平space-between
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
    display: flex; // 内部一个 view 使用 flex
    flex-direction: column; // 内部一个 view 的主轴方向是垂直的 
    align-items: center; // 文字图片居中
    image {
      width: 80rpx;
      height: 80rpx;
    }
    text {
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  } 
}

3.4.6 navigator

点击商品导航区域，需要跳转到商品列表界面，在网页开发中，如果想实现页面的跳转需要使用 a 标签，
在小程序中如果想实现页面的跳转则需要使用 navigator 组件，语法如下：

html

<!-- url：当前小程序内的跳转链接 --> 
<navigator url="/pages/list/list">到商品列表页</navigation>

📌 navigation 组件

url ：当前小程序内的跳转链接
open-type ：跳转方式
- navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
- redirect：关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
- switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- reLaunch：关闭所有页面，打开到应用内的某个页面
- navigateBack：关闭当前页面，返回上一页面或多级页面

📌 注意事项：

路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔 ,
例如：/list?id=10&name=hua ，在 onLoad(options) 生命周期函数中获取传递的参数
属性 open-type="switchTab" 时不支持传参
在进行路径跳转时，比如代码：<navigator url="/pages/list/list">到商品列表页</navigation>
不要丢失 pages 前面的斜线，否则跳转不成功

➡️ pages/index/index.wxml

html

<!-- 商品导航区域 -->
<view class="good-nav">
  <view>
    <navigator url="/pages/list/list">
      <image src="/assets/category/cate-1.png" mode=""/>
      <text>爱礼精选</text>
    </navigator>
  </view>
  <view>
    <navigator url="/pages/list/list">
      <image src="/assets/category/cate-2.png" mode=""/>
      <text>鲜花玫瑰</text>
    </navigator>
  </view>
  <view>
    <navigator url="/pages/list/list">
      <image src="/assets/category/cate-3.png" mode=""/>
      <text>永生玫瑰</text>
    </navigator>
  </view>
  <view>
    <navigator url="/pages/list/list">
      <image src="/assets/category/cate-4.png" mode=""/>
      <text>玫瑰珠宝</text>
    </navigator>
  </view>
  <view>
    <navigator url="/pages/list/list">
      <image src="/assets/category/cate-5.png" mode=""/>
      <text>香水护体</text>
    </navigator>
  </view>
</view>

➡️ pages/index/index.scss

scss

//商品导航区域
.good-nav {
  display: flex;  // 外面整体导航区域使用flex
  justify-content: space-between; // 外面整体导航区域 flex 是延水平space-between
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
    navigator {
      display: flex; // 内部一个view使用flex
      flex-direction: column; // 内部一个view的主轴方向是垂直的 
      align-items: center; //文字图片居中
    }
    image {
      width: 80rpx;
      height: 80rpx;
    }
    text {
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  } 
}

3.4.7 scroll-view

可滚动视图区域，适用于需要滚动展示内的场景，它可以在小程序中实现类似于网页中的滚动条效果，
用户可以通过手指滑动或者点击滚动条来滚动内容，scroll-view 组件可以设置滚动方向、滚动条样式、
滚动到顶部或底部时的回调函数等属性，可以根据实际需求进行灵活配置。

3.4.7.1 scroll-x

使用横向滚动时，需要添加 scroll-x 属性，然后通过 css 进行结构绘制，实现页面横向滚动

示例代码：
➡️ pages/index/index.wxml：

html

<!-- 商品推荐区域 -->
<view class="good-hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>
</view>

➡️ pages/index/index.scss：

scss

.good-hot {
  margin-top: 16rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;
    background-color: lightblue;

    view{
      display: inline-block;
      width: 50%;
      height: 80rpx;

      &:last-child{
        background-color: lightseagreen;
      }

      &:first-child{
        background-color: lightpink;
      }
    } 
  }
}

3.4.7.2 scroll-y

使用竖向滚动时，需要给 scroll-view 一个固定高度，同时添加 scroll-y 属性，实现页面纵向滚动

示例代码：
➡️ pages/index/index.wxml

html

<!-- 商品推荐区域 -->
<view class="hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>

  <scroll-view class="scroll-y" scroll-y>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>
</view>

➡️ pages/index/index.scss

html

.hot {
  margin-top: 16rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;
    background-color: lightblue;

    view{
      display: inline-block;
      width: 50%;
      height: 80rpx;

      &:last-child{
        background-color: lightseagreen;
      }

      &:first-child{
        background-color: lightcoral;
      }
    } 
  }

+  .scroll-y {
+    height: 400rpx;
+    background-color: lightsalmon;
+    margin-top: 60rpx;
+
+    view {
+      height: 400rpx;
+
+      &:nth-child(odd) {
+        background-color: lightseagreen;
+      }
+
+      &:nth-child(even) {
+        background-color: lightcoral;
+      }
+    }  
+  }
}

3.4.7.3 商品推荐区域

示例代码：
➡️ pages/index/index.wxml

html

<!-- 商品推荐区域 -->
<view class="good-hot">
  <scroll-view class="scroll-x" scroll-x>
      <view>
        <view class="good-item">
          <image src="../../assets/floor/1.png" mode=""/>
          <text>鲜花玫瑰</text>
          <text>66</text>
        </view>
      </view>

      <view>
        <view class="good-item">
          <image src="../../assets/floor/2.png" mode=""/>
          <text>鲜花玫瑰</text>
          <text>77</text>
        </view>
      </view>

      <view>
        <view class="good-item">
          <image src="../../assets/floor/3.png" mode=""/>
          <text>鲜花玫瑰</text>
          <text>88</text>
        </view>
      </view>

      <view>
        <view class="good-item">
          <image src="../../assets/floor/4.png" mode=""/>
          <text>鲜花玫瑰</text>
          <text>99</text>
        </view>
      </view>

      <view>
        <view class="good-item">
          <image src="../../assets/floor/5.png" mode=""/>
          <text>鲜花玫瑰</text>
          <text>100</text>
        </view>
      </view>
      
  </scroll-view>
</view>

➡️ pages/index/index.scss

scss

//商品推荐区域
.good-hot {
  background-color: #fff;
  padding: 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;

    view {
       display: inline-block;
       width: 320rpx;
       height: 440rpx;
       margin-right: 16rpx;

       .good-item {
         display: flex;
         flex-direction: column;
         justify-content: space-between;

         text{
           &:nth-of-type(1) {
             font-weight: bold;
           }
         }

       }

       image {
         width: 100%;
         height: 320rpx;

       }

       &:last-child {
         margin-right: 0;
       }
    }
  }
}

3.4.8 字体图标

在项目中使用到的小图标，一般由公司设计师进行设计，如果如果自行设计这些图标
会比较麻烦且耗费时间，这时候我们就可以使用到阿里巴巴矢量图库，设计好以后上传
到阿里巴巴矢量图标库，然后方便程序员来进行使用。

阿里巴巴矢量图库是阿里巴巴集团推出的一个免费的矢量图标库和图标管理工具。
它汇集了大量的精美图标资源，包括品牌图标和各种主题和分类的图标。
用户可以在阿里巴巴矢量图库中搜索和浏览所需的图标，也可以上传和管理自己的图标资源。
阿里巴巴矢量图标库：https://www.iconfont.cn/

小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。
首先我们先找到所需的图标，加入到项目库，进入项目库中生成链接。也可以将字体图标库下载到本地

点击链接，会将生成的 CSS 在新的链接页面进行打开。全部复制
在项目新建如下文件夹和 scss 文件

把刚刚复制的全部粘贴到这个文件

这些图标可能会在多个页面，所以需要在全局样式文件 app.scss 中导入 fonts.wxss 字体图标文件，
然后获取到图标类名，在项目中使用即可，应用于页面

scss

// 在导入样式文件后，必须以分号进行结尾，否则会出现异常
@import "./iconfont/iconfont.scss";

➡️ pages/index/index.wxml

html

<!-- 公司相关信息 -->
<view class="info">
  <text><text class="iconfont icon-tongchengpeisong"></text>同城配送</text>
  <text><text class="iconfont icon-icon"></text>行业龙头</text>
  <text><text class="iconfont icon-icon_sjsj"></text>半小时送达</text>
  <text><text class="iconfont icon-haoping"></text>100% 好评</text>
</view>

➡️ pages/index/index.scss

scss

//公司信息
.info {
  display: flex; //flex 布局
  justify-content: space-between; //子元素在主轴方向的对齐方式； space-between 先两边贴边，再平分剩余空间
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;

  .iconfont {
    font-size: 24rpx;
    margin-right: 8rpx;
  }
}

注意：使用字体图标可能会报错： ( 没报错就不用管 .. )

shell

[渲染层网络层错误] Failed to load font http://at.alicdn.com/t/c/font_3946178_q5oidsl5xo.woff2?t=1680795910637 net::ERR_CACHE_MISS (env: Windows,mp,1.06.2303220; lib: 2.30.4)

该错误可忽略，详见下面这个链接：

https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

但在控制台出现错误，会影响开发调试，解决方案是：将字体图标转换成 base64 的格式

然后重新生成代码再复制就好了

3.4.9 背景图片

注：提供的网络地址连接：
https://java-ai-irai.oss-cn-beijing.aliyuncs.com/001.jpg

当编写小程序的样式文件时，我们可以使用 background-image 属性来设置一个元素的背景图像，
但是小程序的 background-image 不支持本地路径 ! ! !

➡️ pages/index/index.wxml

html

<!-- bg_test -->
<view class="bg-image"></view>

➡️ pages/index/index.scss

scss

// bg_test
.bg-image {
  height: 500rpx;
  background-image: url(https://java-ai-irai.oss-cn-beijing.aliyuncs.com/001.jpg);
  background-size: cover;
}

注意测试的时候先注释之前设置的高度：

微信小程序_1 ​

一、小程序基础 ​

1.1 什么是小程序 ​

1.2 微信小程序账号注册 ​

1.3 完善小程序账号信息 ​

1.4 小程序开发者 ID ​

1.5 开发成员 ＆ 体验成员 ​

1.6 微信开发者工具 ​

1.7 创建小程序项目 ​

1.7.1 创建项目 ​

1.7.2 开发者工具设置 ​

1.8 小程序目录结构＆文件介绍 ​

1.9 切换渲染模式 ​

1.10 如何调试小程序 ​

1.11 如何新建页面 ​

1.12 调试基础库 ​

二、小程序配置文件 ​

2.1 介绍 ​

2.2 全局配置 ​

2.2.1 pages ​

2.2.2 window ​

2.2.3 tabBar ​

2.3 页面配置 ​

2.4 项目配置文件 ​

2.5 支持使用 sass/less ​

2.6 sitemap.json ​

三、小程序样式＆组件 ​

3.1 介绍 ​

3.2 尺寸单位 ​

3.3 全局＆局部样式 ​

3.4 组件 ​

3.4.1 view ​

3.4.2 swiper ​

3.4.3 image ​

3.4.4 text ​

3.4.5 商品导航区域 ​

3.4.6 navigator ​

3.4.7 scroll-view ​

3.4.7.1 scroll-x ​

3.4.7.2 scroll-y ​

3.4.7.3 商品推荐区域 ​

3.4.8 字体图标 ​

3.4.9 背景图片 ​

微信小程序_1

一、小程序基础

1.1 什么是小程序

1.2 微信小程序账号注册

1.3 完善小程序账号信息

1.4 小程序开发者 ID

1.5 开发成员＆体验成员

1.6 微信开发者工具

1.7 创建小程序项目

1.7.1 创建项目

1.7.2 开发者工具设置

1.8 小程序目录结构＆文件介绍

1.9 切换渲染模式

1.10 如何调试小程序

1.11 如何新建页面

1.12 调试基础库

二、小程序配置文件

2.1 介绍

2.2 全局配置

2.2.1 pages

2.2.2 window

2.2.3 tabBar

2.3 页面配置

2.4 项目配置文件

2.5 支持使用 sass/less

2.6 sitemap.json

三、小程序样式＆组件

3.1 介绍

3.2 尺寸单位

3.3 全局＆局部样式

3.4 组件

3.4.1 view

3.4.2 swiper

3.4.3 image

3.4.4 text

3.4.5 商品导航区域

3.4.6 navigator

3.4.7 scroll-view

3.4.7.1 scroll-x

3.4.7.2 scroll-y

3.4.7.3 商品推荐区域

3.4.8 字体图标

3.4.9 背景图片