uniapp创建一个新项目并导入uview-plus框架

近年来，随着技术的发展，人们越来越意识到跨平台和统一的重要性。对于同一款应用来说，一般都会有移动端、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（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放uni_module 详见
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            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()

使用这个函数，可以帮我们进行页面之间的跳转，并且在跳转的时候还可以传递参数。

//在起始页面跳转到test.vue页面并传递参数
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这款框架。