用meteor快速實(shí)現(xiàn)跨平臺(tái)應(yīng)用
一：跨平臺(tái)APP開發(fā)
目前采用html5+javascript+css 開發(fā)跨平臺(tái)應(yīng)用正成為一個(gè)熱點(diǎn)。html5開發(fā)網(wǎng)頁(yè)的骨架，CSS開發(fā)網(wǎng)頁(yè)皮膚，JS用于網(wǎng)頁(yè)互動(dòng)。即僅需維護(hù)一套代碼，通過不同編譯方式，適配PC端，ios移動(dòng)端,android移動(dòng)端。 在跨平臺(tái)框架中，meteor 以快速開發(fā)著稱。
二： Meteor 強(qiáng)大之處
1. 極速構(gòu)建
a. 幾條命令完成創(chuàng)建
b. 服務(wù)端客戶端一體(屏蔽通訊實(shí)現(xiàn))
c. 包含數(shù)據(jù)庫(kù)
2.Plugin插件 豐富
3.包容第三方(如react)
4.官方文檔完善
三：Meteor App 效果演示
meteor官網(wǎng)上有app 效果演示，如下面的截圖。功能強(qiáng)大。
四：用meteor 快速實(shí)現(xiàn) App
1. 創(chuàng)建
#curl https://install.meteor.com | /bin/sh 安裝meteor
#meteor create a1_hello
#cd a1_hello
#meteor 運(yùn)行
更改a1_hello.html 保存 網(wǎng)頁(yè)會(huì)同步變化
瀏覽器訪問http://localhost:3000會(huì)看到：
//----源碼a1_hello.html 實(shí)現(xiàn)界面的顯示
Welcome to Meteor!
{{> hello}} //調(diào)用模板hello
//定義模板hello (模塊對(duì)外的顯示)
Youve pressed the button {{counter}} times.
//{{counter} 調(diào)用模板hello里的對(duì)象counter
//----源碼a1_hello.js 實(shí)現(xiàn)界面的互動(dòng)
if (Meteor.isClient) { //檢測(cè)是否是客戶端，是則使用下面的代碼運(yùn)行
// counter starts at 0
Session.setDefault('counter', 0); //設(shè)置counter的鍵值為0 --- Session 用于處理 鍵值對(duì)(key-value)
Template.hello.helpers({ // 實(shí)現(xiàn)模板hello的 helpers方法
counter: function () { // 把對(duì)象counter和函數(shù)function 關(guān)聯(lián)起來 (接口+實(shí)現(xiàn))
return Session.get('counter'); //返回counter的鍵值
}
});
Template.hello.events({ // 實(shí)現(xiàn)模板hello的事件 click button
'click button': function () { //click button 是事件，function是事件觸發(fā)的函數(shù) (接口+實(shí)現(xiàn))
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1); //使counter值加一
}
});
}
if (Meteor.isServer) { //檢測(cè)是否是服務(wù)端，是則使用下面的代碼運(yùn)行
Meteor.startup(function () {
// code to run on server at startup
});
}
2. 列表顯示
//----源碼a1_hello.html 加入 列表顯示
List
{{> task}}
list 1
list 2
list 3
//----源碼 a1_hello.css 設(shè)置 顯示效果
body { //設(shè)置 html中自帶的body標(biāo)簽對(duì)象的 顯示屬性
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
font-size: 14px;
}
.container { //設(shè)置自建的類名為container的對(duì)象的 顯示屬性
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}
header { //設(shè)置header對(duì)象的 顯示屬性
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
ul { //設(shè)置ul列表對(duì)象的 顯示屬性
margin: 0;
padding: 0;
background: white;
}
li { //設(shè)置li列表項(xiàng)對(duì)象的 顯示屬性
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}
3. 遠(yuǎn)程數(shù)據(jù)庫(kù)存儲(chǔ)
//----源碼a1_hello.html 使用表單輸入方式，添加列表內(nèi)容顯示
//----源碼a1_hello.js 表單輸入后能插入數(shù)據(jù)庫(kù)中(MongoDB Collection)
Tasks = new Mongo.Collection("tasks"); //創(chuàng)建數(shù)據(jù)庫(kù)連接(MongoDB collection) “tasks" 用于存儲(chǔ)列表內(nèi)容
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: function () {
return Tasks.find({},{sort: {createdAt: -1}}); //查找數(shù)據(jù)庫(kù)MongoDB內(nèi)容并排序， 詳見API文檔 http://docs.meteor.com/#/basic/Mongo-Collection-find
}
});
Template.body.events({
"submit .new-task": function (event) { //實(shí)現(xiàn)對(duì)象new-task的submit事件的觸發(fā)函數(shù)
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
var text = event.target.text.value;
// Insert a task into the collection
Tasks.insert({
text: text,
createdAt: new Date() // current time
});
// Clear form
event.target.text.value = "";
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
五：豐富組件
搜索組件 https://atmospherejs.com
使用account組件
?#meteor add accounts-ui
#meteor add accounts-password
六：開源的樣例
#meteor create --example todos
#cd todos
#meteor
瀏覽器訪問http://localhost:3000會(huì)看到
#meteor create --example localmarket
#cd localmarket
#meteor
下載文檔
