Vue+ Electron 開發的一個跨三端的應用（Taro開發多端應用）

官方解釋: 使用 Taro，我們可以只書寫一套程式碼，再通過 Taro 的編譯工具，將原始碼分別編譯出可以在不同端（微信/百度/支付寶/位元組跳動小程式、H5、React-Native 等）執行的程式碼。

使用前

第一次看到Taro是在github搜尋React外掛時看到(個人習慣,有時候會去搜尋一個語言的外掛在GitHub再按照Star排名，看看各個外掛功能，後期開發時用到這功能有個印象)，感覺挺好的外掛，以後開發小程式和快應用應該用的到，因為它直接使用react可以開發多端，相比於去看各個廠家小程式開發文件，使用Taro幾乎沒有學習成本。

為什麼要了解它

這次使用它開發一個簡單的網頁南瓜棋，小時候玩的一個遊戲，邏輯還是比較簡單的，主要是去了解下Taro優缺點，以後開發公司簡單小程式、快應用等做好準備，主要是瞭解他的侷限性。

開發感受

具體看文件，我簡單說下感受，我的前端水平:簡單的HTML、CSS瞭解複雜的網頁不會(動畫啥的還得看文件)，React-Native水平應該還是不錯，主流的React-Native框架都會搭建，開發，原生除錯，編寫沒問題,ES6沒問題。React看了2周吧，入門。這個Taro，直接寫按照文件走，沒出現問題。

缺點

• 由於之前大段時間開發RN的所以開發時直接使用style={styles.你的}這種開發，開發完H5時，打算執行在小程式上發現尷尬了，樣式全亂了，後面給尺寸加px。
• 用Mobx在store裡面有個方法我命名onChessGo，H5執行沒問題，小程式不行，排查了一段時間發現微信小程式裡的Mobx->store方法不能已on開頭，這個要注意。
• 好像暫時是不能引用三方UI庫的和UI元件庫的，這和Taro功能有關，可能一個小程式的庫肯定不能用在React-Native，這個缺陷會加大開發複雜頁面的時間，可能對於原生(各個小程式新功能)新功能支援可能也不會太及時，由於頁面簡單，瞭解時間端更多的缺陷也沒有看到。
• return tsx時在非render裡面是不能執行的在微信小程式裡，H5沒問題。

優點

• 快速開發各端的應用，不需要任何學習成本(我這前端小白都直接開寫)，還提供各個應用的原生功能的介面方便使用者呼叫。
• 確實可以多端打包，親測有效，但演示和一些細節要注意了。
• Taro自己開發了一個UI庫(Taro-ui)滿足了大部分的元件需求,最後最重要的一點是個人認為大多數小程式、H5、快應用都是用於引流或者簡單功能開發，這些功能開發Taro應該都可以滿足，還有就是時間和人力成本Taro也是有優勢。

 

 

程式碼地址如下：
http://www.demodashi.com/demo/11738.html

GitHub Repo：vue-objccn
Follow: halfrost · GitHub
利用 Vue.js 實現 objc中國 的跨平臺全棧應用

✅ 桌面應用，支援 Mac、Linux、Windows 三個平臺
✅ Web 應用，支援 桌面瀏覽器 和 手機瀏覽器
✅ 手機 App，目前只支援了 Cordova 框架，支援 iOS、Android、Windows Phone、BlackBerry 四個平臺
❌ 手機原生 App，打算用 Weex 框架，同樣一起支援 iOS 和 Android 兩個平臺

注：此專案純屬個人瞎搞，請大家支援 喵神(@onevcat)，支援 Objc中國。
前言

一.關於我

我是一名全職的 iOS 開發者，非前端開發者。由於接觸了 Weex 開發，從而接觸到了 Vue.js。

二.為什麼會寫這個專案？

最開始有這個想法的時候是來自一個網友，他在我的部落格上問我，網上有沒有寫的比較好的 Weex demo ？我說尤大寫的那個 Hacker News 是最好的。後來網友就說，樓主能寫一個麼？我當時回答暫時不行。其實這事我一直記在心裡。

今年5月19號，GitHub 使用 Electron 重寫了 macOS 和 Windows 的客戶端，加上近些年跨端開發越來越火，對於一些公司來說，Web 和 app 應該都是需要的，app 還需要 iOS 和 Android 兩個平臺，再有甚者還要開發小程式，桌面級的應用雖然少，但是用 Electron 一樣可以一起開發了。自己也萌生了想要躍躍欲試的念頭。

由於接觸到了 Vue.js，當然不想停留在初級，想進階，尤大給出了建議，就是多實踐，多練。為了加快進階的步伐，自己私下就找專案練。

至於為何選擇 Objc 中國，理由其實很簡單，因為我是 iOS 開發者。在 iOS 開發者中，Objc 基本上人盡皆知（有不知道的？），喵神也基本上人盡皆知，我個人很崇拜喵神，所以就選了 Objc 中國來寫。

因為愛 … …

三.這次為何跨端開發沒有weex？

這次在我寫完專案以後，發現 Vue 的程式碼直接轉換成 Weex 的專案，是無法實現的，好多報錯。而且不是一下子能都修復好。我相信是我使用姿勢的問題，不是 Weex 的問題。對了，Weex 又釋出新版本了，接下來有時間的話就把 Weex 版的也做一遍開源。

好了，進入正題，說專案：

技術棧和主要框架

Vue 全家桶：vue2 + vuex + vue-router + webpack 
ES6 
網路請求：axios 
頁面相應式框架：bootstrap，element-ui 
後臺：express 
程式碼高亮：highlight.js 
資料庫：lowdb 
markdown解析器：vue-markdown 
表單驗證：vee-validate 
跨平臺框架：Electron

專案構建

由於喵神的 Objc 網站是直接返回 html，所以想進行模擬網路請求返回資料，就只能自己搭建一個後臺，寫 api 返回資料了。

我利用 Express 把後臺搭建在 8081埠上，並寫好路由，請求會轉到8080，開啟伺服器的時候也會自動開啟後臺。

# install dependencies 安裝依賴
npm install

# serve with hot reload at localhost:8080
npm run dev

# serve with hot reload at localhost:8080
npm run start

# build for production with minification 打包
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

# 打包 Mac 應用
npm run build:mac

# 打包 Linux 應用
npm run build:linux

# 打包 Win 應用
npm run build:win

# 打包 Cordova 應用
npm run build:app
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
這裡要單獨說一下 Cordova 的打包方式，它比桌面端的稍微特殊一點。

首先把 src/main.js 檔案中關於 Coredova 的三行註釋開啟，Coredova 庫的初始化需要包在生成 Vue 例項 的外面。開啟註釋以後，再執行接下來的步驟。

我在專案中放了一個 Makefile，可以根據這個來做。

首先全域性安裝 cordova 命令

npm install -g cordova
再輸入下面的命令，生成 app 專案目錄

cordova create app com.vueobjccn vueobjccn
進入到 app 資料夾中

cd app
新增對應的平臺

cordova platform add ios 
cordova platform add android
執行專案

cordova run ios 
cordova run android
Cordova 只生成了一個殼的 app，裡面具體的內容還是讀取的網頁，在生成的對應的應用裡面有一個 www 的資料夾，這個資料夾裡面就是要載入頁面。JavaScript 打包之後是會生成 www 的資料夾，只要去替換 Cordova 對應平臺裡面的 www 資料夾裡面的內容即可。

額外說幾句，在 app 發展到現在這麼成熟的時代，如果構建一個大的 app，用 Cordova 框架去做，不用原生，不做任何優化，使用者體驗確實不如原生的快。我這次就專門打包體驗了 Cordova app，沒有做任何優化，打包出來就用，如果是挑剔的使用者，放在當今各大 app 接近完美的體驗度相比來說，確實會感到滿足感略低。如果真的要前端開發 app ，給2個建議，如果是用 Cordova 框架，一定要儘量優化優化，不然效能不如原生。如果想有接近原生的體驗，那麼可以考慮用 React Native 或者 Weex。

跨平臺開發

JavaScript 跨平臺開發打包成桌面級應用，主要用 Electron 框架。這裡需要在 devDependencies 裡面安裝好 “electron”、”electron-builder”、”electron-packager” 這三個。其他的路徑配置在 webpack 裡面配置好即可。

關於 Cordova 的安裝，確實可以吐槽一點網路的問題。如果你在一個翻牆環境很差的地方，真的很痛苦。比如之前在一個翻牆環境很差的情況下全域性安裝 Cordova ，各種報錯，就算是換了 cnpm 完全安裝了以後，新增 iOS 平臺以後以後會報一個 co 檔案找不到的問題，感覺是 cnpm 沒有把命令安裝完整。後來我回到家裡，翻牆網路很好，npm install 一下子就安裝好了。不過有個小插曲：Cordova iOS 4.4.0 template 如果報錯，就多安裝幾次，原因還是翻牆的原因，沒有 catch 到。

還有可能會遇到下面這個錯誤：

“Error: Cannot find module ‘config-chain’” when running ‘ionic start’
這個錯誤就用 sudo 命令重新嘗試一遍原命令就好了。

最終打包完成會在 dist 的資料夾中。

接下來展示一下這個跨三端的應用在各個平臺下的表現：

先展示一下 Web 端

再展示一下在手機瀏覽器上的效果：

Android平臺

Nexus 5x 的 Web

Nexus 6P 的 Web

iOS 平臺

iPhone 5 的 Web

iPhone 7 的 Web

iPhone 7 Plus 的 Web

iPad 的 Web

接著再看看 Mac 端上的表現：

最後看看 Cordova 的效果：

功能展示

用 Vue.js 搭建一個 Web 頁面很快。

看看 Vuex 管理狀態的方便。登入狀態儲存在 state 裡面，全域性都會獲取到。

一旦使用者沒有登入，點選購買電子書的時候，判斷沒有使用者登入都會跳轉到登入頁面。

還有一點值得說的是，由於這是一個 SPA ，所以裡面的路由都用 Router-link 實現的，而沒有選用 a 標籤的跳轉，效果就是跳轉並不用去請求資料，秒跳。這個使用者體驗真的很爽。

比起寫死的 會好一些，理由如下：

無論是 HTML5 history 模式還是 hash 模式，它的表現行為一致，所以，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。

在 HTML5 history 模式下，router-link 會攔截點選事件，讓瀏覽器不再重新載入頁面。

當你在 HTML5 history 模式下使用 base 選項之後，所有的 to 屬性都不需要寫（基路徑）了。

登出頁面同理，一旦使用者登出，所有顯示使用者名稱的地方都會變成登入，navigationBar 上的購物車也一併消失。用 Vuex 管理狀態，挺好的。

這就是 email 的表單驗證了，沒有太多的技術含量。

這裡是購物車頁面，這裡用到了 MVVM 頁面的繫結的思想，頁面上4個按鈕，點任意一個按鈕都會立即改變下面的總價。關於 Vue.js 的 MVVM 實現思想值得 iOSer 們學習。

接下來這個是 iPhone 的 Safari 上的表現，速度還可以。

在跨平臺的這幾個應用中，體驗最好的，我覺得還是 Mac 的應用。使用起來滿意度非常高。

最後就是 Cordova 框架搭建的 手機 app，體驗度不高，具體如何，看圖吧，總之不優化的 Cordova ，對於挑剔的我來說，我是不滿意的。

iPhone 上的應用

iPad 上的應用

補充程式碼截圖

 
其中src目錄如下： 

專案完成之後的感想

先安利一下 element-ui 這個專案，用它來搭建專案，真的很快，頁面很快就可以搭建完成，開發 Vue.js 的同學一定有聽過這個庫。節約出來的大把時間可以把更多的精力放在業務開發上面。

大家都在說現在是大前端時代，移動開發和前端融合是必然。但是兩個平臺的開發其實還是有很多的不同，我在經歷過前端的開發和 iOS 開發以後，感想還是很多的，前端和 iOS 是有很多可以相互學習的地方，兩者也各有優缺點。接下來我打算寫寫這些方面的系列文章。前端的工程化，元件化，路由，MVVM，分別和 iOS 這邊各有哪些優缺點，相互可以學習些什麼。（感覺給自己挖了一個大坑）

Feature

有時間就支援 Weex ，把這個 Vue.js 的改成一個完整的 Weex 的應用，變成原生以後，效能一定不會差。這樣跨平臺開發就應該全了。

勘誤

如果在專案中發現了有什麼不解或者發現了 bug，歡迎提交 PR 或者 issue，歡迎大神們多多指點小弟

感謝

如果喜歡這個專案，歡迎Star！

【參考資料】

Vue 全家桶 + Electron 開發的一個跨三端的應用 https://blog.csdn.net/findhappy117/article/details/79520686