uniapp学习(001 前期介绍)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第1p-第p10的内容


简介

在这里插入图片描述
在这里插入图片描述

目录结构

在这里插入图片描述

在这里插入图片描述
效果
在这里插入图片描述
打包成小程序
在这里插入图片描述
在这里插入图片描述
配置开发者工具
在这里插入图片描述

打开安全按钮
在这里插入图片描述
使用uniapp的内置组件 不要使用h5标签(如 div span等) 因为在网页上可以展示出来,但是到了小程序上就不行了
在这里插入图片描述

在这里插入图片描述

新建页面

在这里插入图片描述
配置路由
标题和下拉刷新
在这里插入图片描述

在这里插入图片描述

属性介绍

在这里插入图片描述

按下变色,松开还原的样式

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

防止冒泡 点击子元素 只是子元素发生变化 不影响父元素

在这里插入图片描述

在这里插入图片描述

这里的防止冒泡方法 只在微信小程序好使
在这里插入图片描述

text属性

在这里插入图片描述

设置为可以选择
在这里插入图片描述
在这里插入图片描述

一些效果展示

在这里插入图片描述

在这里插入图片描述

display:inline-block; 行级块元素
在这里插入图片描述

在这里插入图片描述

white-space:nowrap; 不换行
在这里插入图片描述
在这里插入图片描述

轮播图

vw 视图宽度 100vw 就相当于百分之百的宽度
vh 视图高度 100vh 就相当于当前屏幕可视的高度的百分之百的高度
在这里插入图片描述
在这里插入图片描述
这里右边缺一块是因为border也占了一个像素 把右边挤走了
在这里插入图片描述

使用 伪类选择器 每双数的元素变成orange
在这里插入图片描述
在这里插入图片描述
轮播指示点 颜色设置
在这里插入图片描述

在这里插入图片描述

图片

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

最常用的模式 aspectFill
在这里插入图片描述

页面跳转

navigator(导航栏) 相当于html的a标签
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
可以跳转到其他小程序里
在这里插入图片描述
点击图片跳转
在这里插入图片描述

按钮和input

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3DMAX一键虚线图形插件DashedShape使用方法

3DMAX一键虚线图形插件使用方法 3dMax一键虚线图形插件,允许从场景中拾取的样条线创建虚线形状。该工具使你能够创建完全自定义的填充图案,为线段设置不同的材质ID,并在视口中进行方便的预览。 【版本要求】 3dMax 2012 – 2025(…

二十六、 如何确定落实数据跨境传输合规措施的内部牵头部门?

企业在落实数据跨境传输合规措施时,可能会需要法务、信息安全与安全运维、审计内控、人力资源等多个部门联动配合。 其中,法务部门通常负责协助相关部门识别在业务开展过程中涉及的各种数据类型,梳理各种类型数据的境内外传输链路&#xff0c…

es6 proxy的作用和用法

Proxy 是 ES6 中新增的一个构造函数,它用于创建一个代理对象,可以拦截并自定义对象的基本操作,例如属性查找、赋值、枚举、函数调用等。 使用 Proxy 可以实现许多高级功能,例如数据绑定、校验、撤销/重做等。下面是一个简单的示例…

Python 动态导入库

Python 动态导入库 从一个文件夹下遍历所有.py文件,并利用__Import__()函数实现全局导入 例程 import os # 导入操作系统接口模块 import sys # 导入系统模块# 将当前目录下的 DIR 目录添加到系统路径中,以便后续导入模块 sys.path.append(./DIR)# …

LeetCode每日一题:将元素分配到两个数组中 II - 二叉索引树BIT

大家好!今天我们来聊聊一道有趣的LeetCode分配问题将元素分配到两个数组中 II。📊 问题描述 给你一个下标从 1 开始、长度为 n 的整数数组 nums 。 现定义函数 greaterCount ,使得 greaterCount(arr, val) 返回数组 arr 中 严格大于 val 的…

spring入门aop和ioc

文章目录 spring分层架构表现层服务层(业务层)持久层 spring核心ioc(控制反转)1)**接下来是代码示例:**2)**ioc容器的使用过程**3)ioc中的bean管理4)实例化bean的三种方式 aop(面向切面开发) 定…

数据结构与算法笔记:基础篇 - 数组:为什么数组都是从0开始编号

概述 提到数组,大家应该都不陌生。每一种编程语言基本都会有数组这种数据类型。不过,它不仅仅是一种编程语言中的数据类型,还是一种基础的数据结构。尽管数组看起来非常简单,但是我估计很多人并没有理解这个数据结构的精髓。 在…

AB测试实战

AB测试实战 1、AB测试介绍🐾 很多网站/APP的首页都会挂一张头图(Banner),用来展示重要信息,头图是否吸引人会对公司的营收带来重大影响,一家寿险公司Humana设计了如下三张头图,现在需要决定使用哪一张放到首页&#x…

FastDFS分布式文件系统

一、概述 FastDFS是一款由国人余庆开发的轻量级开源分布式文件系统,它对文件进行管理,功能包括:文件存储、文件同步、文件访问(文件上传、文件下载)等,主要解决大容量文件存储和高并发访问问题&#xff0c…

jenkins应用2-freestyle-job

1.jenkins应用 1.jenkins构建的流程 1.使用git参数化构建,用标签区分版本 2.git 拉取gitlab远程仓库代码 3.maven打包项目 4.sonarqube经行代码质量检测 5.自定义制作镜像发送到远程仓库harbor 6.在远程服务器上拉取代码启动容器 这个是构建的整个过程和步骤…

保姆级教程:Redis 主从复制原理及集群搭建

😄作者简介: 小曾同学.com,一个致力于测试开发的博主⛽️,主要职责:测试开发、CI/CD 如果文章知识点有错误的地方,还请大家指正,让我们一起学习,一起进步。 😊 座右铭:不…

线程池的工作原理

文章目录 一、应用场景二、工作原理三、主要函数 一、应用场景 传统并发变成的缺陷: 1.创建和销毁线程上花费的时间和消耗的系统资源,甚至可能要比花在处理实际的用户请求的时间和资源要多得多 2. 活动的线程需要消耗系统资源,如果启动太多&…

Python基础教程教材:从入门到精通的全方位解析

Python基础教程教材:从入门到精通的全方位解析 Python,作为一门强大的编程语言,正日益受到全球开发者的青睐。无论是数据分析、人工智能还是Web开发,Python都展现出其独特的魅力。然而,对于初学者来说,如何…

新规:互联网政务应用安全管理规定将于7月1日正式执行

随着互联网技术的快速发展,政务服务也逐渐向数字化、智能化、便捷化转型。为了保障互联网政务应用的安全,保障公民信息不被泄露,为了让大家放心,我国政府出台了互联网政务应用安全管理规定。此规定将于24年7月1日正式执行。 1、规…

安卓自动化之minicap截图

安卓自动化之minicap截图 关于安卓自动化使用找图方法点击时,最大的痛点是使用原生adb截图速度太慢了,大概需要3s的时间,再加上我们使用opencv的找图算法,时间就去都三秒多了,为了解决这一个痛点,我们就可…

HBase数据库面试知识点:第二部分 - 核心技术(持续更新中)

目录 1. 分布式存储与HDFS 2. 面向列的存储 3. 数据版本控制 4. Region与RegionServer 5. 分布式协调服务(ZooKeeper) 1. 分布式存储与HDFS HBase利用Hadoop的HDFS作为其底层存储系统,确保数据的高可靠性和可扩展性。 数据块&#xff0…

Python爬虫如何入门:一步步走向精通的指南

Python爬虫如何入门:一步步走向精通的指南 在信息爆炸的时代,爬虫技术已经成为获取、整理和分析数据的必备技能。Python,以其简洁易懂的语法和强大的库支持,成为了爬虫开发的热门语言。那么,如何入门Python爬虫呢&…

研发质量测试工程师的笔试题

研发质量测试工程师的笔试题通常会考察候选人在测试理论、测试方法、测试工具使用以及实际案例分析等方面的知识和能力。以下是一些可能出现在研发质量测试工程师笔试中的题目类型和内容: 一、测试理论题 请简述软件测试的目的和基本原则。描述黑盒测试和白盒测试…

Python | 句子缩写

字符串大小的比较Unicode码值 类似于asc|| 码 小写字母从 a 到 z 对应的 Unicode 码值是从 97 到 122,而大写字母从 A 到 Z 对应的 Unicode 码值是从 65 到 90, 大小写字母之间的差值为32,所以可以通过数学运算将小写字符减去32后转换为大写字符。 字…

26、matlab多项式曲线拟合:polyfit ()函数

1、polyfit 多项式曲线拟合 语法 语法:p polyfit(x,y,n) 返回次数为 n 的多项式 p(x) 的系数,该阶数是 y 中数据的最佳拟合(基于最小二乘指标)。 语法:[p,S] polyfit(x,y,n) 还返回一个结构体 S 语法:[…