jysf98746的博客

在项目的编写中，经常会用到一些公共、重复的函数，这时候，就可将函数独立写入到一个js文件中，然后在用到的地方进行引用，就不用重复写同一段代码了，同时也能让程序看起来更加的美观。一般的，可以将通用的js文件写入到项目下的common目录中，或者写入到utiljs目录中，当然这些名字都是自己起的。静态资源，指的是程序中用到的图片、图标、字体等内容，这些内容应该存储于：static文件夹下。有些时候，在打开他人的工程进行学习时，会无法正常编译，或者会提示缺少某个js文件。路径中的@符号，代表的是项目的根目录。

封装组件涉及的知识点较多，这里我们举一个最简单的例子，来让大家快速了解组件的内容。参考7.2的内容，以能够实现easycom为标准，来进行命名。//尚未输入任何内容时候显示的文本。//前面标签显示的文本。

/ 这里不用import引入，也不需要在components内注册uni-rate组件。不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。准备：新建项目时，选择新建 Hello uni-app模板，创建一个示例的组件库。此时，uni-rate，不用在script里注册和引用，就可以直接使用了。例如：components/uni-rate/uni-rate.vue。

给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”，然后又绑定了点击的事件，该事件会触发methods中的onclicked方法。基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需zc内置组件，随时可以直接使用，比如组件。组件中可以使用script的data中定义的js变量，但组件的属性中使用和内容区使用的用法不一样。基础组件是由Uniapp官方提供的组件，这些是运行的最基本组件，提供了界面显示的基本功能。

在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。选择是否在pages.json中进行注册，注意：所有需要单独显示的页面，都必须在这里进行注册，否则无法显示。关闭当前页面，跳转到应用内的某个页面。

如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性的 display（可视）。注意，v-show 不支持 template 元素，也不支持 v-else。此时可以把一个 template 元素当做不可见的包裹元素，并在上面使用 v-if。v-if 指令用于条件性地渲染一块内容。v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。v-else 指令来表示 v-if 的“else 块”v-if和v-else。

绑定可以直接应用到 class和style，可以实现动态的切换状态。v-on 指令，它用于监听 DOM 事件。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。指令的作用是，当表达式的值改变时，动态改变DOM元素的内容。动态地绑定一个或多个属性，或一个组件 属性 到表达式。在绑定 属性 时，属性 必须在子组件中声明。指令是带有 v- 前缀的特殊属性。可以用修饰符指定不同的绑定类型。

本课开始，正式进入uniapp的学习，这一节课介绍一个标准的vue文件的写法格式。本套课程将带领大家从0基础开始学习uniapp。