微信小程序View组件和image组件

在学习组件之前，需要重新提一下，点击微信开发者工具的菜单栏中  帮助------>开发者文档可以跳转到开发者文档页面，里面有详细的关于微信小程序开发的技术指南和参考资料。

我们点开 开发者文档网页之后，点击组件，就可以看到有关小程序开发的各种组件啦。使用Ctrl+F快捷键可以在文档内搜索自己需要了解的各种组件。

View组件

view组件是一个视图容器组件，类似HTML中的<div>标签。它不具备特定的功能，而是作为一种结构化的“块”来组织页面元素。

view可以包裹文本、图片、按钮等其他组件。

hover-class属性

我们首先来看第一个属性 hover-class，它的值类型为String,表示wxss文件中定义的类名。

我们可以通过hover-class的属性值结合wxss来定义样式类。实现当用户触摸view组件时，会产生样式类中定义的样式变化。

触摸字体加粗

下面以一个触摸字体加粗的效果为例来进行展示。

承接上一个页面配置的项目继续来做。在login页面的 login.wxml 文件中添加

<view hover-class="bold">

  点击之后字体会加粗

  </view>

然后使用Ctrl+B来执行之后得到下列页面

点击   “点击之后字体会加粗” 后发现并没有变化。这是因为需要在对应的login.wxss文件中来编写样式类。

那么接下来我们打开login.wxss文件，添加 bold 的样式类

.bold{

  font-weight: bold;  /*字体加粗*/

}

然后我们再重新使用Ctrl+B来编译一下，得到页面

点击  “点击之后字体会加粗” 后可以发现这9个字真的加粗啦！

触摸字体变色

实现了上面的一个hover-class定义的 bold 类之后，我们再来自定义一个触摸字体变色的效果吧！

首先我们在login.wxml中添加view组件，并将 hover-class 的属性值设置为changeColor(名字可以选择你认为合理的哦~ 不一定非得叫changeColor嘛)

首先在login.wxml 页面中添加下面代码

<view hover-class="changeColor">

  点一下我就会变色

  </view>

如下图所示

接下来在login.wxss文件中添加changeColor的定义类：

.changeColor{

  color: red;

}

然后呢，我们又可以使用Ctrl+B来重新编译页面啦，得到下面的页面：

我们点击 “点一下我就会变色” 就可以看到我们的效果啦

hover-stop-propagation

hover-stop-propagation是用来阻止时间的冒泡。当你在 <view> 上使用这个属性时，它会使得该组件的触摸事件不会传递到父级元素，也就是说触摸事件只会在当前组件上被触发，而不会冒泡到上层的父组件或页面。

hover-stop-propagation的溢出只在绑定事件时生效，鉴于当前并未讲到绑定事件，我们就先略过这个属性的讲解。

hover-start-time

hover-start-time的类型为number，表示手指按住后多久出现点击态，单位为毫秒，默认值为50。

我们在上面点击变色的例子上来进行添加，代码变为：

  <view hover-class="changeColor" hover-start-time="3000">

  点一下我就会变色

  </view>

然后Ctrl+B编译后点击“点一下我就会变色”会发现，刚点击不会发生颜色变化，点击3000毫秒之后，字体变为红色。 

hover-stay-time

hover-stay-time也是number类型，默认值为400。表示手指松开后点击态保留时间，也就是持续时间，单位毫秒。

我们同样以点击变色的样式为例子，将代码改为

  <view hover-class="changeColor" hover-start-time="3000" hover-stay-time="30000">

  点一下我就会变色

  </view>

同样使用Ctrl+B编译之后，点击“点一下我就会变色” 会发现这个红色字体持续的时间长得很！

image组件

image组件用来显示图片，支持对图片的剪裁和缩放。默认宽度为300px（300像素），默认高度为240px。

image组件支持单标签和双标签的写法。

单标签如下：

<image src="图片资源地址" />

双标签写法：

<image src="图片资源地址"></image>

以下是image的一些通用属性。

src属性

src属性是用来填写图片资源地址的。

1.支持网页图片：填写网页上图片的图片路径即可。

               首先我们在浏览器中搜索图片，右键点击图片，复制图片路径，如下：

                

在login.wxml页面中添加以下代码：

  <image src="https://waapple.org/wp-content/uploads/2021/06/Variety_Cosmic-Crisp-transparent-658x677.png"></image>

编译文件之后可以看到模拟器中显示出了苹果。如下图所示：

这就是image组件加载网页图片的办法啦！

接下来我们在项目目录上新建一个images文件夹（和pages同级目录创建），如下：

然后我们将本地图片复制到images文件夹内（可以将图片重命名一下，方便管理，建议名字为非英文）：

然后我们在login.wxml文件中写下列代码：

<image src="/images/image1.webp"></image>

然后编译一下，可以看到模拟器中就会出现我们的图片啦！

                 

mode属性

images组件中的mode属性用来指定图片的剪裁模式或缩放模式，mode属性的默认值是scaleToFill。

常用的mode合法值如下图所示：

我们借着上面本地加载图片的代码来简单试一下这个属性吧！

在原来的代码中添加mode属性，如下所示

编译一下之后可以看到原本在编译器中加载的图片发生了变形：

我们可以明显看到图片的变形啦！mode其余的属性值，同学们可以自己试一下看一下效果。

show-menu-by-longpress属性

show-menu-by-longpress这个属性的效果：长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。

show-menu-by-longpress的默认值是“False”，话不多说，我们直接来看一下这个属性值为“True”的效果吧！我们首先添加这个属性：

编译一下，然后长按对应图片可以看到出现以下效果：

rpx单位

rpx单位解决屏幕适配的问题。rpx（Responsive Pixel，自适应像素）， 是微信小程序独有的、用来解决屏幕适配问题的尺寸单位。

rpx单位的设计思想是把所有设备的屏幕在宽度上等分为750份，即屏幕的总宽度为750rpx。微信小程序在不同设备上运行的时候，会自动把rpx单位换算成对应的像素单位来渲染，从而实现屏幕适配。

页面样式导入

在微信小程序中，多个不同的页面可能需要编写相同的样式代码，这样会造成代码冗余。为了避免代码冗余，可以将相同的样式代码抽为公共样式，放到一个单独的文件中，通过只修改公共样式实现对所有相关页面样式的修改，从而节约时间、方便管理。

第一步. 新建一个和pages文件夹同级的文件 page.wxss

第二步. 打开page.wxss页面，编写一个公共样式，写下以下代码

.common-style {

  background-color: #4CAF50; /* 背景色 */

  color: rgb(230, 23, 23); /* 字体颜色 */

  padding: 20px; /* 内边距 */

  border-radius: 10px; /* 圆角边框 */

  font-size: 18px; /* 字体大小 */

  text-align: center; /* 字体居中 */

  margin: 20px 0; /* 外边距 */

}

如下图所示：

现在我们的公共样式就写好啦（当然，效果我们可以自己按照自己喜欢来写）。写好了之后，怎么用呢？

想使用这个公共样式也非常的简单，下面我们用 login 页面来使用这个公共样式。

首先我们需要再login.wxss中导入这个样式，导入的语法就是：

@import "/page.wxss";

如下图页面所示：

导入之后呢，我们就可以在login中来使用我们的公共样式啦，要想让这个在页面显示，我们需要再login.wxml中写一点来看一下效果吧！写下以下代码：

  <view class="common-style">展示一下这个公共样式吧</view>

如下面页面显示：

然后点击编译，就可以在模拟器中看到效果了！