給 iOS 工程師的 Vue.js 開發
47 likes•10,611 views
本文件探讨了iOS工程师学习Vue.js开发的必要性，指出网页版应用可能取代原生应用的趋势。文中介绍了Vue.js的结构、组成和与JavaScript结合的重要性，并讨论了在开发过程中可能遇到的常见问题，如跨域请求和搜索引擎优化。最后，作者提供了一些开发建议及实例代码，帮助iOS开发者适应Web开发。
![<script>
export default {
name: 'my-view',
data () { // private properties
return {
'data_key': 'data_value'
}
}
props: ['prop_key'], // public properties
watch: { // KVO
data_key: () => {
}
},
created: () => { // init
}.
methods () { // private methods
login() {
}
},
computed: { // 晚點說
}
}
</script>](https://image.slidesharecdn.com/vue-180615002013/85/iOS-Vue-js-20-320.jpg)
![// Collection View 與 Table View?
// 可以使⽤用 v-for
<template>
<div v-for=“item in items”>
</div>
</template>
<script>
export default {
data: {
return {
items: []
}
}
}
</script>](https://image.slidesharecdn.com/vue-180615002013/85/iOS-Vue-js-26-320.jpg)
給 iOS 工程師的 Vue.js 開發
- 1. 給 iOS ⼯工程師的 Vue.js 開發 zonble
- 2. 最近我在做網站 • 因為我的 iOS App ⼀一直被蘋果退件，總點做點別的 • iOS ⼯工程師最好還是學⼀一些 Web 開發技能 • iOS 不不會被 Android 取代，但是 Native App 很有可能被 Web App 取代 • 做了了 Web 版本，包在 Electron 裡頭，等於做好了了所有的 Desktop 版本
- 6. 成果
- 7. 成果
- 8. SPA?
- 9. 起初 Web 是很單純的 • 瀏覽器器就是個「可以透過網路路抓取、閱讀某種可以互相連 結的⽂文件」的軟體 • 瀏覽器器對 Web Server 發送 HTTP 連線，取得 HTML ⽂文件 • 瀏覽器器將 HTML ⽂文件直譯成 DOM • 瀏覽器器將 DOM 渲染成在螢幕上顯示的結果
- 10. Server Side 動態網⾴頁 • WWW Server 接受外部傳⼊入的參參數數，根據參參數數，回傳不不同 的 HTML ⽂文件 • 可以⽤用 GET、POST…等⽅方式傳⼊入參參數數 • ASP、PHP…還有⽬目前各種 Web Servre Framework（Rails、Laravel、Django）都在做這種事情
- 11. 但是偏偏有⼈人想在⽂文件格式裡頭搞 應⽤用程式開發 • 最早的作法是，在 HTML 裡頭挖⼀一塊可以塞⼊入執⾏行行 Native Code 的 drawing context，讓瀏覽器器 Plug-in 渲染內容 • Java Applet、ActiveX、QuickTime…最後 Flash 稱霸了了將 近⼗十年年的時間 • 但是在 2007 年年，有⼀一⽀支⼿手機問世，徹底打倒了了 Flash
- 13. 動態改變 DOM • DOM 的內容除了了可以從 HTML 當中產⽣生外，也可以由 JavaScript 動態修改（getElementById、addChild…） • JavaScript ⾃自⼰己也可以發送網路路連線（AJAX），然後⽤用抓 到的資料料改變⾴頁⾯面中部分的資料料 • 最後 DOM 都可能不不是從 HTML 產⽣生，⽽而都是⽤用 JavaScript 產⽣生的，只⽤用 JS 與 DOM 產⽣生的應⽤用，稱為 Single Page Application（SPA）
- 14. 這年年頭的 SPA • 你可能不不是直接去寫直接讓瀏覽器器閱讀的 HTML 與 JS • ⽽而是先寫某個其他格式的東⻄西，然後由特殊⼯工具打包成最 後發⾏行行的版本 • 瀏覽器器不不認得 ES6、TypeScript…所以⽤用 Babel 翻譯成瀏覽 器器認得的 JS • 然後把分散的 JS、Asset…透過 Web Pack 打包成⼀一⼤大包 JS
- 15. 對 iOS ⼯工程師來來說 • ES6、TypeScript -> JS 可以想成 • Objective-C -> C -> LLVM Bitcode -> Machine Code • 打包 Asset • xib -> nib、storyboard -> storyboardc、xcassets- >Assets.car
- 16. VUE.js
- 18. Vue.js 的檔案組成 • ⼀一個 Vue.js 專案，是由很多個 .vue 檔案組成的 • 每個 .vue 檔案可以想像成類類似 UIKit 的 View Controller 的 東⻄西，每個 .vue 檔案掌控⼀一部分的 DOM 元件與邏輯
- 19. ⼀一個 .vue 檔案 // 這部份像是 .xib 檔案 <template> </template> <style> </style> // 這部份像是你的 View Controller <script> </script>
- 20. <script> export default { name: 'my-view', data () { // private properties return { 'data_key': 'data_value' } } props: ['prop_key'], // public properties watch: { // KVO data_key: () => { } }, created: () => { // init }. methods () { // private methods login() { } }, computed: { // 晚點說 } } </script>
- 21. <template> <div> <p> {{ data_key }} </p> <button @click=“login”>Action</button> </div> </template>
- 22. // 另外⼀一個檔案想要使⽤用 my-view <template> <my-view></my-view> </template> <script> import MyView from ‘MyView.vue’ export default { components: {MyView} } </script>
- 23. // 另外⼀一個檔案想要使⽤用 my-view // 綁定 prop <template> <my-view v-bind:prop_key=“prop_value”></my- view> </template>
- 24. // iOS 的 view state pattern？ // 可以使⽤用 v-if 搭配 data <template> <loading v-if=“state==‘loading’”><loading> <error v-if=“state==‘error’”><error> <div v-if=“state==‘completed’”></div> </template> <script> import Loading from ‘Loading.vue’ import Error from ‘Error.vue’ export default { components: {Loading, Error}, data: { return { state: ‘completed’ } } } </script>
- 25. // 呼叫 API <script> export default { … methods { callAPI() { axios.get(‘https://..’).then( data => { // 要⽤用 nextTick this.$nextTick( () => { this.state = ‘completed’ } )}) } } } </script>
- 26. // Collection View 與 Table View? // 可以使⽤用 v-for <template> <div v-for=“item in items”> </div> </template> <script> export default { data: { return { items: [] } } } </script>
- 27. 跨 Vue 檔案之間的溝通？ • 要⽤用 Vuex • Vuex 是⼀一個超⼤大的共⽤用物件，每個 .vue 檔案，可以⽤用 this.$store 拿到這個物件 • 所有 .vue 檔案都透過 this. $store.dispatch(‘function_name’) 改變 vuex 的狀狀態 • vuex 被修改之後，⽤用到某個共⽤用狀狀態的 .vue，會透過 computed 收到修改
- 28. ⽤用⼒力力給他跑下去 • npm install • npm run dev • npm run build // 編譯 electron 版本 • npm run build:web // 編譯網⾴頁版
- 29. ⼀一些對應 • UITableView -> HTML Table • UICollectionView -> CSS Grid • UINavigationController、UITabBarController -> Route View • NSURLSession -> XHR（XMLHttpRequests）、Axois… • NSUserDefaults -> Local Storage
- 30. iOS ⼯工程師的進⼊入障礙
- 31. JavaScript 的⾏行行為 跟你想的完全不不⼀一樣 • JS 的 for..in 不不是給 Array ⽤用的，⽽而是對所有物件都可以 ⽤用，是列列舉某個物件的所有 property… • JS 的 let 是產⽣生 block scope 的變數數，var 是產⽣生 function scope 的變數數…
- 32. CORS • Cross-Origin Resource Sharing • 簡單講，寫 app 可以直接打 API，但是網⾴頁上⾯面預設不不允 許抓取跟你不不在同⼀一個網域的 API 的資料料 • 除⾮非對⽅方 API server 帶了了像「Access-Control-Allow- Origin: *」的 HTTP Header，即使有，遇到了了 302 redirect，也⼀一樣抓不不到 • 所以就算你寫⼀一個 JS App，但是 API 跟你不不在同⼀一個網 域，你還是往往得準備⼀一台 Server 幫你代打 API
- 33. 學了了 Vue，你也可以拿來來 寫 iOS app
- 34. 眉眉⻆角⻆角
- 35. Safari 瀏覽器器的問題 <template> // ⽤用 anchor 會讓 Safari 爛爛掉，但是其他瀏覽器器沒事 <a @click=“doSomething”>Test</a> // 可以改⽤用 span <span @click=“doSomething”>Test</span> </template>
- 36. ⽀支援可以變成⼿手機桌⾯面圖示的 Web App • iOS 要加⼊入 apple-touch-icon metatag • Android 要寫個 Manifest • Firefox top site 需要個 <link rel=“icon” href=“…”>
- 37. iPhone X 的 CSS =_= • https://webkit.org/blog/7929/designing-websites-for- iphone-x/ • 要在 HTML 加⼊入 <meta name='viewport' content='initial- scale=1, viewport-fit=cover’> 才能使⽤用 iPhone X 全螢幕 • 要在 CSS 使⽤用 env(safe-area-inset-left) …等，⽀支援 Safe Area，如 margin-left: env(safe-area-inset-left) • margin-left: calc(env(safe-area-inset-left) + 20px)
- 38. SEO • 純粹⽤用 JS 產⽣生出 DOM，沒有 HTML，搜尋引擎認不不得 • 搜尋引擎找不不到的網站沒⼈人來來 • 所以你還是得做⼀一個讓搜尋引擎抓取資料料的網站