uni-app學習資料整理-1.白話uni-app

時間 2020-07-14

標籤 uni app 學習資料整理白話简体版

原文原文鏈接

白話uni-app https://ask.dcloud.net.cn/article/35657

文件內代碼架構的變化

之前一個html大節點，裏面有script和style節點；css

如今template是一級節點，用於寫tag組件，script和style是並列的一級節點，也就是有3個一級節點。html

 1 <template>  
 2     <view>  
 3  注意必須有一個view，且只能有一個根view。全部內容寫在這個view下面。  4     </view>  
 5 </template>  
 6 
 7 <script>  
 8  export default {  9 
10  } 11 </script>  
12 
13 <style>  
14 
15 </style>

外部文件引用方式變化

之前經過script src、link href引入外部的js和css；前端

如今是es6的寫法，import引入外部的js模塊(注意不是文件)或cssvue

js要require進來，變成了對象。

在hello uni-app的common目錄有一個工具類util.js，能夠在hello uni-app中搜索這個例子查看。es6

1 <script>  
2 var util = require('../../../common/util.js'); //require這個js模塊 
3 var formatedPlayTime = util.formatTime(playTime); //調用js模塊的方法 
4 </script>

而在這個util.js裏，要把以前的function封裝爲對象的方法web

1 function formatTime(time) { 2  return time;//這裏沒寫邏輯 3 } 4 
5 module.exports = { 6  formatTime: formatTime 7 }

固然還有一些高級的用法ajax

1 var dateUtils = require('../../../common/util.js').dateUtils; //直接使用js模塊的屬性。在hello uni-app有示例 2 import * as echarts from '/components/echarts/echarts.simple.min.js'; //將js導入並重命名爲echarts，而後使用echarts.來繼續執行方法。在hello uni-app有示例

css外部文件導入

1 <style>  
2  @import "./common/uni.css"; 3 
4  .uni-hello-text{  
5  color:#7A7E83;  
6     }  
7 </style>

全局樣式，在根目錄下的app.vue裏寫入，每一個頁面都會加載app.vue裏的樣式。json

另外，vue支持組件導入，能夠更方便的封裝一個包括界面、js、樣式的庫。

以下是導入一個角標的組件庫，在頁面上顯示一個abc而且右上角有個數字角標1，詳見canvas

 1 <template>  
 2     <view>  
 3         <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用組件-->  
 4     </view>  
 5 </template>  
 6 <script>  
 7  import uniBadge from "../../../components/uni-badge.vue";//1.導入組件 
 8  export default {  9  data() { 10             return { 11 
12  } 13  }, 14  components: { 15  uniBadge //2.註冊組件 
16  } 17  } 18 </script>

如須要全局導入vue組件，即每一個頁面均可以直接使用而不用引用和註冊的話，在項目根目錄下的main.js裏處理。以下是hello uni-app裏的例子。小程序

1 //main.js 2 import pageHead from './components/page-head.vue' //導入 3 Vue.component('page-head', pageHead) //註冊。註冊後在每一個vue的page頁面裏能夠直接使用<page-head></page-head>組件。

組件/標籤的變化

之前是html標籤，如今是小程序組件。
具體說來：

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文檔
其實老的HTML標籤也能夠在uni-app裏使用，uni-app編譯器會在編譯時把老標籤轉爲新標籤，好比把div編譯成view。但不推薦這種用法，調試H5端時容易混亂，基於老元素寫法的選擇器也會出問題。

除了改動外，新增了一批手機端經常使用的新組件

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組件

除了內置組件，還有不少開源的擴展組件，把經常使用操做都進行封裝，DCloud創建了插件市場收錄這些擴展組件，詳見插件市場

js的變化

js的變化，分爲運行環境變化、數據綁定模式變化、api變化3部分。

運行環境從瀏覽器變成v8引擎

標準js語法和api都支持，好比if、for、settimeout、indexOf等。

但瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程序都不支持。

可能有些人覺得js等於瀏覽器裏的js。其實js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基於js規範補充了window、document、navigator、location等專用對象。

在uni-app的各個端中，除了h5端，其餘端的js都運行在一個獨立的v8引擎下，不是在瀏覽器中，因此瀏覽器的對象沒法使用。若是你作太小程序開發，對此應當很瞭解。

這意味着依賴document的不少HTML的庫，好比jqurey沒法使用。

固然app和小程序支持web-view組件，裏面能夠加載標準HTML，這種頁面仍然支持瀏覽器專用對象window、document、navigator、location。

之前的dom操做，改爲vue的MVVM模式

如今前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減小代碼行數，同時差量渲染性能更好。

uni-app使用vue的數據綁定方式解決js和dom界面交互的問題。

若是你想改變某個dom元素的顯示內容，好比一個view的顯示文字：

之前是給view設id，而後js裏經過選擇器獲取dom元素，進一步經過js進行賦值操做，修改dom元素的屬性或值。

以下演示了一段代碼，頁面中有個顯示的文字區和一個按鈕，點擊按鈕後會修改文字區的值

如今的作法，是vue的綁定模式，給這個dom元素綁定一個js變量，在script中修改js變量的值，dom會自動變化，頁面會自動更新渲染

 1 <template>  
 2     <view>  
 3         <text>{{textvalue}}</text><!-- 這裏演示了組件值的綁定 -->  
 4         <button :type="buttontype" @click="changetextvalue()">修改成789</button><!-- 這裏演示了屬性和事件的綁定 -->  
 5     </view>  
 6 </template>  
 7 
 8 <script>  
 9  export default { 10  data() { 11             return { 12  textvalue:"123", 13  buttontype:"primary"  
14  }; 15  }, 16  onLoad() { 17             this.textvalue="456"//這裏修改textvalue的值，其實123都來不及顯示就變成了456 
18  }, 19  methods: { 20  changetextvalue() { 21                 this.textvalue="789"//這裏修改textvalue的值，頁面自動刷新爲789 
22  } 23  } 24  } 25 </script>