目录
一.初步了解
对uni-app的了解初步就是多端运行。但也有很多限制,虽然多端可运行,也做了很大的兼容。
但是每个端,有每个端的管理规则,这不是uni-app在技术层面上可以抹平的:
- 比如H5端的浏览器有跨域限制;
- 比如微信小程序会强制要求https链接,并且所有要联网的服务器域名都要配到微信的白名单中;
- 比如App端,iOS对隐私控制和虚拟支付控制非常严格;
- 比如App端,Android、国产rom各种兼容性差异,尤其是因为谷歌服务被墙,导致的push、定位等开发混乱的坑;
二、如何学习
这里以html5和其进行对比
1.代码架构变化
html的代码结构主要为<html>第一大节,然后下面有三大小节<style>,<body><script>组成。分别是样式,内容,js
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<script type="text/javascript">
#js
</script>
<style type="text/css">
#样式
</style>
</head>
<body>
#内容
</body>
</html>
而uniapp,现在。这个叫vue单文件组件规范sfc
<template>
<view>
注意必须有一个view,且只能有一个根view。所有内容写在这个view下面。
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
2.外部文件引用方式变化
以前是直接引入css或者js文件
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
而uniapp现在引用的是模块
<script>
var util = require('../../../common/util.js'); //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>
-----------------------------分割线---------------------------------------------
在这个util.js里,要把之前的function封装为对象的方法
-----------------------------分割线---------------------------------------------
function formatTime(time) {
return time;//这里没写逻辑
}
module.exports = {
formatTime: formatTime
}
3.组件/标签的变化
以前是html标签,比如<div>
,现在是小程序组件,比如<view>
。 其实标签是老的概念,标签属于浏览器内置的东西。但组件,是可以自由扩展的。 类似你可以把一段js封装成函数或模块,你也可以把一个ui控件封装成一个组件。
uni-app
参考小程序规范,提供了一批内置组件。
- div 改成 view
- span、font 改成 text
- a 改成 navigator
- img 改成 image
- input 仅仅是输入框。 原html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中,input仅仅是输入框。其他功能uni-app有单独的组件或API:radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。
- form、button、label、textarea、canvas、video 这些还在。
- select 改成 picker
- iframe 改成 web-view
- ul、li没有了,都用view替代。做列表一般使用uList组件
- audio 不再推荐使用,改成api方式,背景音频api文档 其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签,比如把div编译成view。但不推荐这种用法,调试H5端时容易混乱。
- 组件可参考uni-app组件
4.js的变化
标准js语法和api都支持,比如if、for、settimeout、indexOf等。
但浏览器专用的window、document、navigator、location对象,包括cookie等存储,只有在浏览器中才有,app和小程序都不支持。
比如 点击按钮后会修改文字区的值,原先html的写法
<html>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
//浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是像是 <img> 和样式表等外部
//资源可能并没有下载完毕。
document.getElementById("spana").innerText="456"
})
function changetextvalue () {
document.getElementById("spana").innerText="789"
}
</script>
</head>
<body>
<span id="spana">123</span>
<button type="button" onclick="changetextvalue()">修改为789</button>
</body>
</html>
现在uniapp的写法,是vue的绑定模式,给这个dom元素绑定一个js变量,在script中修改js变量的值,dom会自动变化,页面会自动更新渲染
<template>
<view>
<text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 -->
<button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->
</view>
</template>
<script>
export default {
data() {
return {
textvalue:"123",
buttontype:"primary"
};
},
onLoad() {
this.textvalue="456"//这里修改textvalue的值,其实123都来不及显示就变成了456
},
methods: {
changetextvalue() {
this.textvalue="789"//这里修改textvalue的值,页面自动刷新为789
}
}
}
</script>
5.生命周期
上一个标题4中其实也提到过。如html,js中的DOMContentLoaded,uninapp中的onload.他们的展现方式也不一样。
在uniapp中,普通vue页面里的生命周期叫页面生命周期。在项目根目录的app.vue文件中的生命周期叫应用生命周期。详见uni-app的生命周期
6.js api的变化
因为uni-app的api是参考小程序的,所以和浏览器的js api有很多不同,如
1.alert,confirm 改成 uni.showmodel
2.ajax 改成 uni.request
3.cookie、session 没有了,local.storage 改成 uni.storage
4.uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改为uni.xxx即可。详见
7.css的变化
- 标准的css基本都是支持的。
- 选择器有2个变化:*选择器不支持;元素选择器里没有body,改为了page。
- 单位方面,px无法动态适应不同宽度的屏幕,rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位,推荐使用rpx,全端支持。
- uni-app推荐使用flex布局,这个布局思路和传统流式布局有点区别。
8.工程结构和页面管理
html是由一个个html文件组成的。
而uni-app的工程结构有单独的要求
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─common css、less/scss 等资源 ,建议这些公用的资源放在自建的 common 目录下
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录,详见
├─nativeplugins App原生语言插件
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录
| └─ios iOS原生资源目录
├─hybrid App端存放本地html文件的目录
├─wxcomponents 存放小程序组件的目录
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件
├─Info.plist iOS原生应用配置文件
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
└─uni.scss 这里是uni-app内置的常用样式变量
//注意css里背景图和字体文件,尽量不要大于40k,因为会影响性能。在小程序端,如果要大于40k,需放到服务器侧远程引用或base64后引入,不能放到本地作为独立文件引用。
-------------------------------引用---------------------------------
-------------------------------结束语------------------------------
学习永无止境