用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

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

想跨端開發小程序?這個最流行的跨端框架一定要學習!

Rolan 2020-9-12 17:38

當業務要求同時在不同的端都要展現時候,針對不同的端去編寫多套代碼的成本顯然非常高。這時候只需編寫一套代碼,就能夠適配多端的能力就顯得尤為需要。 ...

從最早發布的微信小程序,到后來的支付寶小程序、字節跳動小程序、百度小程序、QQ小程序,還有最近發布的360小程序,面對這么多套的代碼,開發者該如何開發呢?

當業務要求同時在不同的端都要展現時候,針對不同的端去編寫多套代碼的成本顯然非常高。這時候只需編寫一套代碼,就能夠適配多端的能力就顯得尤為需要。

今天就來給大家介紹一款,使用Vue的跨端框架——uni-app

uni-app 框架簡介

uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架,可編譯到 iOSAndroidH5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等平臺。

uni-app 在開發者數量、案例、跨端抹平度、擴展靈活性、性能體驗、周邊生態、學習成本、開發成本等 6 大關鍵指標上擁有極強的競爭優勢:

  • 開發者/案例數量更多
  • 跨端抹平度/擴展靈活性(通過條件編譯,調用專有能力而不影響其他平臺)
  • 性能體驗更優秀(App 端支持 weex 渲染,帶來更流暢的用戶體驗。)
  • 周邊生態豐富(推出插件市場,能夠提供較多的組件和模板,真正做到開箱即用)
  • 學習成本低(采用Vue.js 語法 + 小程序 API)
  • 開發成本低(不止開發成本,招聘、管理、測試各方面成本都大幅下降。)

雖然不同端框架環境千變萬化,無論各類小程序WeexReact-NativeFlutter快應用,它們萬變不離其宗的是MVVM架構設計思想。uni-app希望既能用一套代碼完成所有端需求,將相同的業務邏輯完成收斂到同一層系統里面,又不會因為項目的抽象一致導致可維護性變差。

開發工具

通過 HBuilderX 可視化界面, HBuilderX 內置相關環境,開箱即用,無需配置 nodejs。

開發語言

使用Vue.js + 小程序 API,進行開發。

  • 數據綁定及事件處理同 Vue.js 規范,同時補充了 App頁面的生命周期

  • uni-app 幫我們把不同平臺的小程序API 幾乎都封裝了 ,只需要將前綴替換為 uni 即可 舉例說明:

在微信中發送 request 請求:

wx.request({
  url: "https://www.example.com/request", //僅為示例,并非真實接口地址
  success: res => {
    console.log(res.data);
  }
});
復制代碼

uni-app中發送 request 請求:

uni.request({
  url: "https://www.example.com/request", //僅為示例,并非真實接口地址
  success: res => {
    console.log(res.data);
  }
});
復制代碼

了解微信小程序的你,是不是感覺很簡單呢?無非就是把 wx 前綴 換成了 uni 而已,而且uni.request是全端通用的 ajax 請求 API 哦,最大程度的降低開發者的學習成本。

如何解決跨端兼容問題

每個平臺有自己的一些特性,因此會存在一些無法跨平臺的情況。

uni-app 提供了條件編譯手段,在一個工程里優雅的完成了平臺個性化實現。

<view class="content">
  <! -- #ifdef MP-WEIXIN -->
  <view>只會編譯到微信小程序</view>
  <! -- #endif -->
  <! -- #ifdef APP-PLUS -->
  <view>只會編譯到app</view>
  <! -- #endif -->
</view>
復制代碼

nvue 模式

uni-app 里根據編譯配置不同,可以使用 weex 的組件,也可以使用小程序組件(即uni-app組件)。編寫頁面時頁面后綴名為 .nvue (native vue 的縮寫)

uni-app App 端內置 weex 渲染引擎,提供了原生渲染能力,讓uni-app在App端有更好的表現。

nvue 相當于給 weex 補充了大量 uni-app 的組件和 api,以及豐富的 Plus APINative.js、原生插件。

官方 ui 庫,uni-ui

uni-uiDCloud提供的一個跨端ui庫,它是基于vue組件的、flex 布局的、無 dom跨全端 ui

web 開發中有的開發者習慣用一個ui庫完成所有開發,但在uni-app體系中,推薦開發者首先使用性能更高的基礎組件,然后按需引入必要的擴展組件。

看到這里你是不是覺得特別心動了呢?別著急,讓我們看一下uni-app的開發規范。

uni-app 開發規范

為了實現多端兼容,綜合考慮編譯速度、運行性能等因素,uni-app 約定了如下開發規范:

  • 頁面文件遵循 Vue 單文件組件 (SFC) 規范
  • 組件標簽靠近小程序規范,詳見uni-app 組件規范
  • 接口能力(JS API)靠近微信小程序規范,但需將前綴 wx 替換為 uni,詳見uni-app接口規范
  • 數據綁定及事件處理同 Vue.js 規范,同時補充了 App 及頁面的生命周期
  • 為兼容多端運行,建議使用 flex 布局進行開發

關于各端的管理規則需要耐心學習

uni-app 并不難學,但我們注意到很多新人在適應各個平臺的規則限制時很焦躁。

uni-app 跨了很多端,雖然代碼層面可以開發一次,生成多端。但注意每個端,有每個端的管理規則,這與開發無關,但每個開發者仍然要耐心掌握這些規則限制。

  • 比如 H5 端的瀏覽器有跨域限制;
  • 比如微信小程序會強制要求 https 鏈接,并且所有要聯網的服務器域名都要配到微信的白名單中;
  • 比如 App 端,iOS 對隱私控制和虛擬支付控制非常嚴格;
  • 比如 App 端,Android、國產 rom 各種兼容性差異,尤其是因為谷歌服務被墻,導致的 push、定位等開發混亂的坑;
  • 如果你的 App 要使用三方 sdk,比如定位、地圖、支付、推送...還要遵循他們的規則和限制;

總結

uni-ui 對比其他框架主要有兩個優勢

  • 如何在有限前端團隊人數下搞定更多平臺,是需要首要考慮的原因,跨端方面uni-app更成熟。
  • 團隊里熟悉vue技術棧的同學多一點,則使用uni-app內部培訓時間短、風險低。

開發需要注意的點

  • 注意各端的差異性,很多東西,h5 是對的,上真機就錯了,真機好著的,換小程序就錯了,不同小程序之間還有差異,總之就是考慮好不同的情況,重點是仔細閱讀文檔。

  • 由于 uni-app 框架集成了5+API,一些需要原生功能 uniapp 也可以通過5+API去進行實現。

  • 很多的坑還是因為多端不兼容,除了寫起來麻煩一點,基本上都還是有可以解決的策略。


作者:前端陳晨
來源:掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
河北20选5大星走势图 喜乐彩下载 腾讯三分彩是什么东西 中国福利快乐双彩 哪里可以买到广西11选5 什么是私募基金 内蒙古十一选五五的诀窍 飞鱼彩票开奖 天津快乐10分布图 经传股票分析软件 广东十一选五简单技巧与个人心得 彩票开奖结果查询公告 云南时时彩怎么玩法 股票融资杠杆 安徽快三全天计划网页版 pk10预测在线网页 股票涨跌简单原理