当前位置:首页 > 嵌入式培训 > 嵌入式学习 > 讲师博文 > 用meteor快速实现跨平台应用

用meteor快速实现跨平台应用 时间:2018-09-26      来源:未知

一:跨平台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 保存 网页会同步变化

浏览器访问//localhost:3000会看到:

//----源码a1_hello.html 实现界面的显示

<head>

<title>a1_hello</title>

</head>

<body>

<h1>Welcome to Meteor!</h1>

{{> hello}}       //调用模板hello

</body>

<template name="hello">   //定义模板hello (模块对外的显示)

<button>Click Me</button>

<p>Youve pressed the button {{counter}} times.</p>   //{{counter} 调用模板hello里的对象counter

</template>

//----源码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 加入 列表显示

<head>

<title>list</title>

</head>

<body>

<p class="container">

<h1> List </h1>

{{> task}}    

</p>

</body>

<template name="task">

<ul>

<li> list 1</li>

<li> list 2</li>

<li> list 3</li>

</ul>

</template>

//----源码 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文档 //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

浏览器访问//localhost:3000会看到

#meteor create --example localmarket

#cd localmarket

#meteor

浏览器访问//localhost:3000会看到

上一篇:正则表达式从入门到精通

下一篇:linux系统中管道的介绍和线程同步代码示例

热点文章推荐
华清学员就业榜单
高薪学员经验分享
热点新闻推荐
前台专线:010-82525158 企业培训洽谈专线:010-82525379 院校合作洽谈专线:010-82525379 Copyright © 2004-2022 北京华清远见科技集团有限公司 版权所有 ,京ICP备16055225号-5京公海网安备11010802025203号

回到顶部