uni-app框架,uni-app布局

　　uni-app开发教程栏目讲解uni-app的基本结构

　　UNI-APP开发(仿饿)开发课程：进入学习

　　推荐（免费）：uni-app开发教程

　　文章目录

　　uni-app II简介。快速启动第一个项目。设置环境2。创建并运行项目3。uni-app 1的目录结构和代码规范。目录结构2。SFC规格概要前言

　　本文主要介绍了uni-app的基本情况，并指导快速创建和运行第一个uni-app项目。同时详细讲解了项目的目录结构和代码规范，适合uni-app零基础的初学者。

　　一、uni-app介绍

　　Uni-app是DCloud官方推出的重要产品，是使用vue . js http://uniapp.dcloud.io/is官网开发跨平台应用的前端框架。

　　通过编写一组Vue.js代码，开发者可以使用uni-app将其编译为多个平台，用于iOS、Android、微信小程序等。保证其正确的操作和优秀的体验。只需要JS就可以完成app开发，达到多端共用的效果，大大降低了开发和学习成本：

　　开发者学习基于vue的uni-app就够了，不用学习那么多平台开发技术，不用学习很多前端框架；

　　企业也可以用更低的成本覆盖更多的用户。

　　Uni-app继承了Vue.js，提供了完整的Vue.js开发体验。作为一个高效的开发工具，也为目前微信等应用的小程序提供了最快的入门方式。其组件规范和扩展API与微信小程序基本相同。

　　有一定Vue.js和微信小程序开发经验的开发者可以快速上手uni-app，开发多终端应用，可以同时兼容Android、iOS、小程序等多终端开发。同时提供条件编译优化，可以优雅地为某个平台编写个性化代码和调用专有能力，而不影响其他平台。

　　Uni-App打包成App还是用5引擎。5的所有能力都可以在uni-app中使用，app端的运行性能和微信小程序基本相同。

　　为了方便开发者体验uni-app的组件、接口和模板，DCloud发布了Hello uni-app演示程序，实现了一套代码可以同时发布到iOS、Android和微信小程序。可以用手机扫描下面的app代码下载iOS和Android的原生安装包，也可以用微信扫描小程序体验uni-app的小程序版本。

　　二、快速开始第一个项目

　　1.搭建环境

　　在开始项目之前，需要单独下载和安装以下工具：

　　HBuilderX

　　内置uni-app编译器和项目模板，可以点击https://www.dcloud.io/hbuilderx.html选择下载相应系统的最新版本，无需安装，只需解压并将解压后的目录放入指定路径，然后点击HBuilderX.exe即可使用。微信开发者工具

　　用于调试小程序，点击https://MP . weixin . QQ . com/debug/wxadoc/dev/dev tools/download . html选择最新版本下载安装。2.创建和运行项目

　　创建项目，可以点击工具栏中的文件-新建-项目，选择uni-app，输入项目名称，如hello uniapp，点击创建成功创建uni-app，或者点击从模板创建，选择Hello UniApp体验官方示例。

　　示意图如下：

　　创建后可以运行调试，可以选择浏览器、手机或模拟器、小程序模拟器等。

　　(1)小程序模式操作

　　进入hello uniapp项目，在工具栏中点击运行-运行到小程序模拟器-微信开发者工具，即可编译项目，在微信开发者工具中体验uni-app。uni-app默认将项目编译到根目录的unpackage目录。

　　示意图如下：

　　可以看到，在HBuilderX中选择微信开发者工具进行编译运行后，自动调用微信开发者工具模拟器进行显示和运行。

　　描述：

　　第一次需要配置微信开发者工具的安装路径，才能成功运行。同时需要在微信开发者工具中设置选项的安全设置中打开服务端口，让HBuilderX可以调用微信开发者工具，如下：

　　如果HBuilderX无法正常启动微信开发者工具，需要开发者手动启动，然后将uni-app项目的路径复制到微信开发者工具中，在HBuilderX中开发，就可以在小小的微信开发者工具中看到实时的模拟效果。

　　(2)真机运行

　　连接手机，打开USB调试，进入hello uniapp项目，点击工具栏中的运行-真机运行-选择一个运行设备，就可以在这个设备中体验uni-app了，如下图：

　　手机界面如下：

　　描述：

　　需要为真实机器操作设置应用程序表示。登录hbuilderX后，点击云端即可获得。

　　调试时，也可以直接点击快速运行按钮选择要运行的设备，如下图：

　　三、uni-app目录结构和代码规范

　　1.目录结构

　　正如您在新创建的项目中看到的，uni-app项目的典型结构大致如下：

　　丙：

　　 App.vue

　　 main.js

　　 manifest.json

　　 pages.json

　　 project.config.json

　　大学社会科学系

　　pages

　　 index

　　 index.vue

　　static

　　logo.png

　　unpackage在其中：

　　Project.config.json是项目的全局配置文件，配置APP ID等核心参数；

　　Main.js是Vue初始化入口文件；

　　App.vue是应用配置，用于配置App的全局风格，监控应用生命周期；

　　Manifest.json用于配置应用程序名称、appid、徽标、版本等打包信息。如下所示：

　　Pages.json用于配置页面信息，如页面路由、导航栏、选项卡等。并被定义为对象；

　　静态目录存储静态资源文件，满足小程序对项目规模的要求，同时优化项目结构；

　　解包是编译项目时生成的包。

　　2.SFC规范

　　我们开发的页面视图和其他文件通常位于页面目录中。同时，对于小程序来说，一个页面一般包括四个文件，分别是page.wxss(样式文件)、page.js、page.json(配置文件)和page.wxml(DOM组件)文件。但是uni-app里没有那么多文件。为了实现微信小程序与原生app的跨端兼容，考虑到编译速度、运行性能等因素，uni-app约定了页面开发规范，即Vue单文件组件（SFC）规范:vue文件是用户自定义的文件样式，Vue组件由类似HTML的语法描述。每个。vue文件包含三种类型的顶级语言块，模板(定义模板层)和脚本(JS层)。

　　模板

　　p class= example“{ msg } }/p/template script export default {

　　data () {

　　返回{

　　味精：“你好，世界！”

　　}

　　}}/scriptstyle.example

　　颜色：红色；}/样式自定义1

　　例如，这可以是组件的文档。/custom1vue-loader将自动解析文件并提取每个语言块。如果需要，还会由其他装载机进行加工，最后组装成aES Module。它的默认导出是带有Vue.js组件选项的对象。Vue-loader支持使用非默认语言，如CSS预处理程序、预编译HTML模板语言、设置语言块的lang属性等。

　　例如，我们可以使用Sass语法来编写如下样式：

　　风格

　　/*写Sass！*//*//style vue组件的顶级语言块如下：

　　模板

　　每个。vue文件最多包含一个模板块，内容被提取出来传递给vue-template-compiler。字符串被预处理成JavaScript dye函数，最后注入到脚本导出的组件中。脚本

　　每个。vue文件最多包含一个脚本块，这个脚本将作为ES Module执行。它的默认导出是Vue.js的一个组件选项对象你也可以导出Vue.extend()创建的扩展对象，但是普通对象是更好的选择。

　　任何符合。js文件(或由其lang属性指定的扩展名)将应用于该脚本块的内容。模式

　　匹配/\。css$/默认情况下，一个. vue文件可以包含多个样式标签。样式可以有作用域或模块属性，以便更好地将样式封装到当前组件中。具有不同封装模式的多个样式标签可以混合在同一个组件中。任何符合。css文件(或由其lang功能指定的扩展名)将应用于该样式块的内容。自定义块

　　您可以在中添加其他自定义块。vue文件来实现项目的具体需求，比如docs块。Vue-loader将使用标记名来查找相应的webpack加载器，并将其应用到相应的块。需要在vue-loader的选项loaders中指定web loader。如果您需要分离。vue文件分成多个文件，可以通过src属性导入外部文件，并为不同的语言块使用相应的标签，如下：

　　模板src=。/template . html“/templatestylesrc=”。/style.css/stylescriptsrc=。/script . js /脚本描述：

　　src的导入遵循与webpack模块请求相同的路径解析规则，因此相对路径需要以。/.

　　您可以从NPM从属关系中导入资源，如下所示：

　　style= todo MVC-app-CSS/index . CSS 也支持自定义块上的src导入，如下所示：

　　单元测试src=。/unit-test . js /unit-test文档规范接近Vue单文件组件（SFC）规范。同一个界面由三个语言块完成。详情请参考https://vue-loader.vuejs.org/zh/spec.html。组件标签靠近微信小程序规范，包括表单、视图、按钮等。同时不能使用标准的HTML标签，也不能使用js操作dom。详情请参考http://uniapp.dcloud.io/component/README文件。接口能力（JS API）靠近微信小程序规范，但前缀wx要换成uni。详情请参考http://uniapp.dcloud.io/api/README。数据绑定及事件处理靠近Vue.js规范，同时补充App和页面的生命周期；

　　因为小程序推荐使用flex布局，而且flex比传统的盒子模型更加灵活可控，为了兼容多终端操作，推荐使用flex布局进行开发。请参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/和http://www.hcoder.net/tutorials/info_183.html.

　　总结

　　Uni-app作为使用Vue.js开发所有前端应用的框架，为开发者提供了极大的便利，降低了学习和开发的成本。目前平台的多样性越来越丰富，开发需求越来越复杂，越来越受到开发者的青睐。以上是uni-app的介绍、部署、目录结构等细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。