uniapp好处（uni-app–》什么是uniapp？如何开发uniapp？）

🏍️作者简介：大家好
    
    
    
    
，我是亦世凡华
    
    
    
    
、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华     


     


     


     


、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧     


     


     


     


，亦可腐败 




 




 




 




 ，我愿燃烧

   

   

   

   
，耗尽所有光芒
    
    
    
    
。

👀引言

        ⚓经过web前端的学习     

     

     

     

，相信大家对于前端开发有了一定深入的了解  




  




  




  




 ，今天我开设了uni-app专栏


  


  


  


  
，主要想从移动端开发方向进一步发展     
     
     
     
，而对于我来说写移动端博文的第二站就是uni-app开发   




   




   




   




 ，希望看到我文章的朋友能对你有所帮助     


     


     


     


。

目录

uni-app概述

uni-app的特点与优势

创建uni-app项目并使用

初始化配置

在uni-app中编写vue代码

uni-app概述

大前端时代背景下



 



 



 



 
，前端开发人员掌握单一的 Web端开发能力已经远远不够了                    ，微信小程序 




 




 




 




 、安卓APP

   

   

   

   
、IOSAPP    




    




    




    




 ，甚至是Windows 桌面端




















，还有最近出的鸿蒙系统开发                    ，都成了我们成长需要掌握的技能 




 




 




 




 。目前市面上各种「跨平台」开发解决方案层出不穷     



     



     



     



 ，比较有代表性的就是：uni-app      

     

     

     

、Flutter  




  




  




  




 、React Native


  


  


  


  
、Taro     
     
     
     
、Weex等等

   

   

   

   
。

uni-app 是基于「Vue+微信小程序」语言体系



















，开发人员学习成本低上手快
    
    
    
    
，同时随着如今uni-app生态也逐步趋于成熟     

     

     

     

。所以     


     


     


     


，基于uni-app开发多端项目 




 




 




 




 ，已经是很多中小型企业常用的技术解决方案  




  




  




  




 。其官网为：uni-app官网

学习uni-app需要掌握的知识有哪些？

掌握 HTML   




   




   




   




 、CSS



 



 



 



 
、JS基础

   

   

   

   
，能够构建静态界面

掌握 Vue 基础     

     

     

     

，能够熟练使用脚手架构建应用

掌握微信小程序基础  




  




  




  




 ，对微信小程序组件                    、API服务有一定的了解

如果想去编写uni-app程序


  


  


  


  
，选择什么编译器比较好呢？这里博主推荐使用的工具是 HBuilder      
     
     
     
，不是说其它工具不行   




   




   




   




 ，而是这个工具是专门书写uni-app的工具



 



 



 



 
，官方也是极力推荐我们使用的                    ，具体安装过程就不再赘述    




    




    




    




 ，可以参考官方文档




















，如下：

uni-app的特点与优势

uni-app的特点

跨平台开发

uni-app可以实现一次编码                    ，同时生成多个应用程序     



     



     



     



 ，包括iOS    




    




    




    




 、Android




















、H5                    、小程序等


  


  


  


  
。开发者只需要使用Vue.js框架进行开发



















，而不需要考虑不同平台的差异
    
    
    
    
，大大降低了应用程序的开发难度和复杂度     
     
     
     
。

统一的开发语言和工具

uni-app的开发语言是Vue.js     


     


     


     


，它是一种基于组件化开发的前端框架 




 




 




 




 ，易于学习和使用   




   




   




   




 。uni-app提供了一套完整的开发工具

   

   

   

   
，包括Uni-app Cli     



     



     



     



 、HBuilder X等     

     

     

     

，使得开发者可以在同一个环境下进行开发



















、调试和打包



 



 



 



 
。

独特的基于条件编译的代码生成技术

uni-app采用了一种名为“基于条件编译的代码生成技术    
    
    
    
”  




  




  




  




 ，能够根据应用程序平台的不同


  


  


  


  
，编译出特定的应用程序代码                    。开发者只需要编写一份代码     
     
     
     
，就可以生成多个应用程序   




   




   




   




 ，大大提高了开发效率    




    




    




    




 。

多种组件库支持

uni-app支持多种UI组件库



 



 



 



 
，包括Vant
    
    
    
    
、Mint UI     


     


     


     


、uView等                    ，开发者可以根据自己的需求选择适合的组件库    




    




    




    




 ，快速构建应用程序




















。

uni-app的优势

减少开发成本和时间 




 




 




 




 、一次开发




















，多端部署

   

   

   

   
、良好的性能和用户体验     

     

     

     

、开放的生态系统                    。

那么微信小程序和uni-app之间的区别到底是什么呢？异同点是啥？

相同点：

页面标签基本相同：使用的基本都是类型 view  




  




  




  




 、text


  


  


  


  
、input     
     
     
     
、picker   




   




   




   




 、swiper标签等等     



     



     



     



 。

api基本相同                    ，wx换成uni即可：原生写法：wx.request；uniapp写法：uni.request



















。

生命周期函数相同：使用都是：onLoad     



     



     



     



 ，onPullDownRefresh



 



 



 



 
、onReachBotton等等
    
    
    
    
。

不同点：

点击事件写法不同：原生小程序是bindtap



















，uniapp是@click     


     


     


     


。

传参方式不同：原生写法是data-xxx
    
    
    
    
，uni-app是@click="click(xxx)" 




 




 




 




 。

创建uni-app项目并使用

下载好工具之后     


     


     


     


，点击 文件 -> 新建 -> 项目 




 




 




 




 ，出现以下界面供我们进行选择

   

   

   

   
，如下：

选择我们要创建的 uni-app选项     

     

     

     

，并配置好相关信息  




  




  




  




 ，选择默认模板即可


  


  


  


  
，如下生成默认代码：

生成的代码文件的具体效果如下：

┌─uniCloud 云空间目录     
     
     
     
，阿里云为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](/uni_modules)

   

   

   

   
。 ├─platforms 存放各平台专用页面的目录



 



 



 



 
，详见 ├─nativeplugins App原生语言插件 详见 ├─nativeResources App端原生资源目录 │ └─android Android原生资源目录 详见 ├─hybrid App端存放本地html文件的目录                    ，详见 ├─wxcomponents 存放小程序组件的目录    




    




    




    




 ，详见 ├─unpackage 非工程代码




















，一般存放运行或发行的编译结果 ├─AndroidManifest.xml Android原生应用清单文件 详见 ├─main.js Vue初始化入口文件 ├─App.vue 应用配置                    ，用来配置App全局样式以及监听 应用生命周期 ├─manifest.json 配置应用名称    




    




    




    




 、appid




















、logo                    、版本等打包信息     



     



     



     



 ，详见 ├─pages.json 配置页面路由     



     



     



     



 、导航条



















、选项卡等页面类信息



















，详见 └─uni.scss 这里是uni-app内置的常用样式变量

我们可以点击编辑器上方的运行菜单
    
    
    
    
，可以让项目运行在浏览器当中：

第一次运行需要下载相关插件     


     


     


     


，等待自动安装即可 




 




 




 




 ，运行在浏览器的界面如下：

当然后期如果你想要在更多的平台进行运行的话

   

   

   

   
，推荐去 工具 -> 插件安装 上的插件市场进行安装相关插件     

     

     

     

，里面的各种插件能够满足你所想到的任何需求  




  




  




  




 ，如下：

如果想运行小程序


  


  


  


  
，需要先下载微信开发者工具     
     
     
     
，然后点击微信开发者的安全设置并将服务端口打开   




   




   




   




 ，如下：

使用真机或模拟器的话比较繁琐



 



 



 



 
，这里就不再赘述                    ，后期用到的话再进行讲解     

     

     

     

。

初始化配置

在项目开始之前    




    




    




    




 ，可以对项目进行简单的初始化配置




















，如下：

应用配置：manifest.json

manifest.json文件是应用的配置文件                    ，用于指定应用的名称
    
    
    
    
、图标     


     


     


     


、权限等     



     



     



     



 ，我们也可以在这里为Vue为H5设置跨域拦截处理器  




  




  




  




 。

编译配置：vue.config.js

vue.config.js是一个可选的配置文件



















，如果项目的根目录中存在这个文件
    
    
    
    
，那么它会被自动加载     


     


     


     


，一般用于配置 webpack 等编译选项


  


  


  


  
。

全局配置：page.json

page.json文件用来对uni-app进行全局配置 




 




 




 




 ，决定页面文件的路径 




 




 




 




 、窗口的样式

   

   

   

   
、原生的导航栏     

     

     

     

、底部的原生tabbar等     
     
     
     
。它类型微信小程序中app.json的页面管理部分   




   




   




   




 。

pages // 设置页面路径及窗口表现 globalStyle // 设置默认页面的窗口表现 easycom // 组件自动引入规则 tabBar // 设置底部 tab 的表现 condition // 启动模式配置 subPackages // 分包加载配置 preloadRule // 分包预下载规则

全局样式：uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格



 



 



 



 
。比如按钮颜色  




  




  




  




 、边框风格

   

   

   

   
， uni.scss文件里预置了一批scss变量预置.uni-app官方扩展插件(uni ui)及插件市场上很多三方插件均使用了这些样式变量     

     

     

     

，如果你是插件开发者  




  




  




  




 ，建议你使用scss 预处理


  


  


  


  
，并在插件代码中直接使用这些变量〈无需import这个文件

)     
     
     
     
，方便用户通过搭积木的方式开发整体风格一致的App                    。

uni.scss是一个特殊文件   




   




   




   




 ，在代码中无需import这个文件即可在scss代码中使用这里的样式变量    




    




    




    




 。uni-app的编译器在webpack配置中特殊处理了这个uni.scss



 



 



 



 
，使得每个scss 文件都被注入这个uni.scss                    ，达到全局可用的效果




















。如果开发者想要less


  


  


  


  
、stylus的全局使用    




    




    




    




 ，需要在vue.config.js中自行配置webpack策略                    。

在uni-app中编写vue代码

uni-app使用的框架类型与vue及其类似




















，因为我在刚创建项目的时候选取的是vue2的语法                    ，所有创建基础文件的时候     



     



     



     



 ，生成的模板代码便是vue2的语法



















，接下来删掉原本的代码
    
    
    
    
，可以简单的测试一下     


     


     


     


，如下：

如果想创建一个新的页面文件的话 




 




 




 




 ，可以右键pages新建页面文件

   

   

   

   
，如下：

新建的页面其页面路径会自动添加到pages.json文件当中     

     

     

     

，如下：

如果想设置文件的导航区域样式  




  




  




  




 ，可以参考官网给出的函数


  


  


  


  
，如下：