您的位置：首页 > 游戏 > 手游 > uniapp学习（001 前期介绍）

uniapp学习（001 前期介绍）

2024/11/16 18:58:35 来源：https://blog.csdn.net/wang_book/article/details/139445095  浏览:  次   关键词：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

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

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

IDEA中操作表 _app搭建笔记 电影订票及评论系统（程序+文档模板） [鲜花] 20241115 My(self+life). 在未来时空中沉浸探索，体验引领时代的建筑节能展馆 2024-2025-1 20241322《计算机基础与程序设计》第八周学习总结

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989