uni-app的简介及用法

1.什么是uni-app

uni-app是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译发布到iOS、Android、H5、小程序等多个平台。

2.uni-app的使用

使用uni-app之前首先要对vue和微信小程序的开发都有所了解，不然建议先去学习vue和微信小程序

(1).项目创建

uni-app支持通过 可视化界面、vue-cli命令 两种方式快速创建项目。

利用HBuilderX可视化创建比较简单，无需配置nodejs，Hbuilder已经有相关环境配置了。

HBuilderX的安装及使用我上篇文章已经说过了。

 注意要安装相对应的插件

日常开发推荐使用该模板，已内置大量常用组件

（2).运行uni-app

可运行到浏览器，微信开发者工具，真机

运行到微信开发者工具需要配置

第一步，在HBuilderX选择运行->运行到小程序或模拟器->运行设置。设置微信开发者工具工具路径。

第二步，打开微信开发者工具  选择设置->安全设置。将服务端口号选择为开启。

 第三步，打开HBuilderX的项目  再选择运行->运行到小程序或模拟器。微信开发者工具就会自动运行uni-app项目了。最后的运行结果。

3.项目目录

 

 4.编写规则（与vue和微信小程序的联系与区别)

一些标签/组件等的使用，延续用的微信小程序，js一些等对逻辑的处理，使用的vue.js的语法

标签的不同，以前使用的是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。不推荐使用

还新增了，一些手机段的组件

scroll-view 可区域滚动视图容器
swiper 可滑动区域视图容器
icon 图标
rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
progress 进度条
slider 滑块指示器
switch 开关选择器
camera 相机
live-player 直播
map 地图
cover-view 可覆盖原生组件的视图容器

js  因为uni-app的api是参考小程序的，所以和浏览器的js api有很多不同，如

alert,confirm ->uni.showmodel
ajax axios -> uni.request
cookie、session 没有 local.storage->uni.storage
vue-router-> uni.navigateTo

5.打包等的后续更新