Java全栈必备之Uni-App

 

  1、简介

  1.1 概述

  uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台

  Java全栈必备之Uni-App

 

  1.2为什么使用Uni-App

Java全栈必备之Uni-App

  1.3 Uni-App功能

Java全栈必备之Uni-App

  开发功能,参考,借鉴 插件市场:https://ext.dcloud.net.cn/

  2、快速上手

  1、安装HbuildX 开发工具

  2、创建项目

Java全栈必备之Uni-App

  3、命名

  选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

Java全栈必备之Uni-App

  4、运行项目

  目前只支持谷歌浏览器运行uni-app项目 也可以在真机、模拟器

  运行成功,自动打开浏览器

  http://10.8.165.87:8080/h5/

Java全栈必备之Uni-App

  3、详细教程

  3.1 项目结构

Java全栈必备之Uni-App

  pages:页面我们app的页面都在这个文件夹中

  内部都是文件夹 名称 就是页面名称

  文件夹内部就是页面名称 以.vue 基于Vue开发

  static:静态资源

  图片、音频、视频等

  App.vue 应用配置,用来配置App全局样式以及监听

Java全栈必备之Uni-App

  main.js Vue初始化入口文件

  manifest.json 配置应用名称、appid、logo、版本等打包信息

  pages.json

  Vue初始化入口文件 ├─App.vue 应用生命周期 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见 └─pages.json 配置页面路由、导航条、选项卡等页面类信息

  https://element.eleme.cn/#/zh-CN 饿了么UI 基于Vue2.0开发的VUE组件

  3.2 详细教程

  3.2.1 页面跳转 路由

  uni-app路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式,不支持 Vue Router

  uni-app 有两种路由跳转方式:使用navigator组件跳转、调用API跳转

Java全栈必备之Uni-App

  3.2.2 页面尺寸

  uni-app支持的通用css单位包括px、upx、vh。

  px 即屏幕像素

  upx 是uni-app提供的一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放大。

  vh 是视窗高度的百分比

  3.2.3 样式

  目前支持的选择器有:

Java全栈必备之Uni-App

  样式导入的方式:

  1、外部css文件

  使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

  2、内联样式

  框架组件上支持使用 style、class 属性来控制组件的样式。

  style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

  class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

 

 Java全栈必备之Uni-App

 

 3.2.4 组件 控件 标签

Java全栈必备之Uni-App

Java全栈必备之Uni-App

Java全栈必备之Uni-App

 

Java全栈必备之Uni-App

上一篇:Android library 传入本地maven仓库


下一篇:iOS进阶之两个模型数组的去重方法