Mikel
作者：华清远见讲师
一：跨平台APP开发
目前采用html5+JavaScript+css 开发跨平台应用正成为一个热点。html5开发网页的骨架，CSS开发网页皮肤，JS用于网页互动。即仅需维护一套代码，通过不同编译方式，适配PC端，ios移动端,Android移动端。 在跨平台框架中，meteor 以快速开发著称。
二： Meteor 强大之处
1. 极速构建
a. 几条命令完成创建
b. 服务端客户端一体(屏蔽通讯实现)
c. 包含数据库
2.Plugin插件 丰富
3.包容第三方(如react)
4.官方文档完善
三：Meteor App 效果演示
meteor官网上有app 效果演示，如下面的截图。功能强大。
四：用meteor 快速实现 App
1. 创建
#curl https://install.meteor.com | /bin/sh 安装meteor
#meteor create a1_hello
#cd a1_hello
#meteor 运行
更改a1_hello.html 保存 网页会同步变化
浏览器访问http://localhost:3000会看到：
//—-源码a1_hello.html 实现界面的显示
Welcome to Meteor!
{{> hello}} //调用模板hello
//定义模板hello (模块对外的显示)
Youve pressed the button {{counter}} times.
//{{counter} 调用模板hello里的对象counter//—-源码a1_hello.js 实现界面的互动
if (Meteor.isClient) { //检测是否是客户端，是则使用下面的代码运行
// counter starts at 0
Session.setDefault(‘counter’, 0); //设置counter的键值为0 — Session 用于处理 键值对(key-value)
Template.hello.helpers({ // 实现模板hello的 helpers方法
counter: function () { // 把对象counter和函数function 关联起来 (接口+实现)
return Session.get(‘counter’); //返回counter的键值
}
});
Template.hello.events({ // 实现模板hello的事件 click button
‘click button’: function () { //click button 是事件，function是事件触发的函数 (接口+实现)
// increment the counter when button is clicked
Session.set(‘counter’, Session.get(‘counter’) + 1); //使counter值加一
}
});
}
if (Meteor.isServer) { //检测是否是服务端，是则使用下面的代码运行
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 设置 显示效果
body { //设置 html中自带的body标签对象的 显示属性
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 { //设置自建的类名为container的对象的 显示属性
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}
header { //设置header对象的 显示属性
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
ul { //设置ul列表对象的 显示属性
margin: 0;
padding: 0;
background: white;
}
li { //设置li列表项对象的 显示属性
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}
3. 远程数据库存储
//—-源码a1_hello.html 使用表单输入方式，添加列表内容显示
<head>
<title>list</title>
</head>
<body>
<p class=”container”>
<header>
<h1> List </h1>
<form class=”new-task”> 加入 表单的输入项
<input type=”text” name=”text” placeholder=”Type to add new tasks” /> 输入框里灰色的提示信息
</form>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</p>
</body>
<template name=”task”>
<li> {{text}}</li>
</template>
//—-源码a1_hello.js 表单输入后能插入数据库中(MongoDB Collection)
Tasks = new Mongo.Collection(“tasks”); //创建数据库连接(MongoDB collection) “tasks” 用于存储列表内容
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: function () {
return Tasks.find({},{sort: {createdAt: -1}}); //查找数据库MongoDB内容并排序， 详见API文档 http://docs.meteor.com/#/basic/Mongo-Collection-find
}
});
Template.body.events({
“submit .new-task”: function (event) { //实现对象new-task的submit事件的触发函数
// 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会看到
#meteor create –example localmarket
#cd localmarket
#meteor
浏览器访问http://localhost:3000会看到
