uni-app 框架简介

62 阅读 0 评论 41 点赞

我是靠谱客的博主缓慢紫菜，最近开发中收集的这篇文章主要介绍uni-app 框架简介，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

什么是 uni-app

uni-app: 一个使用 Vue.js 开发所有前端应用的框架【vue的语法、微信小程序的标签和api】

外部文件引用变化

js文件引用：
1)import 编译时执行
   import { fun1 ...} from  '../../common/util'[不支持使用/开头的方式引入]
    
2）require 运行时执行
<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  
}


css外部文件导入
<style>  
    @import "./common/uni.css";  

    .uni-hello-text{  
        color:#7A7E83;  
    }  
</style>

手机端常用的新组件
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组件

css的变化

单位方面，推荐使用rpx
注意css里背景图和字体文件，尽量不要大于40k，因为会影响性能

js的变化

运行环境变化、数据绑定模式变化、api变化

1) 运行环境从浏览器变成v8引擎
不支持浏览器专用的window、document、navigator、location对象，包括cookie等存储，只支持标准js语法和api，比如if、for、settimeout、indexOf等
2) dom操作，改成vue的MVVM模式
小程序的数据绑定参考了vue，但自己修改了一些。在uni-app中只支持标准的vue，不支持小程序的数据绑定语法
小程序里的setData在uni-app里并不存在，因为vue是自动双向数据绑定的。直接通过赋值方式修改数据，如果数据绑定到界面上，界面会自动更新渲染
3) js api的变化
uni-app的api是参考小程序
alert,confirm 改成 uni.showmodel
ajax 改成 uni.request
cookie、session 没有了，local.storage 改成 uni.storage
uni-app的js api还有很多，但基本就是小程序的api，把wx.xxx改为uni.xxx即可