發表文章

Android – Activity / Service 的生命狀態

之前在學習 android app 開發所做的筆記，在此記錄一下. 每個Activity有四個生命狀態： Active／Running：當一個Activity在螢幕的最上層時(堆疊的最頂端)，它就是屬於Active或Running的狀態 Paused：如果一個Activity失去焦點(focus)但還看得到它的畫面，那失去焦點的這個Activity則處在Paused的狀態。失去焦點的Activity它還是完全活著的，並沒有消失。(活著的意思是指Activity自已本身所有的狀態及資料都還是存在的也跟視窗管理程式window manager保持連繫著)像這種Paused的Activity，可能在系統的記憶體不足的時後，被系統自動移除掉 Stopped：如果一個Activity被其它的Activity完全的遮住時，這個被遮的Activity處於stop的狀態，它仍然保有全部的狀態及資料，但因為它已不再被使用者看見，所以它的畫面是被隱藏起來的(畫面不需要更新)。當系統記憶體不足時，這種Stop狀態的Activity是最先被系統考慮拿來釋放記憶體的 Finished： 當一個Activity處於Pause或Stop的狀態時，系統可以要求Activity結束(Finish)或直接移除(Kill)它。當它需要再度呈現在使用者面前時，它必需要能完整的重新啟動及回復先前的狀態 每個Service有兩種生命狀態： Started：當一個組件(例如：一個Activity)呼叫startService()的時候，Service就進入Started狀態。一個Service一旦被啟動，就會一直在背景運行，就算啟動的組件被關閉還是繼續運行。 一般而言，一個被啟動的Service只會執行一個功能，執行完畢後並不會回傳結果給啟動的組件。例如：某個Service會透過網路下載或上傳一個檔案。當傳輸工作結束，該Service應該自動關閉。 Bound：當一個組件(例如：一個Activity)呼叫bindService()的時候，Service就進入Bound狀態。 處於Bound狀態的Service，和呼叫的組件的關係類似client-server介面，讓組件和Service互相溝通、傳送與接收信息，甚至可以透過IPC跨process交換信息。 一個處於Bound狀態的Service，只要有一個對應的
張貼留言
閱讀完整內容

Vue.js – vuex 狀態管理

圖片
入門前最後需了解的一個 library ，vuex 這集中式存儲管理所有組件的資料狀態. 當一個 app 在做非同步處理時，我們希望可以有個 Loading 的畫面可以讓使用者知道 app 是有在 work 的，一般都是把這個功能做在主頁面上，其它的子頁面都是呼叫主頁面的 method 來 enable/disable，這個時候就是 vuex 上場的時機了. Vuex 這個部份網路上已有很多的介紹了，請自行善用 Google 大神吧. Vuex 觀念 首先我們依照官網的步驟安裝 vuex 在來在 src 下新增一個 store 的資料夾，裡面分別有 5 隻 js 檔案 分別在各個 js 檔案中撰寫相對應的程式碼. mutations_types.js mutations.js getters.js actions.js index.js 按著在 main.js 中引用 store 中的 js 檔案. 接著我們修改 App.vue 這個 main page 接著修改 component  的程式碼 如此就可以在切換頁面時出現 Loading 的效果. PS : 這個時候在 run 時會有 error 的問題， “ …mapActions “ 這個 method 無法 compile，需安裝Stage 2 preset 來 bypass 這個錯誤訊息.相關的訊息如下: https://forum-archive.vuejs.org/topic/5023/i-am-getting-an-error-when-i-use-mapgetters-on-vuex-2-0 https://babeljs.io/docs/plugins/preset-stage-2/ .babelrc file
張貼留言
閱讀完整內容

Vue.js - 基礎介紹教學

今年的 iT邦幫忙鐵人賽中剛好就有位鐵人利用了 30 天的時間，天天一篇文章從頭到尾來介紹 vue.js 的基礎教學，這真的是太佛心來了，在此記錄一下也方便以後有需要的時候可以直接取得相關的訊息. vue & vuex 01 - Vue Introduction & 鐵人賽說明 vue & vuex 02 - 使用 Vue-cli 安裝 vue 和 webpack 環境與相關套件 vue & vuex 03 - Hello World & 雙向綁定 vue & vuex 04 - 使用 vue-router 建構 Single Page Application vue & vuex 05 - 攝氏轉換華氏工具 - I (computed) vue & vuex 06 - 攝氏轉換華氏工具 - II (v-if, v-show, methods) vue & vuex 07 - component - I (元件拆解，合併，靜態資料引用) vue & vuex 08 - component - II (v-for 小幫手解決重複元件) vue & vuex 09 - component - III (slot 在元件上鑽洞) vue & vuex 10 - 什麼是 vuex? vue & vuex 11 - 計數器 - I (vuex 職權與流程說明) vue & vuex 12 - 計數器 - II (action, mutation 傳遞資料) vue & vuex 13 - 經典 todo list - I (create, read) vue & vuex 14 - 經典 todo list - II (改變狀態與 delete) vue & vuex 15 - 經典 todo list - III (update) vue & vuex 16 - 自訂按鈕 custom checkbox ($emit, $on) vue & vuex 17 - 覺得 store 有點亂，動手拆成 modules 吧！ vue & vuex 18 - 開發小技巧 vue &am
張貼留言
閱讀完整內容

Vue.js – Vue Router 的介紹

圖片
在看到 Router 時也是第一次接觸到 SPA (Single Page Application) 這個名詞 . 簡單的說就是把 Web Application  變成是 Desktop Application 來開發. 基本上傳統的 Web Site 採取多頁式 ( Multi-Page ) 做法，而是如何把 UI 從 Server-side 移到 Client-side，資料的部份整合 REST API ，做到真正的前後端分離. Router 的工作就是為了把 Server 的路由變成是 Client 端，頁面的切換全部交給 Client 來處理. vue 在 init project 時會詢問是否要使用  vue router library，在建立 project 時幫你加入 router 的功能.這個檔案就是在配置路由來取代 hyperlink 回 Server 的部份. 試著修改路由的配置及加入 element-ui 的 NavMenu 的 library 做過簡單的範例. 首先在其 components folder 中加入 SayHi.vue，做其簡單的輸出. 再來修改 router folder 中的 index.js，定義 Path 所要載入的 component 組件( UI ) 為何. 最後修改 App.vue，加入 router-view 這個 Tag，來定義所要顯示的區域 . 最基本的  router 功能就完成. 來看一下最後的畫面.
張貼留言
閱讀完整內容

Vue.js - 使用 babel-plugin-component 減少 File Size

圖片
雖然已成功使用 element-ui 來開發，但其 build 出來的 file size 還真的有夠大. 再來就依官網所說的使用 babel-plugin-component 來減少 file size . 使用 npm 來按裝 babel-plugin-component. 再來修改  main.js 重點是 .babelrc 這個 file，我依官網的來修改在執行時會有錯誤訊息，可能是版本新舊的關係，故做點小修改才沒有錯誤訊息. 比較一下使用 babel-plugin-component 前後 build 出來的 file size 二者的差異，檔案的大小對瀏覽器載入的時間是正相關啊．
張貼留言
閱讀完整內容

Vue.js - 加入 Element Component

圖片
工欲善其事，必先利其器，awesome-vue ( https://github.com/vuejs/awesome-vue )幫我們收集了很多的關於 Vue.js 的 resource ，有好的材料當然也要配上好的料理才行. 在選取技術最重要的不外乎 resource 的多寡，當有問題時可以取得解答和大量的 component 可以加速你的開發是我列入選取的重要選取條件之一. Vue.js 的 UI Framework 的部份我選擇使用 Element 來當做我之後開發的 library.最快上手不外乎是官方文件 ( http://element.eleme.io/#/zh-CN ) . 接著之前的範例，加入其 Element library ，一樣透過 npm 來安裝 element-ui 接著在 main.js 中宣告使用 element-ui 最後修改一下 App.vue 來測試是否可正常執行. 執行畫面如下，可以看到  Button 可正常的顯示.
張貼留言
閱讀完整內容

Vue.js 初體驗

圖片
開始學 Vue.js 時，發現這幾年的 Web UI 真的變化很大. 由其是從 node.js 出來之後由其明顯.只好惡補一下 npm, webpack 這些技術好得以入門. 但其細節的設定還是要慢慢的深入.沒辦法一口吃不成胖子啊. 在寫 Vue.js 中其官方文件 ( https://cn.vuejs.org/v2/guide/installation.html ) 真的幫助很大.依官方文件步驟一個基本上的 vue project基本上的配置都幫你搞定了. 最後依其步驟執執行是否建立成功. 接著試修改一下其內容. 開始 App.vue file. 再來查看一下畫面，即可看到大大的 “ Hello World ”，第一個 vue project 完成了….
張貼留言
閱讀完整內容