開始你的uniapp之旅:寫出你的第一個微信小程序

uniapp 是什麼 ? 爲何它能夠寫微信小程序 ?

爲何uniapp能夠 ?

uni-app 是一個使用 Vue.js 開發全部前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、H五、以及各類小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺。

引用官方介紹 , 爲何它能夠作到這點 ?  uniapp內置了 Vue.js 若是你熟悉 Vue.js ,  就知道 Vue 的核心只是完成的只是在數據變動後 , 自動幫你把用到這個數據的 " 對象 " 中的數據進行更新 , 在瀏覽器器上它對應着瀏覽器dom , 在不一樣的平臺上它能夠對應不一樣的東西 , 這就賦予了 Vue.js 的跨平臺能力

剛剛說的"對象"並非Javascript 中 的 Object , 理解成 面向對象編程中的對象更爲合適 , 不管它是虛擬的仍是現實中的東西 , 它均可以被描述爲對象 . 你能夠想象嗎, 有人已經把Vue 移植到了帶有顯示屏的底層硬件上 , 每當 Vue代碼中的數據更新時 , 顯示屏上的數據也會被通知更新 .

你知道這點就好了 :  uniapp 編譯時 , 把Vue template中的基礎組件對應不一樣平臺上的基礎組件 ,完成了跨平臺的工做 .

uniapp 跨平臺是否是不少坑?

你必定會懷疑 unipp 的能力 . 是的 , 必然是有坑的 . 可是坑的層面不是數據層面 , Javascript 引擎在不一樣平臺上的解析都是符合規範的  ,通常是 css 樣式 或者 api層面的 , 每一個平臺對css和api 的支持不一樣 ,這個必須你本身去作兼容 , 再好的編譯也不可能徹底消除原生上帶來的差距 . 所以 , 它的坑並非由於自身的緣由 , 而是你對這個平臺自己不是很瞭解 , 寫出了不兼容的代碼 .

若是你不考慮兼容的話 , 我能夠說它寫小程序是沒有坑的 . 你最後寫起來會感受與小程序基本一致 , 甚至更爽 .

爲何我必定推薦你用uniapp寫微信小程序?

微信小程序用它的語法寫很差嗎 ? 爲何必定要用uniapp 呢 . uniapp有幾大優點

• 能夠用瀏覽器進行調試
• Vue的幾乎全部語法的支持
• 內置Vuex 和 Vue-router
• 微信的全部api均可以用

其餘相似於css動畫 , vue單文件的優點就不一一說了 .  加粗的每一點都值得你去使用 uniapp .

第一點: 若是你調試過微信小程序就知道, 每次修改完後編譯是多慢 ,展開dom是多麼麻煩 , 查看數據只能一個 console.log或者 debugger 來調試 . 可是用 chrome來調試就徹底不一樣了 , 它編譯很快 , 能夠用 Vue 官方插件 dev-tool 來 查看 v-node 樹 , 數據狀態和 Vuex , 這個真的是在開發體驗和效率上是降維打擊. 如今 , 雖然我只開發微信小程序 , 可是我通常也不打開那噁心的開發者工具 (瘋狂吐槽微信開發者工具,每次都把我內存撐爆),只用chrome來調試樣式和數據,只會在調試特定api和提交小程序代碼前檢查一下樣式是否正確

第二點:用Vue來寫程序 , 你的 Vue 水平和了解程度也會上升很多 , 未來寫網頁或者其餘東西時候 , 用Vue也是成竹在胸 .

第三點: 微信小程序沒有內置 相似較爲完善的 Vuex的功能 , 致使跨頁面 , 跨多級組件的共享數據會很是麻煩.

版本較新的瀏覽器對 css 的支持是一個超集 , 在小程序中的能使用的樣式在 chrome 徹底兼容, 調試效率也會高一些 , 不過自定義組件要注意一下 , 它的寬高只能由內部撐起 .

uniapp來寫小程序有沒有缺點呢?

有 .

• 微信限制小程序包的大小爲2mb , 可是uniapp編譯的小程序由於自帶 Vue Vuex 等緣由 , 會稍稍多幾十kb(具體不知道多少 , 發行版不會特別多) 不過不是特別大的問題 .
• 首次渲染頁面速度不如小程序 . 畢竟是要多一層 Vue的傳遞因此, 首次加載不如原生 . 可是後續的數值更新 , 特別是大量數據的更新 , 由於Vue 中有 diff 算法使渲染的效率大大提高 .
• 雖然我沒真正寫過原生微信小程序 , 可是我看過很多代碼 , 發現微信小程序在模板上的寫法是有許多創新的 , 好比微信小程序能夠動態綁定事件 , 而vue的模板只是 @ + 事件名沒法 ,動態綁定 . 還有微信小程序的字符串寫法相似於模板字符串 , 可是uniapp中vue是不支持在模板上寫es6的模板字符串的寫法 . 小程序有自定義事件冒泡的概念 , vue中是沒法冒泡事件的等等一些細微的缺陷 .

但瑕不掩瑜 , 細微的缺陷徹底沒法掩飾uniapp在開發效率上的優勢 .

開啓 uniapp 的學習

第一步:首先下載安裝 hbuiderx(標準版)和 微信開發者工具

第二步:hbuilderx安裝完後

安裝uniapp插件 , 其餘的插件 好比 scss 編譯 等等也能夠安裝一下 , 全裝也沒問題哈

第三步:微信開發者工具和uniapp都安裝完後打開微信開發者工具 , 登陸帳號等等操做

設置服務端口 , 先打開你的微信開發者工具 -> 上欄 -> 設置 -> 安全設置 -> 服務端口 -> 開啓

接着 hbuilderx導航欄 工具 -> 設置 -> 源碼視圖 這裏能夠看到右邊有設置的json 找到最後一行->"weApp.devTools.path":"" 這裏填上微信開發者工具的絕對路徑 好比個人 : "weApp.devTools.path":"E:/微信web開發者工具"

第四步:兩個都設置完後 , hbuilderx導航欄左上角:文件 -> 新建 -> 項目 -> 選擇uniapp  ->選擇模板 : Hello uniapp 演示模板 建立-> 導航欄中間:運行 -> 運行到小程序 , 你就能夠啦~

接下來的學習能夠到官方的文檔去學習哦~

官方的文檔