用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

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

Rolan 2019-11-18 00:07

uni-app是一個使用Vue.js開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺。引用官方介紹 , 為什么它可以做到這點 ?uniapp內置 ...

uni-app 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/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有幾大優勢

  • 微信的所有api都可以用
  • Vue 的幾乎所有語法的支持
  • 內置 Vuex 和 Vue-router
  • 可以用瀏覽器調試

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

第一點:用 Vue 來寫程序 , 你的 Vue 水平和了解程度也會上升不少 , 將來寫網頁或者其他東西時候 , 用 Vue 也是胸有成竹 .

第二點: 微信小程序沒有內置 類似 Vuex 的功能 , 導致跨頁面 , 跨多級組件的共享數據會非常麻煩 .

第三點: 如果你調試過微信小程序就知道 , 每次修改完后編譯是多慢 ,展開 dom 是多么麻煩 , 查看數據只能一個 console.log 或者 debugger 來調試 . 但是用 chrome來調試就完全不同了 , 它編譯很快 , 可以用 Vue 官方插件 dev-tool 來 查看 v-node 樹 , 數據狀態和 Vuex , 這個真的是在開發體驗和效率上是**降維打擊 . **

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

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

有 .

  1. 微信限制小程序包的大小為 2mb , 但是 uniapp 編譯的小程序因為自帶 Vue Vuex 等原因 , 會稍稍多幾十kb

不過不是特別大的問題 . 2. 首次渲染頁面速度不如小程序 . 畢竟是要多一層 Vue 的傳遞所以, 首次加載不如原生 .

但是后續的數值更新 , 特別是大量數據的更新 , 因為 Vue 中有 diff 算法使渲染的效率大大提升 .

開啟 uniapp 的學習

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

第二步: hbuilderx 安裝完后

安裝 uniapp 插件 , 其他的插件 比如 scss 編譯 等等也可以安裝一下 , 全裝也沒問題哈

第三步:微信開發者工具和 uniapp 都安裝完后打開微信開發者工具 , 登錄賬號等等操作

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

接著 hbuilderx導航欄 工具 -> 設置 -> 源碼視圖 這里可以看到右邊有設置的json 找到最后一行-> "weApp.devTools.path":"" 這里填上微信開發者工具的絕對路徑 比如我的 : "weApp.devTools.path":"E:/微信web開發者工具"

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

接下來的學習可以到官方的文檔去學習哦~

官方的文檔

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 前端小星星o一閃一閃亮晶晶 來自: 掘金
致青春APP 吉林快三 球探体育比分官网网址 中山股票配资 辽宁11选5 聚富配资 福建11选5 股票融资平台怎么纳税 捷豹比分足球指数 上海快3 诺安股票320003 篮球比分直播网 6场半全场 华夏盛世股票基金 聚宏鑫配资 000069股票行情 法国网球比分直播