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元素的屬性或值。
如下演示了一段代碼，頁面中有個顯示的文字區和一個按鈕，點擊按鈕后會修改文字區的值
復制代碼<html> <head> <script type="text/javascript"> document.addEventListener("DOMContentLoaded",function () { 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>
現在的做法，是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>
如果你學過小程序的數據綁定，但不了解vue，要注意：
-
小程序的數據綁定參考了vue，但自己修改了一些。在uni-app中只支持標准的vue，不支持小程序的數據綁定語法
-
小程序里的setData在uni-app里並不存在，因為vue是自動雙向數據綁定的。直接通過賦值方式修改數據，如果數據綁定到界面上，界面會自動更新渲染
-
js api的變化
因為uni-app的api是參考小程序的，所以和瀏覽器的js api有很多不同，如
- alert,confirm 改成 uni.showmodel
- ajax 改成 uni.request
- cookie、session 沒有了，local.storage 改成 uni.storage
uni-app的js api還有很多，但基本就是小程序的api，把wx.xxx改為uni.xxx即可。詳見
uni-app在不同的端，支持條件編譯，無限制的使用各端獨有的api，詳見條件編譯