小程序开发设计-小程序的宿主环境：组件⑦

news2024/9/24 4:41:36

上一篇文章导航：

小程序开发设计-小程序的宿主环境：宿主环境简介⑥-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/qq_60872637/article/details/142425131?spm=1001.2014.3001.5501

注：不同版本选项有所不同，并无大碍。

目录

上一篇文章导航：

注：不同版本选项有所不同，并无大碍。

1.小程序中组件的分类：

①常见的视图容器类组件：

Ⅰ.各视图容器类组件基本介绍：

view：

scroll-view：

swiper和swiper-item：

Ⅱ.常见的视图容器类组件的基本使用：

-view组件的基本使用：

-scroll-view组件的基本使用：

-swiper和swiper-item组件的基本使用：

Ⅲ.swiper组件的常用属性：

②基础内容组件：

Ⅰ.基础内容组件基本介绍：

text：

rich-text：

Ⅱ.基础内容组件基本使用：

-text组件的基本使用：

-rich-text组件的基本使用：

③其他常用组件：

Ⅰ.其他常用组件的基本介绍：

button：

image：

Ⅱ.其他常用组件的基本使用：

-button组件的基本使用:

-image组件的基本使用:

2.API:

Ⅰ.小程序API概述：

Ⅱ.小程序中API的三大分类：

下一篇文章导航：

1.小程序中组件的分类：

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是：

①视图容器：view、scroll-view、swiper和swiper-item

②基础内容

③表单组件

④导航组件

⑤媒体组件

⑥map地图组件

⑦canvas画布组件

⑧开放能力

⑨无障碍访问

①常见的视图容器类组件：

Ⅰ.各视图容器类组件基本介绍：

view：

·普通视图区域。

·类似于HTML中的div，是一个块级元素。

·常用来实现页面的布局效果。

scroll-view：

·可滚动的视图区域。

·常用来实现滚动列表效果。

swiper和swiper-item：

·轮播图容器组件和轮播图item组件。

轮播图外面是一个容器，就是swiper组件；里面每一个可以轮播的item项就是通过swiper-item实现。

Ⅱ.常见的视图容器类组件的基本使用：

-view组件的基本使用：

实现如图的flex横向布局效果：

具体操作：

在list文件夹下实现该操作：

pages->list->list.wxml:页面结构对应的文件

pages->list->list.wxss:页面样式对应的表文件

list.wxml:
<!--pages/list/list.wxml-->
<view class='container1'>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>
list.wxss:
/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightcoral;
}
.container1 view:nth-child(3){
  background-color: lightgoldenrodyellow;
}

.container1{//类名选择器
  display: flex;//横向
  justify-content: space-around;//分散布局
}

-scroll-view组件的基本使用：

实现如图的纵向滚动效果：

具体操作：

横向滚动：限制宽度

<scroll-view class="container1" scroll-y>...</scroll-view>

纵向滚动：限制高度

<scroll-view class="container1" scroll-x>...</scroll-view>

list.wxml:
<!--pages/list/list.wxml-->
<scroll-view class='container1' scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>
list.wxss:
/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightcoral;
}
.container1 view:nth-child(3){
  background-color: lightgoldenrodyellow;
}

.container1{
  border:1px solid red;
  width:100px;
  height:120px;
}

-swiper和swiper-item组件的基本使用：

实现轮播图效果：

具体操作：

放一个轮播图组件代表一个轮播图容器，里面有几张图就需要几个swiper-item。

swiper.wxml:
<!--pages/list/list.wxml-->
<!--轮播图的结构-->
<swiper class="swiper-container">
  <!--第一个轮播图-->
  <swiper-item> 
    <view class="item">A</view>
  </swiper-item>
  
  <!--第二个轮播图-->
  <swiper-item> 
    <view class="item">B</view>
  </swiper-item>

  <!--第三个轮播图-->
  <swiper-item> 
    <view class="item">C</view>
  </swiper-item>
</swiper>
swiper.wxss:
/* pages/list/list.wxss */

.swiper-container{
  height: 150px; 
}

.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightpink;
}
swiper-item:nth-child(2) .item{/*必须有空格否则颜色不对*/
  background-color: lightsalmon;
}
swiper-item:nth-child(3) .item{
  background-color: lightskyblue;
}

Ⅲ.swiper组件的常用属性：

如果需要直接在<swiper class="swiper-container"后面添加内容即可。
<!--pages/list/list.wxml-->
<!--轮播图的结构-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="grey" autoplay interval="3000" circular>
  <!--第一个轮播图-->
  <swiper-item> 
    <view class="item">A</view>
  </swiper-item>

  <!--第二个轮播图-->
  <swiper-item> 
    <view class="item">B</view>
  </swiper-item>

  <!--第三个轮播图-->
  <swiper-item> 
    <view class="item">C</view>
  </swiper-item>
</swiper>

②基础内容组件：

Ⅰ.基础内容组件基本介绍：

text：

·文本组件

·类似于html中的span标签，是一个行内元素。

rich-text：

·富文本组件

·支持把html字符串渲染为wxml结构。

Ⅱ.基础内容组件基本使用：

-text组件的基本使用：

通过text组件的selectable属性，实现长按选中文本内容的效果。

只能使用text组件，不能使用view组件。如果把文本放在view中，不支持长按选中的效果。

具体操作：

list.wxml:
<!--常用的基础内容组件text和rich-text的用法-->
<view>
  手机号支持长按选中效果
  <text selectable>12345678901</text>
</view>

-rich-text组件的基本使用：

商品详情页可能会用到该组件。

通过rich-text组件的nodes属性节点，把html字符串渲染为对应的UI结构：

具体操作：

list.wxml:
<!--常用的基础内容组件text和rich-text的用法-->
<!--应用场景：商品详情页的结构渲染-->
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

③其他常用组件：

Ⅰ.其他常用组件的基本介绍：

button：

·按钮组件

·功能比html中的button按钮丰富

·通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

image：

·图片组件。

·image组件默认宽度约300px、高度约240px。

·页面导航组件。

·类似于html中的a链接。

Ⅱ.其他常用组件的基本使用：

-button组件的基本使用:

·按钮默认占一行。

·小一点的按钮，横向排列的按钮。

若要使用旧版的按钮样式，则将app.json里的 "style": "v2",删除。若要使用新版的按钮样式，则在app.json中添加 "style": "v2",即可。

list.wxml:
<!--button按钮组件的基本使用-->
<!--通过type属性指定按钮颜色类型-->
<button>默认按钮</button>
<button type='primary'>主色调按钮</button>
<button type="warn">警告按钮</button>
<!--size=“mini”小尺寸按钮-->
<button size="mini">默认按钮</button>
<button type='primary' size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!--plain镂口按钮-->
<button size="mini" plain>默认按钮</button>
<button type='primary' size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

-image组件的基本使用:

list.wxml:
<!--image图片组件-->
<image></image>
<!--使用src指向图片路径--><image src="/images/image1.jpg">
</image>
list.wxss:
/* pages/list/list.wxss */
image{
  /*通过边框线证明image有默认的宽和高*/
  border: 1px solid lightskyblue;
}

默认情况下第二张图片有些变形，由image里的mode属性导致。

image里的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：

list.wxml:
<!--image图片组件-->
<image></image>
<!--使用src指向图片路径-->
<image src="/images/image1.jpg" mode="aspectFit">
</image>

2.API:

Ⅰ.小程序API概述：

小程序的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。

Ⅱ.小程序中API的三大分类：

小程序官方把API分为了如下3大类：

①事件监听API

·特点：以on开头，用来监听某些事件的触发。

·举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件。

注：wx不用声明就能用来全局调用，就像浏览器中的window。

②同步API

·特点1：以Sync结尾的API都是同步API。

·特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常。

·举例：wx.setStorageSync('key','value')向本地存储中写入内容。

③异步API

·特点：类似于jQuery中的$.ajax(options)函数，需要通过suxxess、fail、complete接受调用的结果。

·举例：wx.request()发起网络数据请求，通过success回调函数接收数据。

下一篇文章导航：

小程序开发设计-协同工作和发布：协同工作⑧-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/qq_60872637/article/details/142455703?sharetype=blogdetail&sharerId=142455703&sharerefer=PC&sharesource=qq_60872637&spm=1011.2480.3001.8118

本系列文章持续更新中...

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2159294.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

阿里巴巴首页pc端1688店铺招牌店铺装修教程

阿里巴巴首页pc端1688店铺招牌店铺装修教程

1688运营1688批发首页1688装修模板1688店铺怎么装修模板自定义装修代码1688店铺装修模板旺铺装修阿里店铺首页怎么装修1688店铺装修教程视频全屏通栏代码1688店铺装修模板阿里巴巴店铺装修设计 阿里巴巴首页pc端1688店铺招牌店铺装修教程 工具&#xff1a;一秒美工
阅读更多...
英特尔：昔日芯片霸主的命运抉择

英特尔：昔日芯片霸主的命运抉择

英特尔&#xff1a;昔日芯片霸主的命运抉择 简介 英特尔的辉煌与困境 高通的崛起与收购意向 英特尔困境的原因 英特尔的未来走向 简介 据美国《华尔街日报》9月20日报道&#xff0c;芯片巨头高通公司近日就收购事宜与英特尔公司进行了接洽。但目前这只是一个意向&#xff…
阅读更多...
centos7 docker部署nacos

centos7 docker部署nacos

1. 一行代码安装git yum -y install git 2. 下载最新版nacos源码&#xff1a; git clone https://github.com/nacos-group/nacos-docker.git 进入nacos-docker文件 cd nacos-docker 3.docker安装数据库Mysql8 按这个来就行&#xff0c;非常好 Docker安装mysql8-超详细、每…
阅读更多...
828华为云征文｜华为云Flexus云服务器X实例 基于CentOS系统镜像快速部署Laravel开源论坛

828华为云征文｜华为云Flexus云服务器X实例 基于CentOS系统镜像快速部署Laravel开源论坛

最近公司可热闹了&#xff01;大家都在为搭建博客论坛系统忙得不可开交&#xff0c;尤其是在选服务器这件事儿上&#xff0c;那叫一个纠结。 同事 A 说&#xff1a;“咱得选个厉害的服务器&#xff0c;不然这论坛以后卡得跟蜗牛爬似的可咋办&#xff1f;” 同事 B 回应道&#…
阅读更多...
思维商业篇(5)—发展趋势分析

思维商业篇(5)—发展趋势分析

思维商业篇(5)—发展趋势分析 核心理论 巴菲特曾在《滚雪球》一书中提到他的投资之道其实非常简单&#xff0c;可以总结为两句话&#xff1a;找到足够长的雪道&#xff0c;找到足够湿的雪球。 而发展趋势的分析&#xff0c;正好可以借助巴菲特的这个滚雪球理论。 足够长的雪…
阅读更多...
OpenHarmony（鸿蒙南向开发）——小型系统内核（LiteOS-A）【用户态内存调测】

OpenHarmony（鸿蒙南向开发）——小型系统内核（LiteOS-A）【用户态内存调测】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 基本概念 Debug版本的musl-libc库为用户提供内存泄漏检测、堆内存…
阅读更多...
Unity 设计模式 之 行为型模式 -【状态模式】【观察者模式】【备忘录模式】

Unity 设计模式 之 行为型模式 -【状态模式】【观察者模式】【备忘录模式】

Unity 设计模式 之 行为型模式 -【状态模式】【观察者模式】【备忘录模式】 目录 Unity 设计模式 之 行为型模式 -【状态模式】【观察者模式】【备忘录模式】 一、简单介绍 二、状态模式&#xff08;State Pattern&#xff09; 1、什么时候使用状态模式 2、使用状态模式的…
阅读更多...
Android RecyclerView 实现 GridView ，并实现点击效果及方向位置的显示

Android RecyclerView 实现 GridView ，并实现点击效果及方向位置的显示

效果图 一、引入 implementation com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.30 二、使用步骤 1.Adapter public class UnAdapter extends BaseQuickAdapter<UnBean.ResultBean, BaseViewHolder> {private int selectedPosition RecyclerView.NO_POSITIO…
阅读更多...
苹果电脑系统重磅更新——macOS Sequoia 15 系统 新功能一 览

苹果电脑系统重磅更新——macOS Sequoia 15 系统 新功能一 览

有了 macoS Sequoia&#xff0c;你的工作效率将再次提升&#xff1a;快速调整桌面布局&#xff0c;一目了然地浏览网页重点&#xff0c;还可以通过无线镜像功能操控你的iPhone。 下面就来看看几项出色新功能&#xff0c;还有能够全面发挥这些功能的 App 和游戏。 macOS Sequo…
阅读更多...
探秘 Web Bluetooth API：连接蓝牙设备的新利器

探秘 Web Bluetooth API：连接蓝牙设备的新利器

引言 随着物联网技术的快速发展&#xff0c;蓝牙设备在日常生活中扮演着越来越重要的角色。而在 Web 开发领域&#xff0c;Web Bluetooth API 的出现为我们提供了一种全新的方式来连接和控制蓝牙设备。本文将深入探讨 Web Bluetooth API 的使用方法和原理&#xff0c;帮助开发…
阅读更多...
ElasticSearch的使用、Kibana和ES-Head可视化工具

ElasticSearch的使用、Kibana和ES-Head可视化工具

ElasticSearch的使用、Kibana和ES-Head可视化工具 一、ElasticSearch概述1. ES2.IK分词器3. Kibana4.Head 二、安装1.ES安装2. 配置跨域和IK分词器3.Kibana安装4. Head安装 三、常用操作1. ES结构2. ES操作1. 索引的基本操作-创建索引-查看索引-修改索引-删除索引-特殊查看 2.文…
阅读更多...
git笔记之在多个分支中复用某个分支提交的更改

git笔记之在多个分支中复用某个分支提交的更改

git笔记之在多个分支中复用某个分支提交的更改 code review! 文章目录 git笔记之在多个分支中复用某个分支提交的更改1.实现该功能的 Bash 脚本示例2.这个脚本是否可以处理新添加的文件&#xff1f;3.该脚本使用前&#xff0c;应先使用下述脚本重置本地仓库所有分支与远程保持一…
阅读更多...
Jenkins Pipeline 中通过勾选参数来控制是否构建 Docker 镜像

Jenkins Pipeline 中通过勾选参数来控制是否构建 Docker 镜像

1.定义参数&#xff1a; 使用 booleanParam 定义一个布尔参数&#xff0c;示例如下 booleanParam(name: BUILD_DOCKER, description: 是否构建Docker镜像, defaultValue: false)2.使用参数&#xff1a; 在 stage 中&#xff0c;根据参数的值决定构建方式&#xff1a; stage(编…
阅读更多...
HTTP 与 HTTPS 的三次握手与四次挥手详解

HTTP 与 HTTPS 的三次握手与四次挥手详解

文章目录 HTTP 与 HTTPS 的三次握手与四次挥手详解一、HTTP 的三次握手与四次挥手1. HTTP 三次握手2. HTTP 四次挥手 二、HTTPS 的三次握手与四次挥手1. HTTPS&#xff08;无证书&#xff09;的三次握手与 SSL/TLS 握手2. HTTPS&#xff08;有证书&#xff09;的三次握手与 SSL…
阅读更多...
vue-baidu-map的基本使用

vue-baidu-map的基本使用

前言 公司项目需求引入百度地图&#xff0c;由于给的时间比较短&#xff0c;所以就用了已经封装好了的vue-baidu-map 一、vue-baidu-map是什么&#xff1f; vue-baidu-map是基于vue.js封装的百度地图组件(官方文档) 二、使用步骤 1.下载插件 //我下载的版本 npm install …
阅读更多...
注册讲堂 | 医疗器械组合包类产品常见问题（2）

注册讲堂 | 医疗器械组合包类产品常见问题（2）

问题一&#xff1a;组合包类产品的有效期应该如何确定&#xff1f; 组合包类产品的有效期以组件中最短有效期为最终产品有效期。 对于外购件&#xff0c;需要考虑组件购买时的剩余效期及影响效期主要因素&#xff0c;如材料老化、灭菌有效期等。 问题二&#xff1a;组合包类产…
阅读更多...
【计算机网络强化】计网强化笔记

【计算机网络强化】计网强化笔记

第一章 计算机网络体系结构 1.1 计算机网络概述 1.计算机网络由若干个节点和连接这些节点的链路组成 2. 3.计算机网络的组成 ①硬件、软件、协议 ②边缘部分和核心部分 ③通信子网和资源子网 4.电路交换、报文交换和分组交换 ①电路交换 分为三步&#xff1a;建立连接、…
阅读更多...
基于SpringBoot+Vue的在线问诊管理系统

基于SpringBoot+Vue的在线问诊管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…
阅读更多...
SQL面试常见题目

SQL面试常见题目

SQL面试常见题目涉及多个方面&#xff0c;包括数据查询、数据操作、表的设计与优化等。以下列举一些经典的SQL面试题目&#xff0c;并附上解析答案&#xff1a; 1. 查询一张表中重复的数据 题目&#xff1a; 给定一个表 employees&#xff0c;包含 id, name, salary 列。如何…
阅读更多...
大型语言模型(Large Language Models)的介绍

大型语言模型(Large Language Models)的介绍

背景 大型语言模型&#xff08;Large Language Models&#xff0c;简称LLMs&#xff09;是一类先进的人工智能模型&#xff0c;它们通过深度学习技术&#xff0c;特别是神经网络&#xff0c;来理解和生成自然语言。这些模型在自然语言处理&#xff08;NLP&#xff09;领域中扮…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023