uni-app的简介及用法

悠悠 2022-08-29 00:18 289阅读 0赞

**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的安装及使用我上篇文章已经说过了。

注意要安装相对应的插件

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70][]

（2).运行uni-app

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70 3][]

**3.项目目录**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70 4][]

** 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.打包等的后续更新

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70]: /images/20220829/a1e978fe8b0447beacecf8014eb276ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70 1]: /images/20220829/8a14bb2a073f49c88a4a5fd14c4b7311.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70 2]: /images/20220829/f3ba02ddec91436e87af7f26daabad1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70 3]: /images/20220829/a93c84660d064beaaf2e8be37bbf7fa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70 4]: /images/20220829/b471905266ec49cf974af0561889130a.png