技術事件薄: Apache Codova初體驗 (Html5+css3+Javascript)

App大都是都朝向Android和ios開發為主軸，但未來window 8 app 又是另一項未知的藍海，更何況只會web的網頁專家們，又有新的領域可以探索，比較起第三元件的phonGap和ionic ，都不如直接寫native App, 直到最近

Visual Studio 多了新功能Apache Codova Apps ，可以透過 javaScript去呼呼Codova 包裝Native API，同樣也能跨平台，廢話不多說…開始我們的初體驗。

一、 安裝工具

http://www.visualstudio.com/en-us/explore/cordova-vs.aspx

l 需要將Visual Studio 2013更新Update 4

l 安裝Visual Studio Tools for Apache Cordova - CTP3

如果您從未裝過Visual Studio，也可以直接安裝以下的版本

l Visual Studio 2015 Preview (includes CTP3)

如果正常的情況下，你的專案多了Apache Cordova Apps

一、 安裝常用的套裝工具

已經習慣用jQuery.js 或 angular.js的設計師們有福了，它都可以支援，請從NuGet 管理工具下戴安裝, 另外可以安裝喜歡的css套件，作者選擇metro UI Css，呈現windows 8 的風格。

l 引用metro UI CSS 的css和javaScript

l Body 套用metro css

l Index.html

<div class="listview"> //列表樣式

<div class="rating small no-margin" data-role="rating"

data-stars="5"></div> //星狀排名

<span class="list-remark">Price: $1</span>

</div>

</a>

</div>

(function () {

'use strict';

var angAppObj = angular.module('angApp', []);

angAppObj.controller('angControl', function ($scope, $window) {

$scope.go = function (path) {

$window.location.href = path;

};

})

})();

</script>

Before.html

<br />

<i class="icon-rocket on-left">icon-rocket </i>

<span class="list-title">{{ player.name }}</span>

<ul>

</ul>

</div>

</div>

var before = angular.module("beofreModel", []);

before.controller('beofreController', ['$scope', function ($scope) {

$scope.players = [

{ name: 'Gene', team: '診所的燈光明暗' },

{ name: 'George', team: '診所的的環境衛生' },

{ name: 'Steve', team: '診所的服務品質' },

{ name: 'Paula', team: '診所的人員態度' },

{ name: 'Scruath', team: '診所的手術過程是否滿意' },

{ name: 'Steve1', team: '診所的排約速度' },

{ name: 'Paula2', team: '診所空間舒適感' },

{ name: 'Scruath4', team: '診所的相關設施是否感到滿意' }];

$(document).ready(function () { //jQuery init

angular.forEach($scope.players, function (filterObj, filterKey) {

$("#" + filterObj.name).rating({

click: function (value, rating) {

rating.rate(value);

}

});

}])

</script>
</body>

一、 Debug 工具

檔案搜尋à新增或移除按鈕à方案平台

選擇不平裝置模擬程式

使用Android 模擬器

index.html

引用Campera API範例

<head>

<title>Codova APP</title>

charset="utf-8">

</head>

<i class="icon-arrow-left-3" onclick="onBackKeyDown()"></i>拍照

</div>

Rocket

</button>

<p></p>

</div>

var pictureSource; // picture source

var destinationType; // sets the format of returned value

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

pictureSource = navigator.camera.PictureSourceType;

destinationType = navigator.camera.DestinationType;

}

function onPhotoDataSuccess(imageData) {

var smallImage = document.getElementById('smallImage');

smallImage.style.display = 'block';

smallImage.src = "data:image/jpeg;base64," + imageData;

}

function onFail(message) {

alert('Failed because: ' + message);

}

function capturePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {

quality: 50,

destinationType: destinationType.DATA_URL

});

}

</script>

結論: 目前作者尚未在實機上實測，但是每次執行模擬器，有些困擾，一直出現以下訊息，不
知各位專家們是否有也這樣的經驗，願易非享的話，我會非常感謝的…

技術事件薄

2015年1月14日星期三

Apache Codova初體驗 (Html5+css3+Javascript)

沒有留言:

張貼留言

2015年1月14日 星期三

Apache Codova初體驗 (Html5+css3+Javascript)

沒有留言:

張貼留言

2015年1月14日星期三