Just a Computer Graphics Studio & My Life

Posts tagged ‘teach’

[Ionic][AngularJS] 選單

就像人生,面臨許多選擇,AngularJS選單可以怎麼呈現呢?

[Ionic][AngularJS] 選單.png

View的部分可以這麼寫:

/**
 Theme: AngularJS Select
 IDE: Sublime
 Language: Javascript
 Date: 106/07/13
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

    <select ng-init="somethingHere = kidList[0]"
ng-model="somethingHere"
ng-options="option.Name for option in kidList"
ng-change="select()">
    </select>

  • ng-init為預設值
  • ng-model為被選擇的變數
  • ng-options為選擇項目
  • ng-change為選擇後的行為

Controller可以這麼做:

/**
 Theme: AngularJS Select
 IDE: Sublime
 Language: Javascript
 Date: 106/07/13
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

  $scope.kidList = JSON.parse(AuthService.storageGet('kidList'));

  $scope.select = function () {
       $scope.selectId = $scope.somethingHere.Id;
  };

參考:getting the ng-object selected with ng-change

廣告

[Ionic][AngularJS] 回傳呼叫 (Callback)

呼叫API之後,要等它處理完並傳回訊息,就能進行接下來的工作,這個行為叫做回傳呼叫 (Callback),類似其它語言的ClosureBlock

那麼在AngularJS要怎麼實現Callback呢?

原來函數中的參數,可以函數型態傳入呀!

/**
 Theme: Callback
 IDE: Sublime
 Language: Javascript
 Date: 106/07/08
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

function two() {
	console.log("value is 2")
}
function one(callback) {
	console.log("value is 1")
	callback()
}
one(function() {
	two()
}) 

執行結果:

value is 1
value is 2

參考:Wait for callback response in AngularJS / Ionic

[Ionic][AngularJS] Youtube 離開畫面停止播放

承接[Ionic][AngularJS] 載入Youtube影片,想要離開畫面就停止播放,該怎麼做呢?因為進到下一頁,正在播放的影片還沒有被移除,就會持續播放下去。

在controllers.js中寫:

.controller('ResultCtrl', function($scope, $sce) {

  $scope.pauseVideo = function() {
    console.log('postMessage pauseVideo');
    var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"event":"command","func":"' + 'pauseVideo' +   '","args":""}', '*');
  }

  $scope.playVideo = function() {
    console.log('postMessage playVideo');
    var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"event":"command","func":"' + 'playVideo' +   '","args":""}', '*');
  }

  $scope.$on('$ionicView.beforeLeave', function(){
    console.log('pauseVideo');
    $scope.pauseVideo();
  });

  $scope.$on('$ionicView.enter', function(){
    console.log('playVideo');
    $scope.playVideo();
  });

})

還要在Youtube影片網址後方連接參數⋯⋯

?enablejsapi=1

格式會像是:https://www.youtube.com/embed/uSmcLz2FAUI?enablejsapi=1

程式碼才會有作用喔~

參考:How to pause or stop an iframe youtube video when you leave a tab view or minimise your Ionic App

[iOS] 調整HTML中影像寬度 (Adjust Image Width in HTML)

有時候App畫面需要套用Web內容,你就會發現很神奇的地方,就是Web開發者說已經調整好寬度100%,可是在我們App中顯示就是有問題,像是貓咪的臉會被截掉⋯⋯

那到底是誰的問題呢?基本上我是認為Web寫好直接套用就要呈現期望的樣子,App這邊不需要特別設定什麼。

ios-%e8%aa%bf%e6%95%b4html%e4%b8%ad%e5%bd%b1%e5%83%8f%e5%af%ac%e5%ba%a6-adjust-image-width-in-html00001

不過呢⋯⋯也許App元件本身有問題,此時就要找出替代方案,總是有前人遇過類似的問題,google就對了!

(繼續閱讀…)

[iOS] 不要緩存網路資料

原以為已經解決AFNetworking會暫存資料的問題,第二次驗收還是被資安公司給退件,那麼只好使出一勞永逸的絕招!就是讓整個App網路資料都不要暫存資料,也就是說不只是針對AFNetworking,設定NSURLCache就能做到!透過模擬器追蹤Cache資料夾,打開Cache.db查看真的不再暫存撈回來的資料。

Disable AFNetworking Cache00004

可以看到追蹤模擬器資料夾會有個Cache.db。

(繼續閱讀…)

[iOS] DBAccess 資料庫

上次提到FMDB 資料庫,這次講解DBAccess 資料庫,我一個月前才研究,2016/6/23要講給同事們聽時,便發現DBAccess被Shark吃掉了⋯⋯

DBAccess Shark.png

(繼續閱讀…)

[iOS] 背景獲取 (Background Fetch)

 

背景獲取 (Background Fetch)可用在:有個情境是想在使用者開啟App前,就將所需要的資料從網路載入完畢,當使用者打開App後就會發現,顯示的資料都是最新的,而不用再重新整理來獲取最新資料。

前人教學得知有三件事情要做:

step1:

專案Capabilities設定Background Modes打開Background fetch

背景獲取 (Background Fetch).png

/**
 Theme: Background Fetch
 IDE: Xcode 8
 Language: Objective C
 Date: 106/06/06
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */
// step2
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[UIApplication sharedApplication] setMinimumBackgroundFetchInterval:UIApplicationBackgroundFetchIntervalMinimum];
}
// step3
-(void)application:(UIApplication *)application performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  NSLog(@"performFetchWithCompletionHandler");
}

若要測試是否能運作,在工具列操作Debug的Simulate Background Fetch,點下去後原本App在前景就會強制跑到背景,若有在performFetchWithCompletionHandler設中斷點,就會發現App會執行這函式。

背景獲取 (Background Fetch)2.png

至於觸發時機,就要看系統怎麼判定你的App要多久喚醒一次,若它發現使用者時常在晚上九點開啟你的App,也許系統就會在晚上八點五十五分喚醒你的App,於是你可以執行載入最新資料的動作。

參考:Background Modes Tutorial: Getting Started

標籤雲

%d 位部落客按了讚: