uniapp和java,uni-app学习：1、注意事项和规范

目录结构

一个uni-app工程，默认包含如下目录及文件：

pages.json：配置页面路由、导航条、选项卡等页面类信息，详见。manifest.json：配置应用名称、appid、logo、版本等打包信息，详见。App.vue：应用配置，用来配置App全局样式以及监听应用的生命周期。main.js：Vue初始化入口文件static目录：存放应用引用静态资源(如图片、视频等)的地方，注意：静态资源只能存放于此pages目录：业务页面文件存放目录components目录：组件文件存放目录

布局

1、如果可以尽量使用 flex 布局，可以更好的兼容

2、横向宽度 % ，高度用 px

页面规范 - Vue 单文件组件 (SFC) 规范

.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 、

{{ msg }}

export default {

data () {

return {

msg: 'Hello world!'

}

}

}

.example {

color: red;

}

This could be e.g. documentation for the component.

组件标签靠近微信小程序规范

详见uni-app 组件规范，注意：不能使用标准HTML标签，也不能用js对dom进行操作

接口能力(JS API)靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

数据绑定及事件处理靠近 Vue.js 规范，同时补充了App及页面的生命周期

为兼容多端运行，建议使用flex布局进行开发 (flex 布局教程http://www.hcoder.net/tutorials/info_183.html)。

样式导入

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

示例代码：

选择器

目前支持的选择器有：

.class.intro选择所有拥有class="intro"的组件#id #firstname 选择拥有 id="firstname" 的组件element view选择所有view组件element,element view,checkbox选择所有文档的view组件和所有的checkbox组件::after view::after在view组件后边插入内容，仅微信小程序和5+App生效::before view::before在view组件前边插入内容，仅微信小程序和5+App生效

全局样式与局部样式

定义在App.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。注意：App.vue中通过@import语句可以导入外联样式，一样作用于每一个页面。