Vue-objccn
Sử dụng Vue.js để phát triển một ứng dụng full stack đa nền tảng của Objc china.
- ✅ Ứng dụng máy tính có sẵn cho ba nền tảng: Mac, Linux và Windows
- ✅ Ứng dụng web hỗ trợ trình duyệt máy tính và trình duyệt di động
- ✅ Ứng dụng di động sử dụng khung Cordova, hỗ trợ các nền tảng iOS, Android, Windows Phone và BlackBerry
- ❌ Ứng dụng di động nativ, có thể sử dụng khung Weex để hỗ trợ cả iOS và Android
Lưu ý: Dự án này chỉ là một chút vui vẻ và hoàn toàn dành cho mục đích học hỏi, hãy ủng hộ 喵神(@onevcat) và Objc china.
Giới thiệu bằng tiếng Trung
Liên kết tải xuống cho phần mềm đã được đóng gói và có thể chạy là here.
Lời đầu
1. Về tôi
Tôi là một nhà phát triển iOS toàn thời gian, không phải là một nhà phát triển front-end. Do tham gia vào việc phát triển Weex, tôi biết đến Vue.js.
2. Tại sao viết dự án này?
Động lực để viết dự án này đến từ một người bạn thư ký, anh ấy để lại một thông điệp trên blog của tôi – có một bản demo Weex tốt hơn không? Tôi đã giới thiệu @EVAN YOU của Hacker News. Sau đó, anh ấy đề nghị tôi tạo một bản. Tôi đã từ chối nhưng vẫn lưu trong đầu.
Vào ngày 19 tháng 5 năm nay, GitHub sử dụng Electron để viết lại ứng dụng client cho macOS và Windows, kết hợp với sự phát triển của cross-platform trong năm gần đây, đối với một số công ty, cả web và ứng dụng đều cần, ứng dụng cũng cần hỗ trợ cả hai nền tảng iOS và Android, và họ còn phát triển các ứng dụng nhỏ Weixin. Mặc dù ứng dụng máy tính để bàn hiện nay còn ít, Electron có thể phát triển chúng tất cả. Tôi sẽ thử.
Kết quả của việc tiếp xúc với Vue.js, tất nhiên, không muốn ở lại ở mức cơ bản, muốn tiến xa hơn, @EVAN YOU đặc biệt là những đề xuất, cần nhiều thực hành hơn, thực hành nhiều hơn. Để tăng tốc độ tiến triển, tôi tự tìm dự án để thực hành.
Tại sao chọn Objc China, lý do thường đơn giản – tôi là một nhà phát triển iOS. Đối với những nhà phát triển iOS, Objc cơ bản đã được biết đến rất nhiều, 喵神(@onevcat) cũng vậy. Tôi rất ngưỡng mộ anh ấy 喵神(@onevcat) và quyết định viết Objc china mà không do dự.
Bởi vì tình yêu… …
3. Tại sao không sử dụng Weex để xây dựng dự án đa nền tảng này?
Khi tôi hoàn thành dự án và cố gắng chuyển nó trực tiếp sang Weex, tôi gặp rất nhiều lỗi và hầu hết không thể sửa ngay lập tức. Tôi tin rằng tôi đã sử dụng cách sai, không phải là vấn đề của Weex. Thêm vào đó, Weex đã phát hành phiên bản mới, và sau đó sẽ có thời gian để đưa phiên bản Weex của mã nguồn mở trở lại.
Và bây giờ, chúng ta sẽ bắt đầu, Hãy giới thiệu dự án này:
Công nghệ và framework chính
📦 Toàn bộ công nghệ của Vue: vue2 + vuex + vue-router + webpack
📌 ES6
📡 Yêu cầu mạng: axios
🎈 Framework phản hồi: bootstrap, element-ui
✏️ Phía backend: express
📝 Làm nổi bật mã: highlight.js
🗄 Cơ sở dữ liệu: lowdb
📖 Trình phân tích Markdown: vue-markdown
🔖 Xác nhận biểu mẫu: vee-validate
🏆 Khung đa nền tảng: Electron
📱 Các nền tảng được hỗ trợ
🔨 Cách xây dựng
Vì trang web Objc China trả lời trực tiếp dữ liệu html, để mô phỏng yêu cầu mạng để trả dữ liệu, tôi xây dựng một phần mềm backend và viết API để trả dữ liệu.
Tôi sử dụng khung làm việc Express để xây dựng một máy chủ, thiết lập trên cổng 8081, và viết các tuyến đường (routing); yêu cầu sẽ điều hướng đến cổng 8080, máy chủ sẽ tự động mở trong nền.
Môi trường phát triển hiện tại của tôi là node v6.11.0, npm v3.10.10, Vue.js v2.8.2.
# 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
# build Mac application
npm run build:mac
# build Linxu application
npm run build:linux
# build Win application
npm run build:win
# build Cordova application
npm run build:app
Tại đây, để nói về việc đóng gói Cordova riêng lẻ, nó có một số điểm đặc biệt hơn so với phía máy tính để bàn.
Trước hết, hãy mở file src/main.js và thêm ba dòng ghi chú về Cordova, cần bao gồm việc khởi tạo thư viện Cordova ngoài phạm vi của Vue. Sau khi bỏ comment, tiến hành bước tiếp theo.
Tôi đặt một tệp Makefile trong dự án, bạn có thể thực hiện theo hướng dẫn này.
- Trước tiên, cài đặt lệnh cordova toàn cầu
npm install -g cordova
- Sau đó nhập lệnh sau để tạo thư mục dự án ứng dụng
cordova create app com.vueobjccn vueobjccn
- Vào thư mục ứng dụng
cd app
- Thêm nền tảng tương ứng
cordova platform add ios
cordova platform add android
- Chạy dự án
cordova run ios
cordova run android
Cordova chỉ tạo ra một vỏ ứng dụng, tất cả nội dung vẫn được tải từ trang web. Có một thư mục gọi là WWW trong ứng dụng tương ứng và được sử dụng để tải trang. Gói JavaScript sẽ tạo ra thư mục www, chỉ cần thay thế nội dung trong thư mục này.
Ngoài ra, nếu bạn phát triển ứng dụng lớn bằng khung làm việc Cordova mà không có bất kỳ tối ưu hóa nào, trải nghiệm người dùng thực sự không nhanh bằng ứng dụng native. Nếu bạn thực sự muốn sử dụng công nghệ frontend để phát triển ứng dụng, tôi muốn chia sẻ hai gợi ý cho bạn: Một là cố gắng tối ưu hóa khi sử dụng khung làm việc Cordova. Hai là sử dụng React Native hoặc Weex để có trải nghiệm gần giống với native.
🚀 Phát triển đa nền tảng
Đóng gói dự án này thành ứng dụng máy tính để bàn bằng cách sử dụng công nghệ phát triển đa nền tảng JavaScript, chủ yếu sử dụng khung làm việc Electron. Tại đây, bạn cần cài đặt ba phụ thuộc “electron”, “electron-builder” và “electron-packager” trong devDependencies. Cấu hình các đường dẫn khác trong webpack.
Về việc cài đặt Cordova, tôi đã gặp một số vấn đề về mạng tại Trung Quốc. Nếu bạn không vượt tường lửa ở Trung Quốc, thật sự rất khó khăn. Ví dụ, nếu không vượt tường lửa và trong một môi trường mạng rất kém, việc cài đặt Cordova toàn cầu có thể gặp phải nhiều lỗi, thậm chí sau khi cài đặt hoàn chỉnh cnpm và thêm nền tảng iOS, bạn có thể gặp vấn đề về tệp ‘co’ không thể tìm thấy. Tôi nghi ngờ rằng cnpm không thể cài đặt lệnh một cách hoàn chỉnh. Sau đó, khi tôi trở về nhà, vượt tường lửa và môi trường mạng rất tốt, bất ngờ cài đặt npm hoàn thành. Nhưng có một sự kiện nhỏ: Nếu mẫu Cordova iOS 4.4.0 gây ra lỗi, tôi đề xuất cài đặt nhiều lần, nguyên nhân vẫn là do mạng vượt tường lửa ở Trung Quốc, không thể tải được.
Có thể bạn gặp lỗi sau đây:
“Lỗi: Không thể tìm thấy mô-đun ‘config-chain'” khi chạy ‘ionic start’
Giải pháp cho lỗi này là thử lại thứ tự ban đầu với lệnh sudo. Lỗi này có thể được khắc phục.
Gói cuối cùng sẽ được thực hiện trong thư mục dist.
Tiếp theo, để hiển thị hiệu suất của ứng dụng đa nền tảng trên mỗi nền tảng:
Đầu tiên, hiển thị phía Web:
Sau đó, hiển thị hiệu suất trên trình duyệt di động:
Nền tảng Android
Trình duyệt Nexus 5x
Trình duyệt Nexus 6P
Nền tảng iOS
Trình duyệt iPhone 5
Trình duyệt iPhone 7
Trình duyệt iPhone 7 Plus
Trình duyệt iPad
Tiếp theo, xem xét hiệu suất trên máy tính Mac:
Cuối cùng, xem xét hiệu suất của Cordova:
🌈 Hiển thị chức năng
Xây dựng một trang Web nhanh chóng bằng Vue.js.
Quản lý trạng thái Vuex rất tiện lợi. Trạng thái đăng nhập được lưu trong trạng thái, và đối tượng toàn cầu sẽ lấy nó.
Nếu không có thông tin đăng nhập và người dùng nhấn nút mua một cuốn sách điện tử, nó sẽ chuyển đến trang đăng nhập.
Một điểm nữa là vì đây là một ứng dụng SPA, vì vậy các tuyến đường bên trong sử dụng Router-link để đạt được, nhưng không sử dụng thẻ <a> để chuyển hướng, hiệu suất là chuyển đổi mà không cần yêu cầu dữ liệu, chuyển đổi nhanh chóng. Trải nghiệm người dùng thực sự tuyệt vời.
<router-link> được ưa chuộng hơn so với <a href="..."> cố định vì những lý do sau đây:
Nó hoạt động cách nhau trong cả chế độ lịch sử HTML5 và chế độ hash, vì vậy nếu bạn bao giờ quyết định chuyển đổi chế độ, hoặc khi bộ định tuyến trở lại chế độ hash trong IE9, không cần phải thay đổi gì cả.
Ở chế độ lịch sử HTML5, router-link sẽ ngăn sự kiện nhấp chuột để trình duyệt không cố gắng tải lại trang.
Khi bạn sử dụng tùy chọn base trong chế độ lịch sử HTML5, bạn không cần phải bao gồm nó vào URL trong thuộc tính to.
Tương tự, khi người dùng đăng xuất, tất cả nơi hiển thị tên người dùng sẽ trở thành trạng thái cần đăng nhập, giỏ hàng trên navigationBar cũng biến mất. Quản lý trạng thái với Vuex, thật sự thú vị.
Đây là việc kiểm tra hợp lệ của biểu mẫu email, không có nhiều nội dung kỹ thuật.
Dưới đây là trang giỏ hàng và sử dụng ý tưởng gắn kết trang MVVM. Có bốn nút trên trang, nhấn vào bất kỳ nút nào sẽ ngay lập tức thay đổi tổng giá trị liên quan. Đối với người dùng iOS, đây là điều đáng học hỏi về việc thực hiện trang MVVM.
Tiếp theo là hiệu suất trình duyệt Safari trên iPhone, tốc độ rất tốt.
Trong đám ứng dụng đa nền tảng này, trải nghiệm tốt nhất, theo tôi nghĩ, là ứng dụng trên Mac.
Cuối cùng là ứng dụng di động được xây dựng bằng khung làm việc Cordova, tôi hơi kén chọn và không hài lòng với Cordova chưa được tối ưu hóa. Xem trình bày dưới đây:
Ứng dụng iPhone
Ứng dụng iPad
🤔 Phản ánh
Mình mạnh mẽ khuyên bạn nên sử dụng element-ui (chắc chắn rằng các nhà phát triển Vue.js đã nghe đến thư viện này). Đây thực sự là một cách nhanh chóng để xây dựng dự án, một ứng dụng có thể được phát triển một cách hiệu quả. Tiết kiệm thời gian và tập trung nhiều hơn vào phát triển kinh doanh.
Mọi người đều nói “Bây giờ là thời đại của frontend, phát triển di động và tích hợp frontend là điều không thể tránh được”. Nhưng có nhiều khía cạnh khác nhau trong việc phát triển giữa frontend và iOS, mình đã trải qua tất cả và suy nghĩ nhiều. Frontend và iOS, họ có nhiều điều để học hỏi từ nhau trong những ưu điểm và nhược điểm riêng của họ, mình dự định viết một loạt bài viết về những khía cạnh đó – kỹ thuật, thành phần, định tuyến, MVVM. (Đào một cái hố lớn để nhảy)
📜 Tính năng
Nếu mình có nhiều thời gian rảnh hơn, mình muốn hỗ trợ Weex. Đưa Vue.js vào một ứng dụng Weex hoàn chỉnh, để trở thành một ứng dụng native, hiệu suất sẽ không kém. Sau đó, nó có thể phủ sóng toàn bộ nền tảng.
❗️ Sửa lỗi
Nếu bạn phát hiện lỗi, hãy chào mừng đệ trình PR của bạn.
Nếu bạn cảm thấy bối rối với điều gì đó, hãy chào mừng đệ trình Issues của bạn.
Mình thực sự rất biết ơn! 🙏🙏🙏
Chi Tiết Tải Về:
Tác giả: halfrost
Mã nguồn: https://github.com/halfrost/vue-objccn
Giấy phép: GPL-3.0 license
