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

最新推荐文章于 2025-12-04 17:51:10 发布
原创 最新推荐文章于 2025-12-04 17:51:10 发布 · 390 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #学习 #vue #node.js #前端 #微信小程序

零基础入门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文件可以自己配置路由
在这里插入图片描述
在这里插入图片描述

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

《uniapp跨平台开发——知识总结》
m0_73945778的博客
04-20 1007
uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到多个平台pages.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等文件是应用的配置文件，用于指定应用的名称、图标、权限等。App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。uni.scss。
uniapp跨平台开发学习总结
lishidan2003的博客
06-07 971
步骤：在点击工具栏里的文件 -> 新建 -> 项目，然后我们会看见新建项目的弹窗，默认为普通项目，我们手动选择第二个uniapp，手动输入项目名，系统会填入默认路径，但是个人可以根据需要进行修改，点击预览即可。其中，App.vue是应用的根组件，main.js是应用的入口文件，manifest.json是应用的配置文件，pages.json是页面配置文件，uni.scss是应用的公共样式文件。Uni-app的扩展组件库包括图标、轮播图、消息提示等组件，这些组件需要先安装相应的插件，然后才能使用。
uni-app入门学习
2401_84092508的博客
04-20 1411
官方网页uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app为什么要去学习uni-app？
uniapp学习笔记
weixin_45338913的博客
01-03 751
uniapp的学习笔记
uni-app学习笔记
前端学习分享
02-11 2219
uni-app学习笔记
uniapp基础知识—大总结
热门推荐
john_QY的博客
11-01 7万+
uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架。 具有vue和微信小程序的开发经验，可快速上手uni-app 为什么要去学习uni-app？ 相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开
uni-app
冰点契约的博客
09-18 1586
官方网页uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app为什么要去学习uni-app？
Uni-App从入门到实战-黑马程序员【uniapp基础知识讲义笔记】
南北极之间
04-15 5152
uniapp基础知识笔记
uniapp_001_系统完成项目实战
浪漫韫秋
08-18 334
推送、统计、广告都是要集成三方服务的。只需要简单配置就可以了。
CDA学习之 uni-app
专注于医院数据分析技术与系统开发的创作与分享。
07-15 277
一、基本使用 1、介绍和官方页面 1.1 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯 项目:黑马商城项目 1.2 uni-app介绍 uni-app是一个使用 yue is开发所有前端应用的框架,开发者编写一套代码,可发布到ios、 Android、H5、以及各种小程序(微信/支付/百度/头条/QQ钉钉等多个平台 即使不跨端,uni-app同时也是更好的小程序开发架 具有vue和微信小程序的开
uniapp直接使用map标签就可以直接使用腾讯地图
02-27
### 如何在 UniApp 中使用 ...以上就是关于怎样借助 UniApp 平台快速搭建起支持腾讯地图服务的应用程序的大致流程介绍。实际开发过程中可能还会遇到各种细节上的调整需求，建议参考官方文档深入学习相关API的功能特性。
【人工智能实战】：将人脸识别技术无缝集成到uniapp项目中
![【人工智能实战】：将人脸识别技术无缝集成到uniapp项目中]...uniapp以Vue.js为基础，通过一套代码编译到iOS、Android、H5等多个平台。它不仅简化了开发流程，提高了开发效率，还为开发者提供了一个轻量级
uniapp+vue3项目中的常见报错情况以及解决方法
最新发布
m0_71207979的博客
12-04 273
uniapp+vue3虽然有很多适配兼容方面的问题，但是优点也是很多，并且UniApp官方也推荐新项目使用Vue3，未来生态将更多聚焦Vue3。
uniapp 滚动到表单的某个位置，表单验证失败时。
PrimaryColor
12-03 149
【代码】uniapp 滚动到表单的某个位置，表单验证失败时。
uniapp通用单张图片上传组件
yonghuid123453的博客
12-03 558
本文详细介绍了基于uni-app框架开发通用单张图片上传组件的实践方案。组件采用模块化设计，包含上传占位区、图片预览区和交互反馈区三大核心模块。重点实现了图片选择上传流程、服务器接口对接以及预览删除功能，通过uni.uploadFile API完成文件传输，并提供了完善的错误处理和用户反馈机制。组件设计注重通用性和扩展性，支持样式定制和功能扩展，适用于各类移动端图片上传场景。文章还分享了组件布局设计、交互优化等最佳实践，为移动应用开发提供了可复用的图片上传解决方案。
使用node和@abandonware/bleno写一个ble模拟设备，用Uni-app模拟终端连接
Demon's blog
12-01 174
本项目实现了一个基于Node.js的BLE模拟设备和Uni-app终端的通信系统。使用@abandonware/bleno库开发BLE外设，通过Uni-app构建移动端应用实现连接交互。系统支持字符串与HEX格式的相互转换（借助在线转换工具），并提供了完整的Github和Gitee代码仓库。项目截图展示了设备模拟和终端连接的界面效果，为BLE开发提供了完整的参考实现。
基于SpringBoot+uniapp+vue.js的货物配送系统
自学网站s.jf3q.com,菜鸟的成长之路
12-01 789
本系统旨在构建一个集后台管理、司机端App操作为一体的综合性货物配送跟踪平台。其核心价值在于解决传统物流配送中信息不透明、追踪困难、管理效率不高的问题，实现对货物从订单生成、商品出库、运输在途到最终签收的全流程信息化管理与实时监控，从而有效提升货物配送的效率和透明度。
Uniapp——开发Android插件教程
人生在世
12-04 586
Uniapp调用原生API开发指南 当Uniapp无法实现某些功能时，可以通过调用原生API实现。本文介绍了Android原生模块的开发和使用流程： 创建原生模块： 新建Android Module工程 实现功能方法（如testAsyncFunc、testSyncFunc） 配置dcloud_uniplugins.json文件声明模块信息 Uniapp调用方式： 使用uni.requireNativePlugin引入原生模块 支持同步/异步方法调用和事件监听 示例代码演示了方法调用和原生页面跳转 打包部署：
uniapp demo调试支付宝沙箱模式
分享技术干货和灵感、推荐新书和好玩的项目、分享Java面试题
12-01 447
摘要 本文介绍使用uniapp调试支付宝沙箱支付的步骤：1）申请支付宝沙箱账号；2）下载uniapp官方demo；3）修改订单接口为服务端接口；4）关键配置沙箱环境（避免参数异常）；5）使用沙箱版支付宝APP测试支付功能。重点提醒必须通过代码设置SANDBOX环境，并提供了错误排查方法（支付宝诊断工具查看调用记录）。完整流程可实现沙箱环境下的APP支付调试。
uniapp必备：uni-card等基础插件使用指南
uniapp的基础插件库是uniapp官方或者社区开发者提供的辅助开发模块，旨在为uniapp的学习者和开发者提供便捷的组件和功能，以快速构建跨平台的高质量应用。 在uniapp的基础插件库中，通常会包含诸如uni-card、uni-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值