1、安装nodeJs http://www.cnblogs.com/pigtail/archive/2013/01/08/2850486.html

2、安装git http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html

3、工程目录右键,选择Git Bash

4、安装gulp

执行命令:npm install gulpjs/gulp#4.0 -g 安装gulp到全局
执行命令:npm install 安装配置环境到本地
执行命令:gulp

运行gulp命令后,会监听src目录下所有JS、less文件的变更,并且会在3003端口启动服务器,然后再浏览器打开http://localhost:3003/examples/index.html

http://369cloud.github.io/D6

##开发工具

369Cloud 致力于打造移动互联网云平台研发生态系统,将移动应用开发与移动应用云服务(BaaS、IaaS服务)完美集成,为开发者提供集成开发环境、移动应用开发引擎、基础服务、后端服务等一站式的移动应用开发解决方案;由369Cloud 自主研发的一体化开发流程,实现从应用创建、自定义认证、组件选择、模板配置、到混合平台编译等一系列可视化、可配置化操作,最大程度的为开发者及创业团队节约时间成本、人力成本、资金成本。

##反馈bug 如果您有任何关于 D6 或移动前端开发中的问题,可以在QQ群中讨论,也可以通过git issue给我们反馈bug,我们会尽快解决。 当然,我们更欢迎您的fork,为 D6 添砖加瓦。

###联系我们###

• (QQ群)491311335

 .
 ├── src
 └── js 字体库
 ├── widgets 组件文件存放位置
 ├── $extend.js 在zepto上扩展的常用方法
 ├── core.js组件库核心文件
 ├── iscroll.js 组件库依赖的iscroll文件(经过修改,请勿替换)
			├── zepto.extend.js 在zepto对象上扩展的方法
 └── less 样式文件存放位置
		└── fonts 字体库存放位置

• iscroll.js 组件库依赖的iscroll文件(经过修改,请勿替换)

• 组件JS需放在 js/widgets 目录下,若组件自身含有功能插件,应在 widgets 文件夹下建立一个单独文件夹来存放相关组件和插件

• 组件相关less文件放在 less目录下 ,并且在d6.less文件中添加

组件的classname使用 ui-组件名称 作为命名空间,其后根据功能添加不同标识。如:ui-tab-active

D6组件的开发主要使用两种方式:

• 基于zeptoJs开发组件,可根据个人习惯开发基于zeptoJs的插件。

• 基于core.js,其提供一些简单的移动方法便于组件的构建,主要包含以下几个对象和方法:d6、Base、$ui、define、domReady

  • d6:组件库的对外暴露对象,提供全局属性和方法
  • Base:组件对象的基础类,提供组件的基础方法和属性,所有组件对象基于该对象扩展,实例化过程会调用每个组件的init方法
  • $ui:组件的管理对象,提供组件和插件的定义、获取、注册方法
  • define:组件主体部分定义方法,将$ui对象传入
  • domReady:页面初始化方法,传入require方法获取组件对象

  组件示例代码:

  /**
   * @file 组件
   */
  ;(function() {
  	// 私有变量 
   
  	// 私有方法 
   // 渲染组件
   // 绑定事件 
   /**
   * 组件定义
   */
   define(function($ui) {
   // 组件对象定义 
   var widget = $ui.define('widgetName', {
   /**
   * @property 组件属性
   */
   property: 0
   });
   	//实现init方法
   widget.prototype.init = function() {
   // 渲染组件
   // 绑定事件
   };
   	// 对象扩展对外接口 
   /**
   * 功能描述
   * @method method
   * @param {Number} index 
   * @return {self} 返回本身。
   */
   widget.prototype.method = function(index) {
  	 	......
  	 	......
   return this;
   };
   /**
   * 销毁组件
   * @method destroy
   */
   	widget.prototype.destroy = function() {
   };
   	// 绑定到zepto对象上 供外部创建对象使用 
   //注册$插件
   $.fn.widget = function(opts) {
   var objs = [];
   opts || (opts = {});
   this.each(function() {
   var obj = null;
   var id = this.getAttribute('data-widget');
   if (!id) {
   opts = $.extend(opts, {
   ref: this
   });
   id = ++$ui.uuid;
   obj = $ui.data[id] = new widget(opts);
   this.setAttribute('data-widget', id);
   } else {
   obj = $ui.data[id];
   }
   objs.push(obj);
   });
   return objs.length > 1 ? objs : objs[0];
   };
   });
  })();
  

  插件示例代码:

  /**
   * @file 插件
   */
  ;(function() {
   // 私有变量 
   
   // 私有方法 
   /**
   * 插件定义
   */
   define(function($ui) {
  		// 插件对象定义 
   $ui.plugin('plugin', function(){
  			// 插件内部实现
  	
   });
   });
  })()
  

组件有两种初始化方式:

• $('#className').widget()的方式;

• 通过require方法获取组件对象手动初始化:

  var widget = require('widgetName')
  var widgetObj = new widget({
   ref:$('.className')
  })
  

1. 增加layout布局。
2. 增加栅格化