初识 uni-app 框架

什么是 uni-app

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

外部文件引用变化

js模块(注意不是文件)引用：
<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>

标签/组件的变化

    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文档

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

工程结构和页面管理

     原来app.json被一拆为二。页面管理，被挪入了uni-app的pages.json；非页面管理，挪入了manifest.json
     原来的app.js和app.wxss被合并到了app.vue中