uniapp学习（001 介绍-安装等）

于 2024-09-29 16:06:53 发布
阅读量85 收藏 2
点赞数 1
分类专栏： uniapp 文章标签： uni-app 学习 vue node.js 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_book/article/details/142593580
版权

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

总时长 23:40:00 共116P

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

文章目录

创建项目

使用hbuilderX，这里创建选择的vue版本是vue3

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

目录结构

在这里插入图片描述
hbuilderX重启按钮

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述
打包成小程序
在这里插入图片描述

下载微信小程序开发者工具

在这里插入图片描述

在hbuilderX里配置开发者工具

在这里插入图片描述

找到安全，打开服务端口按钮，否则无法查看

在这里插入图片描述

uniapp的vue文件结构详解

在这里插入图片描述

使用uniapp的内置组件 不要使用h5标签（如 div span等） 因为在网页上可以展示出来，但是到了小程序上就不行了
在这里插入图片描述
结构例子
在这里插入图片描述

style这里使用scss

比css好，而且提供了许多增强功能，使得样式表的编写更加灵活和高效；

scss的嵌套格式

在这里插入图片描述

创建新的页面

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

在这里插入图片描述

切换路由地址
在这里插入图片描述

这里的pages.json文件可以自己配置路由
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
可以在创建的时候配置标题名称等信息
在这里插入图片描述

wang_book
关注
专栏目录
uni-app入门学习
2401_84092508的博客
04-20 1013
官方网页uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app为什么要去学习uni-app？
《uniapp跨平台开发——知识总结》
m0_73945778的博客
04-20 846
uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到多个平台pages.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等文件是应用的配置文件，用于指定应用的名称、图标、权限等。App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。uni.scss。
uniapp学习笔记
weixin_45338913的博客
01-03 627
uniapp的学习笔记
uni-app学习笔记
前端学习分享
02-11 1964
uni-app学习笔记
Uni-App从入门到实战-黑马程序员【uniapp基础知识讲义笔记】
南北极之间
04-15 4436
uniapp基础知识笔记
uniapp跨平台开发学习总结
lishidan2003的博客
06-07 755
步骤：在点击工具栏里的文件 -> 新建 -> 项目，然后我们会看见新建项目的弹窗，默认为普通项目，我们手动选择第二个uniapp，手动输入项目名，系统会填入默认路径，但是个人可以根据需要进行修改，点击预览即可。其中，App.vue是应用的根组件，main.js是应用的入口文件，manifest.json是应用的配置文件，pages.json是页面配置文件，uni.scss是应用的公共样式文件。Uni-app的扩展组件库包括图标、轮播图、消息提示等组件，这些组件需要先安装相应的插件，然后才能使用。
uni-app
冰点契约的博客
09-18 1481
官方网页uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app为什么要去学习uni-app？
uniapp基础知识
学过的东西，讲不出来等于没学。
04-19 1993
####uni-app的基本使用 课程介绍： 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 项目：黑马商城项目 uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微
Uniapp 介绍(黑马程序员)
2401_82603291的博客
02-04 1337
uni-app 是一个使用Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app 同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app为什么要去学习uni-app？
uniapp-抓娃娃-营销工具
08-11
【标题】"uniapp-抓娃娃-营销工具"是一个基于uniAPP框架开发的抓娃娃游戏应用，用于商业营销活动，可以吸引用户参与，提高互动性和趣味性。 【描述】"抓娃娃游戏"是一种常见的娱乐方式，它将线上游戏与实体奖品结合...
中国象棋-uniapp-单机游戏-(源码).zip
04-10
这是一个uniapp项目源码例子【中国象棋-单机游戏】项目完整，通过HBuilder X开发工具选uniapp方式打开，uniapp项目可编译发行跨端应用（包括了各种小程序以及APP），可编译正常运行，供学习请参考文章...
uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un
10-04
在本文中，我们将深入探讨如何在uni-app框架中实现车牌号输入功能，主要基于提供的标题“uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un”以及描述“uniapp中使用的车牌输入控件，弹...
uniapp 电商项目模版--mix-mall.zip
11-01
8. **README.md**：通常会包含项目介绍、安装步骤、使用方法等信息，帮助开发者快速上手。 通过使用这个模版，开发者可以快速构建一个功能完善的电商应用，包括商品浏览、筛选、加入购物车、结算、支付等一系列流程...
uniapp打包成apk ---完整解压资源sdk
02-11
uniapp是一款基于Vue.js开发的多端统一框架，它允许开发者用一套代码实现跨平台应用开发，包括iOS、Android、H5以及小程序等。在将uniapp项目打包成APK时，涉及到的关键步骤和资源处理是本话题的重点。 【描述】...
Uniapp时间戳转时间显示/时间格式
qq_44866810的博客
09-24 499
【代码】Uniapp时间戳转时间显示/时间格式。
创意实现！在uni-app小程序商品详情页轮播中嵌入视频播放功能
weixin_44590591的博客
09-25 1070
通过uni-app框架实现商城小程序商品详情页的视频与图片轮播功能，以提升用户体验和增加商品吸引力。通过展示商品视频和图片，用户可以更全面地了解商品细节，从而提高购买决策的便利性和满意度。这种功能适用于各类商品，如服装、家具、电子产品等。通过本文的步骤，您将学会如何在商城小程序中利用uni-app框架实现商品详情页的视频与图片轮播功能
uniapp生物识别示例（人脸识别、指纹识别）
weixin_59685936的博客
09-25 780
uniapp生物识别示例（人脸识别、指纹识别）
uni-app - - - - -vue3使用i18n配置国际化语言
最新发布
Dark_programmer的博客
09-25 420
uni-app - - - - -vue3使用i18n配置国际化语言
uniapp如何安装luch-request
06-07
在Uniapp中安装luch-request可以通过以下步骤完成： 1. 在你的Uniapp项目根目录下，打开终端或者命令行工具。 2. 输入以下命令来安装luch-request： ``` npm install luch-request --save ``` 3. 如果你使用的是yarn管理包，可以使用以下命令安装： ``` yarn add luch-request ``` 4. 等待安装完成后，在你的代码里面引入luch-request： ``` import Request from 'luch-request'; ``` 5. 接着就可以使用luch-request发送请求了，例如： ``` const request = new Request(); request.get('/api/user').then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 这就完成了在Uniapp中安装和使用luch-request的过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值