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工程，默认包罗如下目次及文件：

1.        
2. ┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb（详见uniCloud）
3. │─components            符合vue组件规范的uni-app组件目录
4. │  └─comp-a.vue         可复用的a组件
5. ├─utssdk                存放uts文件
6. ├─pages                 业务页面文件存放的目录
7. │  ├─index
8. │  │  └─index.vue       index页面
9. │  └─list
10. │     └─list.vue        list页面
11. ├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，<strong>注意：</strong>静态资源都应存放于此目录
12. ├─uni_modules           存放uni_module 详见
13. ├─platforms             存放各平台专用页面的目录，详见
14. ├─nativeplugins         App原生语言插件 详见
15. ├─nativeResources       App端原生资源目录
16. │  ├─android            Android原生资源目录 详见
17. |  └─ios                iOS原生资源目录 详见
18. ├─hybrid                App端存放本地html文件的目录，详见
19. ├─wxcomponents          存放小程序组件的目录，详见
20. ├─unpackage             非工程代码，一般存放运行或发行的编译结果
21. ├─main.js               Vue初始化入口文件
22. ├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
23. ├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
24. ├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
25. ├─AndroidManifest.xml   Android原生应用清单文件 详见
26. ├─Info.plist            iOS原生应用配置文件 详见
27. └─uni.scss              内置的常用样式变量

复制代码

这里重点先容一下pages目次。我们编写的全部页面都是在pages目次下举行的，相称于我们vue项目的views目次。有一点必要额外注意，在uniapp中是没有我们原来vue项目中的路由的。
之前写vue项目时都会就行路由的设置，如今，在uniapp中省去了这一步。我们只必要在pages.json文件中表明我们编写的页面路径即可展示出来。
一个初始的pages.json文件：

1. {
2.         "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
3.                 {
4.                         "path": "pages/index/index",
5.                         "style": {
6.                                 "navigationBarTitleText": "uni-app"
7.                         }
8.                 }
9.         ],
10.         "globalStyle": {
11.                 "navigationBarTextStyle": "black",
12.                 "navigationBarTitleText": "uni-app",
13.                 "navigationBarBackgroundColor": "#F8F8F8",
14.                 "backgroundColor": "#F8F8F8"
15.         },
16.         "uniIdRouter": {}
17. }

复制代码

我们要引入我们编写好的页面，只必要在pages数组下新建一个对象即可。
注意新建page文件时，要包管path路径的唯一性。这点与我们在vue项目中使用路由是雷同的。

在pages目次下，新建两个.vue文件。在pages.json中将这两个页面引入进来。

1. "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
2.        
3.                 {
4.                         "path" : "pages/product/createdProduct",
5.                         "style" :
6.                         {
7.                                 "navigationBarTitleText" : "生成商品",  //导航栏标题文字内容
8.                                 "enablePullDownRefresh" : true  //是否开启下拉刷新
9.                         }
10.                 },
11.                 {
12.                         "path" : "pages/product/productList",
13.                         "style" :
14.                         {
15.                                 "navigationBarTitleText" : "商品列表",
16.                                 "enablePullDownRefresh" : true
17.                         }
18.                 }
19.                
20.                
21.                
22.                
23.                
24.         ]

复制代码

如今，我们已经将我们写的两个页面参加到了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的方式举行下载；

1. npm install uview-plus

复制代码

下载依靠之后，我们还必要一些设置才华够正常的使用这个框架。
uview-plus的官方已经写好了设置文件的引入；
设置 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (jiangruyi.com)
举行安装和设置之后，我们可以在某个页面可以直接使用组件，无需通过import引入组件。

1. <template>
2.   <up-action-sheet :actions="list" v-model="show"></up-action-sheet>
3. </template>
5. <script setup>
6. import { ref } from 'vue';
8. const list = ref([
9.   {
10.     text: '点赞',
11.     color: 'blue',
12.     fontSize: 28
13.   },
14.   {
15.     text: '分享'
16.   },
17.   {
18.     text: '评论'
19.   }
20. ]);
22. const show = ref(true);
23. </script>

复制代码

总体来说，uniapp这个框架对于我们个人开辟者来说是比力有好的。低沉了我们开辟微信小步调和app的难度，你只要有前端vue的开辟履历就可以快速的上手uniapp这款框架。




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金