<meta charset="utf-8">
.HTML文件改为.VUE文件
<html></html>一级节点改为<template>、<script>、<style>三个一级节点
外部引用文件方式变化
从script src和link href改为
js要require进来,变成了对象
<script> var util = require('../../../common/util.js'); //require这个js模块 var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法 </script>
css外部文件导入
<style> @import "./common/uni.css"; </style>
全局样式在根目录的app.vue中,每个页面都会加载app.vue的样式。
组件及标签变化
div改成view
span、font改成text
a改成navigator
img改成image
input还在,但type属性改成了comfirmtype
form、button、checkbox、radio、lable、textarea、canvas、video还在
select改成了picker
irame改成web-view
ul、li没有了,都用view代替
HTML的老标签还能用,uin-app编译时会转为新标签。但容易出现混乱。
新增一些手机端常用控件
scroll-view:区域滚动容器
swiper:可滑动区域视图容器
icon:图标
rich-text:富文本
progress:进度条
slider:滑块指示器
switch:开关选择器
camera:相机
live-layer:直播
cover-view:可覆盖视图容器,比如遮罩。
但浏览器专用的window、document、navigator、location对象,包括cookie等存储,只有在浏览器中才有,app和小程序都不支持。
Uni-app默认采用flex布局,flex支持跨平台,建议使用。page{display:flex}
Uni-app默认的宽度是750px,单位写成px不同尺寸屏幕会自动适配每个px的大小。
对于不同手机屏幕以及pad的适配,只需要宽度使用百分比%,高度使用px就可以。
- JS注意
非H5端,不能使用浏览器自带对象,比如document、window、localstorage、cookie等,更不能使用jquery等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。
没有这些浏览器自带对象并不影响业务开发,uni提供的api足够完成业务。
uni的api在编译到web平台运行时,其实也会转为浏览器的js api。
App端若要使用操作window、document的库,需要通过renderjs来实现。
uni的api是多端可用的。在条件编译区,每个平台的专有api也可以使用,比如wx.、plus.等api可以分别在微信下和app下使用。
出于降低小程序向uni-app迁移成本的考虑,wx的api在app里也可以直接运行,比如写wx.requst和uni.requst是一样的,但仍然建议仅在微信的条件编译区使用wx的api。
2.Tag注意
- uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。
- 出于降低h5应用向uni-app迁移成本的考虑,写成div、span也可以运行在app和小程序上,因为uni-app编译器会把这些HTML标签编译为小程序标签。但仍然建议养成新习惯。
3.Css注意
- 虽然大部分css样式在微信小程序和app中都可以支持,但推荐使用flex布局模型,这种布局更灵活高效且支持更多平台(比如nvue、快应用只支持flex布局)
- 单位方面,uni-app默认为rpx。
4.工程目录注意
- 每个要显示的页面,都要放到pages目录下,新建一个页面所在的目录,然后放同名目录的vue文件,比如project/pages/lista/lista.vue,并且在pages.json里配置。这与小程序的策略相同。
- 自定义组件,放到component目录
- 静态资源如图片,固定放到static目录下。这是webpack、mpvue的规则
5.数据绑定方式的注意
- uni-app 基于Vue 2.0实现,开发者需注意Vue 1.0 -> 2.0 的使用差异,详见从 Vue 1.x 迁移
6.每个页面支持使用原生title,首页支持使用原生底部tab,这些是要在pages.json里配置,这些并不是vue页面的一部分。当然vue里的js api也可以动态修改原生title
7.虽然使用vue,但在app和小程序里,不是spa而是mpa
8.位置坐标系统一为国测局坐标系gcj02,这种坐标系可以被多端支持。老版5+的百度定位和百度地图使用的是百度私有坐标系bd09ll,这种坐标系需要转换。新版uni-app里的百度地图已经默认改为gcj02。高德地图不受影响,一直是gcj02。