当前位置：首页 > 运维知识 > windows >内容正文

windows

四十八、微信小程序开发系统组件

发布时间：2024/10/8 windows 37 豆豆

生活随笔收集整理的这篇文章主要介绍了四十八、微信小程序开发系统组件小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@Author：Runsen

Hello，现在中午，结果写完到了下午。还是再复习学习下小程序的组件，以后开发项目就有了强大的基础。来吧，不学习就是辣鸡。

文章目录

组件
scroll-view
swiper
icon

组件

什么叫组件呢？凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，组件的英文也是component。很多人也称之为控件，控件和组件其实是一个意思只是翻译的不同而已。

小程序的视图容器组件分为五个组件，分别是view组件、scroll-view组件、swiper、icon组件、

scroll-view

scroll-view是容器组件，如果该组件的子组件超过scroll-view的高度或宽度，该组件会允许子组件在垂直或水平方向滚动视图，以便显示其他没有显示的子组件。官方文档

下面主要介绍如何让scroll-view垂直滚动。如果要让scroll-view垂直滚动，需要设置scroll-y属性值为true。如果需要设置scroll-view纵向滑动，那么需要设置scroll-y属性值为flase。

<scroll-view scroll-y="true" style="height:200px"><view style="background:black;width:100px;height:100px"></view><view style="background:green;width:100px;height:100px"></view><view style="background:pink;width:100px;height:100px"></view></scroll-view><scroll-view scroll-x="true" style="white-space:nowrap;display:flex"><view style="background:black;width:100px;height:100px;display:inline-block"></view><view style="background:green;width:100px;height:100px;display:inline-block"></view><view style="background:pink;width:100px;height:100px;display:inline-block"></view> <view style="background:white;width:100px;height:100px;display:inline-block"></view> <view style="background:grey;width:100px;height:100px;display:inline-block"></view></scroll-view>

具体效果如下。

swiper

有时候，我们总是需要把多张图片通过轮播图来展示给用户，使用户体验更佳。同样，在微信小程序中也会经常使用到轮播图，所以这次小编通过介绍swiper组件使读者们了解轮播图的实现方法。

对应的官方文档如下：官方文档

icon

原生图标只有这么几个，远远不够用啊！

WeUI 是一套同微信原生视觉体验一致的基础样式库，基于小程序自定义组件构建。

由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

要使用WeUI组件，我们需要到组件下载页面去下载icon组件：

具体文档：developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

但更多的是使用打开 Iconfont-阿里巴巴矢量图标库：https://www.iconfont.cn/

然后点击第一个图标库，其详情如下。这里我们把鼠标放到第三个图标——点赞图标上面，会出现三个按钮，分别是加入购物车、收藏、下载。我们需要点击加入购物车按钮。

此时右上角的购物会有红色的角标，点击一下右上角的按钮出现以下界面。

此时我们点击中间的“查看在线链接”按钮，会生成一系列代码，并在网页中间显示。此时我们在 iconfont.cn 的任务就已经完成，我们已经拿到了我们想要的图标远程链接和 Unicode 值。其中刚刚生成的代码就是图标的远程链接，点赞图标下边的 字样就是图标对应的 Unicode 值。这两个内容在下边编写微信小程序代码时会用到。

微信小程序的代码编写就比较容易了，首先编写 WXSS 文件，将刚刚拿到的远程字体链接直接粘贴到 WXSS 中，然后编写自定义的 iconfont 样式，最后在 icon 组件中引用即可。其代码如下：

@font-face {font-family: 'iconfont'; /* project id 1962872 */src: url('//at.alicdn.com/t/font_1962872_6n23mwderv.eot');src: url('//at.alicdn.com/t/font_1962872_6n23mwderv.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_1962872_6n23mwderv.woff2') format('woff2'),url('//at.alicdn.com/t/font_1962872_6n23mwderv.woff') format('woff'),url('//at.alicdn.com/t/font_1962872_6n23mwderv.ttf') format('truetype'),url('//at.alicdn.com/t/font_1962872_6n23mwderv.svg#iconfont') format('svg'); }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-star:before {content: "\e60c";color: darkgoldenrod;font-size: 70px; }

WXML 代码

使用矢量字体自定义小程序 icon 组件图标的流程就介绍完了。

参考：《微信小程序全栈开发实战》第七课·极客时间: https://time.geekbang.org/course/intro/100052401

总结

以上是生活随笔为你收集整理的四十八、微信小程序开发系统组件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇：四十七、微信小程序开发页面结构WXML
下一篇：八、日志分析系统Nginx，Beats，