近年来，随着技术的发展，人们越来越意识到跨平台和统一的重要性。对于同一款应用来说，一般都会有移动端、PC端、甚至小程序端。这是由于设备的不同，我们必须要做很多的客户端来满足不同的用户需求。但是由于硬件设施的不同，我们往往对于同一款应用的两个不同端要编写两次代码，而这些代码中有很多都是可以复用的，那么有没有一张可能，我们只编写一次代码就能满足不同的设施需求呢。现在，介绍一款由国人（DCloud公司）开发的前端框架uniapp，完美的解决了这个问题。
uni-app 是一个使用 vue 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uniapp的官网地址：uni-app官网 (dcloud.net.cn)
DCloud退出了一款应用专门用来编译uniapp（本质还是Vue项目）HBuilderX。
这款工具是完全开源免费的，并且免安装，我们只需要解压之后就可以正常的使用。DCloud公司承诺将一直开源下去。
HBuilderX的下载地址在uniapp的官网中就可以找到
HBuilderX的下载地址：简介 - HBuilderX 文档 (dcloud.net.cn)
值得一提的是，DCloud有一个插件市场，我们可以在这里可以找到各种插件来快速提升我们的开发效率(需要特别说明的是，大部分插件是免费的，有些插件可以需要我们进行付费使用)：DCloud 插件市场
接下来，我们言归正传。来使用HBuilderX来新建一个项目，并导入uview-plus的框架。
在这里简单介绍一下uview-plus框架。uview-plus，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水，基于uView2.0初步修改，后续会陆续修复vue3兼容性，以及组合式API改造等。(就是一个样式框架，有了它，我们可以更轻松的写出满足大部分需求审美的样式)
1、打开HBuilderX软件，找到新建项目，在这里选择自己要新建的项目类型；
点击项目之后，会出现很多项目类型。我们需要根据自己的开发需求选择不同的项目类型；
在这里，我们直接选择uniapp类型的项目。在创建项目的时候可以选择一些模板来加快我们的开发，由于这里只是演示，所以就选择了默认模板。在创建项目的时候选择Vue版本为3，点击创建就可以成功的创建出一个uniapp项目了。
在这里先简单的介绍一个一个uniapp项目所具有的基本项目结构；
一个uni-app工程，默认包含如下目录及文件：
┌─uniCloud 云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb（详见https://uniapp.dcloud.io/uniCloud/quickstart?structure&id=structure）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules 存放uni_module https://uniapp.dcloud.net.cn/plugin/uni_modules.html
├─platforms 存放各平台专用页面的目录，https://uniapp.dcloud.net.cn/tutorial/platform?id=%E6%95%B4%E4%BD%93%E7%9B%AE%E5%BD%95%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91
├─nativeplugins App原生语言插件 https://nativesupport.dcloud.net.cn/NativePlugin/README
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录 https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android
| └─ios iOS原生资源目录 https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-ios.html#%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6-bundle-resources
├─hybrid App端存放本地html文件的目录，https://uniapp.dcloud.net.cn/component/web-view
├─wxcomponents 存放小程序组件的目录，https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 https://uniapp.dcloud.net.cn/collocation/App#%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
├─pages.json 配置页面路由、导航条、选项卡等页面类信息，https://uniapp.dcloud.net.cn/collocation/pages
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，https://uniapp.dcloud.net.cn/collocation/manifest
├─AndroidManifest.xml Android原生应用清单文件 https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android
├─Info.plist iOS原生应用配置文件 https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-ios
└─uni.scss 内置的常用样式变量
这里重点介绍一下pages目录。我们编写的所有页面都是在pages目录下进行的，相当于我们vue项目的views目录。有一点需要额外注意，在uniapp中是没有我们原本vue项目中的路由的。
之前写vue项目时都会就行路由的配置，现在，在uniapp中省去了这一步。我们只需要在pages.json文件中表明我们编写的页面路径即可展示出来。
一个初始的pages.json文件：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
我们要引入我们编写好的页面，只需要在pages数组下新建一个对象即可。
注意新建page文件时，要保证path路径的唯一性。这点与我们在vue项目中使用路由是相同的。
在pages目录下，新建两个.vue文件。在pages.json中将这两个页面引入进来。
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/product/createdProduct",
"style" :
{
"navigationBarTitleText" : "生成商品", //导航栏标题文字内容
"enablePullDownRefresh" : true //是否开启下拉刷新
}
},
{
"path" : "pages/product/productList",
"style" :
{
"navigationBarTitleText" : "商品列表",
"enablePullDownRefresh" : true
}
}
]
现在，我们已经将我们写的两个页面加入到了uniapp中(在之前的vue项目来看，相当于将这两个页面加入到了路由中)。那么，我们怎样进行页面的跳转呢。uniapp已经为我们封装好了专门用来跳转页面的函数。
uni.navigateTo()
使用这个函数，可以帮我们进行页面之间的跳转，并且在跳转的时候还可以传递参数。
uni.navigateTo({
url: '/pages/test?id=1'
});
更多详细的使用可以直接在uniapp的官网中进行查看；
现在，我们要在项目中引入uview-plus框架，这个框架的作用是帮我们写出一些符合大众审美的样式，避免我们自己再进行复杂的样式编写。
uview-plus的官网如下：
uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (jiangruyi.com)
我们可以直接在DCloud的插件市场就写一键式的安装，
点击进入插件首页，可以直接一键式的将uview-plus插件下载进我们的uniapp项目中。
这个插件在下载的过程中需要我们观看一个广告才能下载下来，也相当于给作者带来一些微小的收益吧。
我们还可以通过使用npm的方式进行下载；
npm install uview-plus
下载依赖之后，我们还需要一些配置才能够正常的使用这个框架。
uview-plus的官方已经写好了配置文件的引入；
配置 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (jiangruyi.com)
进行安装和配置之后，我们可以在某个页面可以直接使用组件，无需通过import引入组件。
<template>
<up-action-sheet :actions="list" v-model="show"></up-action-sheet>
</template>
<script setup>
import { ref } from 'vue';
const list = ref([
{
text: '点赞',
color: 'blue',
fontSize: 28
},
{
text: '分享'
},
{
text: '评论'
}
]);
const show = ref(true);
</script>
总体来说，uniapp这个框架对于我们个人开发者来说是比较有好的。降低了我们开发微信小程序和app的难度，你只要有前端vue的开发经验就可以快速的上手uniapp这款框架。