Uni-app与传统web.html的差异

<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就可以。

  1. 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。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。