一、什么是uni-app
uni-app 是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台
二、安装
uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。
通过 HBuilderX 可视化界面
vue-cli命令行
vue create -p dcloudio/uni-preset-vue my-project
选择模板 (初次体验可以选择hello uni-app 项目模板)
创建中。。。
创建完成之后根据提示进入项目就可以啦
文件目录:(模板不同,文件目录也不同…)
三、配置和使用
1、浏览器和小程序运行配置
工具→设置→运行设置
2、运行微信开发者工具
编译完之后会自动打开微信开发者工具
3、文件目录
4、新建页面
在pages中新建页面,可以选择不同模板
创建完成后,会自动在page.json中自动配置(这样的好处是,不用我们建一个配置一个,省了很多事儿,nice~)
5、scss
工具→插件安装中,把和scss有关的配置插件下载一遍
在我们写页面的时候就可以直接只用scss啦
四、uni-app与HTML的标签变化
以前是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编译器会在编译时把老标签转为新标签。
但不推荐这种用法,调试H5端时容易混乱,基于元素的选择器也会出问题。
手机端常用新组件
scroll-view 可区域滚动视图容器
swiper 可滑动区域视图容器
icon 图标
rich-text 富文本(不可执行js,但可渲染各种文字格式和图片)
progress 进度条
slider 滑块指示器
switch 开关选择器
camera 相机
live-player 直播
map 地图
cover-view 可覆盖原生组件的视图容器
cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。
如需覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件
转载自(传送门)
五、单位说明
rpx 即响应式px,是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx
所以,在实际开发中,1 rpx = 750 * ( 设计稿宽度 / 设计稿基准宽度 )
在我们的项目中找到manifest.json文件,根据图示
在设置文件mainfest.json里开启px转rpx(默认关闭),所有的px可一键转换为rpx
注意:
(1)rpx是宽度相关的单位,屏幕越宽,元素会 越大,如果不想随着屏幕 宽度缩放, 请使用px 。
(2)字体 或者 高度使用了rpx , 那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。
(3)rpx不支持横屏切换,如果使用rpx 建议锁定屏幕方向。
(4)早期uni-app推荐使用upx,目前官方 已经推荐统一改为rpx了 。