uni-app介绍和使用

目录

一.安装

二.下载插件​编辑

三.创建uni-app项目

四.查看效果

五、上传到手机端

六、手机预览效果

---

uni-app 是一款由 DCloud 开发的基于 Vue.js 的前端框架，它能够帮助开发者使用同一套代码，快速构建同时支持多个平台的应用程序，包括H5、iOS、Android、以及各种小程序平台（如微信小程序、支付宝小程序等）。

以下是 uni-app 的一些特点和优势：

1. 跨平台开发：uni-app 的代码可以同时运行在多个平台上，开发者只需编写一份代码即可适配不同平台，极大地提高了开发效率。

2. 基于 Vue.js：uni-app 采用 Vue.js 作为开发框架，提供了熟悉的 Vue.js 开发体验和语法，降低了学习成本。

3. 丰富的组件库：uni-app 提供了丰富的组件库，开发者可以快速搭建页面，并在不同平台上保持一致的界面和功能。

4. 灵活的扩展性：uni-app 支持插件和原生能力扩展，可以利用插件实现更多功能并与原生平台进行交互。

5. 优秀的性能：uni-app 采用了优化措施，保证应用在各个平台上都具有流畅的性能表现。

总的来说，uni-app 是一个非常适合开发跨平台应用程序的工具，为开发者提供了一种高效、便捷的方式来构建应用

一.安装

首先要安装HBuilderX 和微信开发者工具

官网：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架https://www.dcloud.io/   微信开发者工具: 微信开放平台 (qq.com)

  也可以看我另一篇:小程序介绍与安装_微信小程序相关介绍-CSDN博客

二.下载插件

后续用到的插件 HBuilderX会提示你下载的 所以不用特意去下载

三.创建uni-app项目

新建项目--选择uni-app项目 也可以选择模板 

四.查看效果

运行到小程序模拟器(也就用到了微信开发者工具 )

tips：报错是正常的 需要在微信开发者平台 将服务端口给打开

然后再次运行就不会报错了 就可以看到一个移动端的窗口 上面是默认效果 

五、上传到手机端

要配置微信小程序的id

如果是首次复制 复制不了 要修改一下 然后选择下拉框的小程序测试版

六、手机预览效果

这就可以在手机上预览效果了