uniapp学习(001 前期介绍)

作者 : admin 本文共506个字,预计阅读时间需要2分钟 发布时间: 2024-06-5 共1人阅读

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

总时长 23:40:00 共116P

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


简介

uniapp学习(001 前期介绍)插图
uniapp学习(001 前期介绍)插图(1)

目录结构

uniapp学习(001 前期介绍)插图(2)

uniapp学习(001 前期介绍)插图(3)
效果
uniapp学习(001 前期介绍)插图(4)
打包成小程序
uniapp学习(001 前期介绍)插图(5)
uniapp学习(001 前期介绍)插图(6)
配置开发者工具
uniapp学习(001 前期介绍)插图(7)

打开安全按钮
uniapp学习(001 前期介绍)插图(8)
使用uniapp的内置组件 不要使用h5标签(如 div span等) 因为在网页上可以展示出来,但是到了小程序上就不行了
uniapp学习(001 前期介绍)插图(9)

uniapp学习(001 前期介绍)插图(10)

新建页面

uniapp学习(001 前期介绍)插图(11)
配置路由
标题和下拉刷新
uniapp学习(001 前期介绍)插图(12)

uniapp学习(001 前期介绍)插图(13)

属性介绍

uniapp学习(001 前期介绍)插图(14)

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

uniapp学习(001 前期介绍)插图(15)
uniapp学习(001 前期介绍)插图(16)

uniapp学习(001 前期介绍)插图(17)

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

uniapp学习(001 前期介绍)插图(18)

uniapp学习(001 前期介绍)插图(19)

这里的防止冒泡方法 只在微信小程序好使
uniapp学习(001 前期介绍)插图(20)

text属性

uniapp学习(001 前期介绍)插图(21)

设置为可以选择
uniapp学习(001 前期介绍)插图(22)
uniapp学习(001 前期介绍)插图(23)

一些效果展示

uniapp学习(001 前期介绍)插图(24)

uniapp学习(001 前期介绍)插图(25)

display:inline-block; 行级块元素
uniapp学习(001 前期介绍)插图(26)

uniapp学习(001 前期介绍)插图(27)

white-space:nowrap; 不换行
uniapp学习(001 前期介绍)插图(28)
uniapp学习(001 前期介绍)插图(29)

轮播图

vw 视图宽度 100vw 就相当于百分之百的宽度
vh 视图高度 100vh 就相当于当前屏幕可视的高度的百分之百的高度
uniapp学习(001 前期介绍)插图(30)
uniapp学习(001 前期介绍)插图(31)
这里右边缺一块是因为border也占了一个像素 把右边挤走了
uniapp学习(001 前期介绍)插图(32)

使用 伪类选择器 每双数的元素变成orange
uniapp学习(001 前期介绍)插图(33)
uniapp学习(001 前期介绍)插图(34)
轮播指示点 颜色设置
uniapp学习(001 前期介绍)插图(35)

uniapp学习(001 前期介绍)插图(36)

图片

uniapp学习(001 前期介绍)插图(37)
uniapp学习(001 前期介绍)插图(38)

uniapp学习(001 前期介绍)插图(39)

uniapp学习(001 前期介绍)插图(40)

最常用的模式 aspectFill
uniapp学习(001 前期介绍)插图(41)

页面跳转

navigator(导航栏) 相当于html的a标签
uniapp学习(001 前期介绍)插图(42)
uniapp学习(001 前期介绍)插图(43)

uniapp学习(001 前期介绍)插图(44)
可以跳转到其他小程序里
uniapp学习(001 前期介绍)插图(45)
点击图片跳转
uniapp学习(001 前期介绍)插图(46)

按钮和input

uniapp学习(001 前期介绍)插图(47)
uniapp学习(001 前期介绍)插图(48)
uniapp学习(001 前期介绍)插图(49)


本站无任何商业行为
个人在线分享 » uniapp学习(001 前期介绍)
E-->