uni-app学习:1、注意事项和规范

uni-app学习:1、注意事项和规范

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

布局

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

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

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

.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>,还允许添加可选的自定义块:

<template>
  <div>{{ msg }}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: "Hello world!"
    }
  }
}
</script>
<style>
.example {
  color: red;
}
</style>
<custom1>
  This could be e.g. documentation for the component.
</custom1>

 

组件标签靠近微信小程序规范
详见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后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }
</style>

 

选择器
目前支持的选择器有:

.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 语句可以导入外联样式,一样作用于每一个页面。