uniapp应用开发：学习回顾

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

uniapp发展历史

UniApp是一个跨平台应用开发框架，它允许开发者使用Vue.js编写一次代码，然后将其部署到多个平台，包括iOS、Android、H5和小程序等。以下是UniApp的发展历史：

1. 诞生阶段（2018年）：

   • UniApp由DCloud公司开发，并于2018年正式发布。
   • 最初UniApp的目标是解决移动应用跨平台开发的问题，提供了一种简单而高效的方式来创建跨平台应用。

2. 快速发展（2018年至今）：

   • 随着移动应用市场的不断扩大，UniApp得到了广泛的关注和采用。
   • 开发者社区不断壮大，为UniApp的生态系统贡献了大量的组件、插件和教程，使得开发者可以更轻松地构建功能丰富的跨平台应用。

3. 持续优化（2019年至今）：

   • UniApp团队持续改进框架，加入了更多的功能和特性，提高了性能和开发效率。
   • 针对不同平台的特性和需求，UniApp逐步优化了对各种设备的适配和兼容性。

4. 生态系统丰富（2020年至今）：

   • UniApp的生态系统日益丰富，涵盖了各种行业和领域的应用开发需求，包括电商、社交、教育、游戏等。
   • 第三方开发者和公司纷纷加入UniApp生态，推出了各种插件和解决方案，进一步丰富了UniApp的功能和应用场景。

5. 国际化进程（2021年至今）：

   • UniApp在国际市场上也逐渐崭露头角，受到越来越多国外开发者的欢迎和采用。
   • UniApp团队积极推动国际化进程，加强与国际开发者社区的合作与交流，提升UniApp在全球范围内的影响力和竞争力。

6. 未来展望：

   • 随着移动应用行业的不断发展和变化，UniApp将继续致力于提供更好的跨平台开发解决方案，满足开发者和用户的需求。
   • UniApp团队将继续加强技术研发和生态建设，推动UniApp生态系统的健康发展，为全球开发者提供更好的工具和服务。

uniapp x（下一代 uni-app）

Uni-app X是Uni-app框架的进化版本，它在原有Uni-app的基础上进行了一系列的优化和改进，旨在提供更好的跨平台开发体验和性能表现。以下是Uni-app X的一些特点和优势：

1. 性能优化：

   • Uni-app X对性能进行了优化，提高了应用的运行速度和响应性能，使得应用在各个平台上都能够更加流畅地运行。

2. 体验提升：

   • Uni-app X致力于提升用户体验，通过优化页面渲染和交互效果，使得应用更加吸引人和易用。

3. 开发效率：

   • Uni-app X提供了更多的开发工具和功能，帮助开发者更加高效地进行跨平台开发，减少重复工作和提高代码复用率。

4. 生态扩展：

   • Uni-app X在生态系统方面进行了扩展，引入了更多的插件和组件，丰富了开发者的选择和应用场景。

5. 跨平台兼容：

   • Uni-app X仍然保持了跨平台兼容性，开发者可以使用同一套代码，快速部署到多个平台，包括iOS、Android、H5和小程序等。

6. 国际化支持：

   • Uni-app X更加注重国际化，提供了更多的多语言支持和国际化功能，满足不同地区和国家的用户需求。

总的来说，Uni-app X是Uni-app框架的一次升级和改进，旨在为开发者提供更好的开发体验和用户体验，推动跨平台应用开发的进一步发展。

与vue相比

Vue和UniApp的写法有一些区别，主要体现在以下几个方面：

1. 项目结构：

   • Vue项目通常采用标准的Vue.js项目结构，包括src目录、components目录、router目录等。
   • UniApp项目则采用一种特定的项目结构，包括pages目录、components目录、static目录等。UniApp还会针对不同平台生成对应的文件和代码，如生成iOS和Android平台的原生代码。

2. 页面编写：

   • Vue中的页面可以直接在src目录下编写.vue文件，其中包含template、script和style部分。
   • UniApp的页面编写方式与Vue基本相同，但是需要将页面放置在pages目录下，并且UniApp提供了一些特定的组件和API用于跨平台开发，如导航栏、底部选项卡等。

3. API调用：

   • Vue中的API调用主要是通过Vue实例或Vue组件的方式进行，可以使用Vue提供的内置方法或自定义方法。
   • UniApp的API调用则需要根据不同平台进行适配，UniApp提供了一套跨平台的API，开发者可以根据需要调用对应平台的API。

4. 样式处理：

   • Vue中的样式处理可以采用普通的CSS样式表或CSS预处理器（如Sass、Less等）。
   • UniApp中的样式处理与Vue类似，但需要注意不同平台的样式差异，UniApp提供了一些平台相关的样式类和特性。

5. 打包构建：

   • Vue项目通常使用Vue CLI等工具进行打包构建，生成适用于不同环境的代码。
   • UniApp项目则通过UniApp提供的构建工具进行打包，生成适用于iOS、Android、H5等平台的代码。

总体来说，Vue和UniApp的写法有很多相似之处，但UniApp在跨平台开发方面进行了一些定制和优化，使得开发者可以更方便地编写和部署跨平台应用。

创建uniapp项目

• 使用Vue3/Vite版（推荐）

  • 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

    npx degit dcloudio/uni-preset-vue#vite my-vue3-project
    

     

    npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project
    

  • 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

    npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
    

注意

• Vue3/Vite版要求 node 版本 18+、20+
• 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
  • HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
  • HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node路径