移动端开发基础【5】框架简介之开发规范

uniapp为了实现多端兼容,以及编译速度,运行性能等的因素,约定了以下5种开发规范。

1、uniapp的页面文件遵循Vue单文件组件(SFC)规范。

首次说说什么是Vue单文件组件(SFC)规范?

每一个.vue文件包含三种类型的顶级语言块,分别为<template>、<script>、<style>,并且还允许开发者自己添加可选的自定义块。

(1)          第一个语言块-模板

一个.vue文件最多只有一个<template>块。里面的内容将被提取并传递给vue-template-compiler为字符串,预处理为JavaScript渲染函数,并最终注入到从<script>导出的组件中。

(2)          第二个语言块-脚本

一个.vue 文件最多只有一个<script>脚本块。并且这个脚本会作为一个ES Module来执行。他的默认导出是一个vue.js的组件选项对象。也可以导出由Vue.extend()创建的扩展对象,但是普通对象是更好的选择。任何匹配.js文件(或者通过它的lang特性指定的扩展名)的webpack规则都将会运用到这个<script>块的内容中。

(3)          第三个语言块-样式

一个.vue文件可以包含多个<style>标签。默认匹配 /\.css$/ 。一个<style>标签可以有 scoped(它的CSS只作用于当前组件中的元素) 或者 module 属性(用于模块化和组合CSS的系统),作用是将样式封装到当前组件。具有不同封装模式的多个<style>标签可以在同一个组件种混合使用。任何匹配.css文件(或者通过它的lang特性指定的扩展名)的webpack规则都将会运用到这个<style>块的内容中。

(4)          第四个语言块-自定义块

可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求,例如 <docs> 块。vue-loader 将会使用标签名来查找对应的 webpack loader 来应用在对应的块上。webpack loader 需要在 vue-loader 的选项 loaders 中指定。

(5)          第五个语言块-Src导入

我们可以通过src属性导入外部文件,如下:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

这里需要注意的是src导入遵循和webpack模块请求相同的路径解析规则:相对路径以 ./ 开始。可以从NPM依赖中导入资源<style src="todomvc-app-css/index.css">。在自定义块上同样支持src导入<unit-test src="./unit-test.js"></unit-test>

2、组件标签靠近小程序规范。

uni-app的组件与HTML不同,而是与小程序相同,更适合手机端使用。

虽然不推荐使用HTML标签,但实际上如果开发者写了div等标签,在编译到非H5平台时也会被编译器转换为view标签,类似的还有span转text、a转navigator等,包括css里的元素选择器也会转。但为了管理方便、策略统一,新写代码时仍然建议使用view等组件。

一个组件包括开始标签和结束标签,标签上可以写属性,并对属性赋值。内容则写在两个标签之内。

所有组件与属性名都是小写,单词之间以连字符-连接。

根节点为 <template>,这个 <template> 下只能且必须有一个根<view>组件。这是vue单文件组件规范。

3、接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni。

4、数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期。

5、为兼容多端运行,建议使用flex布局进行开发。

以上的五种规范是总结了uniapp官网的开发规范,本人只是进行了总结和归纳。本期的分享就到这里啦,我们下期接着分享uniapp的目录结构和资源路径两方面的知识。

猜你喜欢

转载自www.cnblogs.com/lenbor/p/12661044.html