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

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

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4,size_16,color_FFFFFF,t_70

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

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4,size_16,color_FFFFFF,t_70

3.项目目录

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4,size_16,color_FFFFFF,t_70
 

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

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐