快速了解uni-app（html、vue、小程序的区别）

//将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例

import * as echarts from ‘/components/echarts/echarts.simple.min.js’;

css外部文件导入

全局样式，在根目录下的app.vue里写入，每个页面都会加载app.vue里的样式。

**另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。

如下是导入一个角标的组件库，在页面上显示一个abc并且右上角有个数字角标1，**详见

如需要全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理。如下是hello uni-app里的例子。

//main.js

import pageHead from ‘./components/page-head.vue’ //导入

Vue.component(‘page-head’, pageHead) //注册。注册后在每个vue的page页面里可以直接使用组件。

组件/标签的变化

以前是html标签，现在是小程序组件。

区别

• div 改成 view

• span、font 改成 text

• a 改成 navigator

• img 改成 image

• input 还在，但type属性改成了confirmtype

• form、button、checkbox、radio、label、textarea、canvas、video 这些还在。

• select 改成 picker

• iframe 改成 web-view

• ul、li没有了，都用view替代

• audio 不再推荐使用，改成api方式，背景音频api文档

• 其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把:div编译成view。但不推荐这种用法，调试H5端时容易混乱。

除了改动外，新增了一批手机端常用的新组件：

• scroll-view 可区域滚动视图容器

• swiper 可滑动区域视图容器

• icon 图标

• rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）

• progress 进度条

• slider 滑块指示器

• switch 开关选择器

• camera 相机

• live-player 直播