初識 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中