uniapp简介

发布于:2025-07-10 ⋅ 阅读:(19) ⋅ 点赞:(0)

欢迎来到我的UniApp技术专栏!🎉 在这里,我将与大家分享关于UniApp开发的实用技巧、最佳实践和项目经验。

专栏特色:

📱 跨平台开发一站式解决方案
🚀 从入门到精通的完整学习路径
💡 实战项目经验分享
🔍 常见问题深度解析
无论你是刚接触UniApp的新手,还是有一定经验的开发者,都能在这里找到有价值的内容。我将持续更新最新技术动态和开发技巧,帮助大家提升开发效率,打造高质量的跨平台应用。

如果文章对你有帮助,别忘了点赞收藏🌟,也欢迎在评论区留言交流,我会及时回复大家的问题!

让我们一起探索UniApp的无限可能!💪

目录

一.为什么要使用uniapp?

二.学习uniapp,我们可以学到什么? 

三.笔记地址

四.编辑器的选择

五.uniapp官网

六.使用HBuilder创建uniapp项目

七.uniapp项目结构

八.运行uniapp项目


一.为什么要使用uniapp?

        uniapp是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到ios、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

        没学习uniapp时,我们编写微信小程序、快手小程序、抖音小程序时,需要分别了解它们的文档,熟悉对应的API和规范;而学习uniapp之后,我们只需要熟悉uniapp的开发文档即可,想要发布到什么平台,只需要一键打包即可实现,让开发变得更容易、更高效。

二.学习uniapp,我们可以学到什么? 

  • 创建uniapp项目:熟悉uniapp项目的开发流程,介绍常用的内置组件
  • 讲vue3的语法格式:如果没有学过vue3,将掌握vue3的相关知识
  • 深入了解vue组件:掌握vue组件的生命周期、uniapp组件生命周期各自的用法
  • uniapp全局文件配置、非常重要的API调用、各自的使用场景
  • request网络请求、扩展组件uni-ui的安装与使用
  • 提升html和css的编写能力和布局经验
  • 各种小案例、以及最终的大项目实战
  • 封装网络请求、对接各个页面的真实接口、根据需求文档完成整体的项目逻辑
  • 各个平台的打包上线,如:H5、微信小程序、抖音小程序、手机app等平台

三.笔记地址

https://gitee.com/qingnian8/univue3

四.编辑器的选择

  • VSCode
  • HBuilder X

注意:无论我们使用哪个编辑器,最终项目打包时,都离不开HBuilderX,因此我们直接使用HBuilder X就行了。

五.uniapp官网

uni-app官网

六.使用HBuilder创建uniapp项目

七.uniapp项目结构

因为uniapp本质上,还是vue项目,所以uniapp的项目结构和vue的项目结构基本一致。如下图:

八.运行uniapp项目

  • 运行到内置浏览器

  • 运行到浏览器

  • 运行到微信小程序

第一步:先安装微信开发者工具

第二步:查看该软件的安装位置

第三步:将微信开发者工具的位置,设置到uniapp中,如下:

第四步:运行uniapp项目到我们的微信开发者工具

然后微信开发者工具就会被自动打开,并运行上了uniapp项目,页面效果如下

注意:如果微信开发者工具没展现出页面,可能是设置问题,解决办法如下:

  • 抖音开发者工具等其他,同上(微信开发者工具)一样配置即可

以上就是本篇文章的全部内容,喜欢的话可以留个免费的关注呦~


网站公告

今日签到

点亮在社区的每一天
去签到