uniapp学习（001 前期介绍）

最新推荐文章于 2024-11-10 21:24:10 发布
最新推荐文章于 2024-11-10 21:24:10 发布
阅读量883 收藏 7
点赞数 7
分类专栏： uniapp 文章标签： uni-app 学习 vue javascript css 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_book/article/details/139445095
版权

零基础入门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

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

wang_book
关注
专栏目录
Uniapp学习心得体会
m0_66085294的博客
06-24 358
比如，我们可以使用微信开发者工具来调试Uniapp中的小程序，在H5端上，我们也需要了解不同的浏览器调试工具。如前所述，Uniapp自带一些基本的UI组件，但是，针对某些应用需求，我们可能需要更丰富的UI组件。在Uniapp中，我们可以使用flexbox和grid来实现不同的布局，并使用不同的CSS样式来加强应用程序的可视化效果。通过不断地学习和实践，我们可以更好地掌握Uniapp的使用，构建出高质量的应用程序。Uniapp的学习需要不断地实践，这能够帮助我们更好地掌握Uniapp的基本用法。
基于uni-app开发的DCIM管理系统（uniapp）
08-16
uniapp 说明 uniapp-v3是基于vue3语法的，在hbuilderx中运行即可 Project setup ...适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
学习uniapp心得体会
2301_78819026的博客
06-20 177
总之，Java是一种非常有用的编程语言，它具有广泛的应用和极高的可扩展性，可以让开发者的程序在不同的平台上运行，也可以应对不同的实际场景和需求。Java在当时的计算机领域巨大的影响力，它的出现实现了"一次编写，到处运行"的理想，这也是Java成为开发者最喜欢的编程语言之一的原因之一。它的创造者是Dennis Ritchie， C语言是在1969年到1973年之间由贝尔实验室开发的，早期作为Unix操作系统的语言，后来迅速发展成为独立的编程语言，并成为学习计算机科学的重要工具。
2023年最新最全uniapp入门学习，零基础入门uniapp到实战项目，unicloud数据后台快速打造uniapp小程序项目
热门推荐
编程小石头
11-03 3万+
零基础入门uniapp的开发
uniapp学习心得体会
weixin_72691962的博客
06-27 73
了解DOM操作、CSS布局和常用的JavaScript框架，如Vue.js，将为你深入学习UniApp打下坚实的基础。此外，官方提供的示例代码也是学习的宝贵资源，通过分析和模仿它们，你能更好地理解UniApp的工作原理。持续学习和关注新技术： 前端技术和移动应用开发都是快速发展的领域，因此保持学习的态度非常重要。此外，也可以学习其他相关的技术和框架，如React Native、Flutter等，以提升自己的综合能力。总之，UniApp学习是一个艰辛但充实的过程，需要坚持不懈的努力和持续的学习。
uniapp介绍
wpy724189991的博客
12-23 7229
前期了解 为什么要学uniapp uniapp技术栈 uni-app 是一个使用 Vue.js 开发所有前端应用的框架， 可靠性 属于DCloud公司，它拥有900万开发者、数百万应用、12亿手机端月活用户 效率 周边生态比较丰富，提供更多成熟的组件，如果设计元素比较少（比如说加载状态样式，下拉刷新，配置底部导航和顶部nav等），使用它也是不错的选择 如果是开发app，速度远超原生开发，一个人可以完成安卓，ios的开发，当然也有缺点 对于前端来说学习成本低，开发者编写一套代码，可发布到iOS、Andro
uniapp跨平台开发学习心得
zaxw0616的博客
06-01 1840
在开始深入学习uniapp之前，我先对它进行了简单的了解。uniapp是一种使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、H5、以及各种小程序（如微信/支付宝）等多个平台。这种“编写一次，到处运行”的能力，极大地提高了开发效率，降低了开发成本。在学习过程中，我首先通过官方文档和教程了解了uniapp的基本概念和使用方法。我了解到uniapp支持使用Vue.js语法进行开发，这使得我能够快速上手，因为我在之前已经有一定的Vue.js基础。
Uniapp学习之从零开始写一个简单的小程序demo（新建页面，通过导航切换页面，发送请求）
weixin_56039103的博客
09-05 2681
先把官网文档摆在这，后面会用到的。
uni.app学习心得
ax_99的博客
06-10 1086
HBuilderX，微信开发者工具... HBuilderX内置相关环境，开箱即用，无需配置nodejs。可以去插件市场找，一般需要的插件市场都会有，也会有一些UI框架，比如uView，用起来也比较可以，有很多组件可以直接使用。正常的开发还是比较满足的，如果还是不满意就去插件市场找或者自己写组件了。写法：因为uni是用vue开发的嘛，所以基本上就是vue的写法，只是一些标签使用不同，比如div是view，span是text...更多的可以直接看文档，文档写的很清楚。页面路由。
uniapp 总结篇 （小程序）
^_^
07-23 2万+
做了很长时间的小程序了，在此做一个完整的项目总结，希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理，更重要的是帮助大家实现功能、流程。uniapp还是很强大的可以开发小程序、h5、pc、app。...
毕业设计-基于Uniapp搭建的银行预约系统源码(含前台和后台管理系统).zip
08-31
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
基于Vue+Spring+Mybati+MySql+UniApp的前后端分离在线学习平台系统，含PC端与移动端（课设报告+源码）
10-06
【作品名称】：基于Vue+Spring+Mybati+MySql+UniApp的前后端分离在线学习平台系统，含PC端与移动端（课设报告+源码） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大...
基于uniapp的微信小程序网约车（前端）.zip
02-17
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
uniapp实现简易贪吃龙
LY1879276369的博客
11-08 221
【代码】uniapp实现简易贪吃龙。
vue2，vue3，uniapp，小程序实现前端url生成二维码
A1123352950的博客
11-06 388
1、第一步，在项目的utils文件夹下面创建一个weapp-qrcode.js文件（文件名随便，只展示我自己的）话不多说直接上代码，亲测有效，希望能帮助大家，同时如果有更好的方法希望大家能够分享。最近遇到一个项目，api返回url地址，前端通过地址生成二维码。3、在你需要使用的.vue中创建canvas，如下。2、将一下代码复制粘体到js文件中。
uniapp的基本使用（easycom规范和条件编译）和uview组件的安装和使用
chengcheng9876的博客
11-08 1683
easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用。easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）。
Uniapp底部导航栏设置（附带PS填充图标教程）
驴大毛的博客
11-06 553
本文讲述了uniapp底部导航栏设置以及如何使用ps对图标底图进行填充
uni-app资源管理与图标使用全解
最新发布
前端开发工程师
11-10 491
随着移动应用开发的日益普及，跨平台框架成为了开发者们的重要选择。uni-app作为一款基于Vue.js的跨平台开发框架，允许开发者使用一套代码同时构建iOS、Android、H5和小程序等多个平台的应用。在uni-app中，资源管理和图标使用是开发过程中不可或缺的一部分，它们直接影响到应用的用户体验和性能表现。
uniapp—android原生插件开发（1环境准备）
北纬先生
11-08 522
新大陆PDA盘点RFID、uni-app集成RFID、新大陆PDA盘点RFID、Android原生插件开发、android原生插件打aar包、未配置appkey或者配置错误
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值