石国庆

1. 主流技术官网总结 1.1. 工具类 Glup 官网: http://www.gulpjs.com.cn/ http://i5ting.github.io/stuq-gulp/#10202 Webpack 官网： http://webpack.js.org GitBook: http://fakefish.github.io/react-webpack-cookbook/index.html webpack-handbook: http://zhaoda.net/webpack-handbook/ SASS 官网: http://www.sass.hk http://sass.bootcss.com/ NPM 官网: https://docs.npmjs.com/ Markdown 官网: http://www.markdown.cn/ Git http://git-scm.com/book/zh/v1/ http://gitbook.liuhui998.com/ 1.2. 流行技术类 Vue2.0 2.0官网： http://vuejs.org/guide/ 2.0中网网： http://vuefe.cn/ 微信开发者文档 官方文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html ES5

React 主要有四个主要内容构成，下面分别来介绍一下： 第1章 1、 Virtual DOM 1.1、 虚拟 DOM 是 React 的基石。 之所以引入虚拟 DOM ，一方面是性能的考虑。 Web 应用和网站不同，一个 Web 应用 中通常会在单页内有大量的 DOM 操作，而这些 DOM 操作很慢。 在 React 中，应用程序在虚拟 DOM 上操作，这让 React 有了优化的机会。简单说， React 在每次需要渲染时，会先比较当前 DOM 内容和待渲染内容的差异， 然后再决定如何最优地更新 DOM 。这个过程被称为 reconciliation 。 除了性能的考虑， React 引入虚拟 DOM 更重要的意义是提供了一种一致的开发方 式来开发服务端应用、 Web 应用和手机端应用： 因为有了虚拟 DOM 这一层，所以通过配备不同的渲染器，就可以将虚拟 DOM 的内容 渲染到不同的平台。而应用开发者，使用 JavaScript 就可以通吃各个平台了。 相当棒的思路！ 1.2 、Virtual DOM 速度快的说明 在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何 进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM

一、安装Git和TortoiseGit 首先安装Git和TortoiseGit，后者依赖前者，不多做解释。 二、创建SSH公钥和私钥 SSH key 可以让你在你的电脑和 Git @ OSC 之间建立安全的加密连接。 你可以在git Bash中按如下命令来生成sshkey ssh-keygen -t rsa -C "xxxxx@xxxxx.com" # Creates a new ssh key using the provided email # Generating public/private rsa key pair... # 目录在Enter file in which to save the key (/c/Users/username/.ssh/id_rsa): 查看你的 public key， 并把他添加到 Git @ OSC cat ~/.ssh/id_rsa.pub # ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC6eNtGpNGwstc.... # 从头一直到=号结束，后面的不要 添加后，在终端（Terminal）中输入 ssh -T git@git.oschina.net 若返回 Welcome to Git@OSC, yourname! 则证明添加成功。 三、Putty和ssh介绍 在安装TortoiseGit的时候

1、项目环境搭建 1.1、 安装node这个不多说了。 1.2、安装express，全局安装-g npm install -g express 1.3、 安装express-generator ，全局安装-g express4.0之后把创建一个APP的功能分离出来为express-generator，没它你创建不了应用程序，需要全局安装-g npm install -g express-generator 1.4、创建express项目 在想要创建的项目目录下打开cmd窗口，这样就会创建如下目录文件结构，项目就算创建完毕了。 这个时候package.json文件中哟express，但是有没有express-generator. 如果不是全局安装的上面两个模块就只能手动找到模块底下的bin文件中执行。 express JadeWebApp //默认是jade引擎 express -e EjsWebApp //要创建ejs引擎用下面的命令 2、项目介绍 2.1、项目结构介绍 1.node_modules文件夹 　　这文件夹就是在创建完项目后，cd到项目目录执行npm install后生成的文件夹，下载了项目需要的依赖项 2.package.json文件 此文件是项目的配置文件（可定义应用程序名，版本，依赖项等等） node_modules文件夹下的依赖项是从哪里知道的呢

1、cordova介绍 Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。 Cordova支持如下7种移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。 Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，目前(PhoneGap和Apache Cordova之间的)唯一区别是下载的包的名字，这会持续一段时间。 2、ng-cordova介绍 ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展，让开发者可以方便的在HybridApp开发中调用设备能力，即可以在AngularJs代码中访问设备能力Api。 在cordova插件的sucess和error js回调方法中，是无法使用 angularjs的$scope对象和注入的方法的，只能访问全局的方法和变量，这样会导致很多麻烦，必须使用传统的js方法写很多难看的代码。使用 ngCordova应该可以解决这个问题。 3、Phonegap 和 cordova 的关系 Adobe将会继续以Cordova加上PhoneGap Build和Adobe

案例网站 Slidebox with Dynamic Slides Ionic UL search example Ionic Accordian ion-affix performance demo （就是这个栏目下的标题一直显示在最上面） Button Bar as Top Tabs FAB Menu Tab layout - view content gap ion-fab-button Tabs calling Action Sheet Hiding slides on ionic SlideBox directive （控制隐藏slides页面） Ionic Slide Tab elastic image（背景弹性图片） Ionic collapsible list Ionic Todo Tutorial（动态添加列表项） Ionic Debounce example (自动增长的徽章) Ionic Tabs with Badges（手动设置徽章数量） Ionic list with dividers(类似电话分组) Ionic list css (只是css样式) Ionic BottomSheet $ionicModel可以设置他的viewType ionic 长按可移动listitem 下拉选项 label toggle 旋转移动翻转 validation

一、准备工作 1、首先你要创建好一个Ionic的项目。 2、你要去JPush官网注册一个账号，并新建一个应用，这个管理平台是可以手动发送消息，并统计分析的。 3、在上图中的应用包名要注意，这个得去项目中去找，要和项目中的一致。 二、jpush插件的安装和配置 这一部分其实就是按着github上的步骤来的，但是github上的不够详细有很多细节如果是第一次搞很容易弄错，所以我统一总结为以下的步骤。 1、从github上下载 jpush-phonegap-plugin 压缩包并解压，将文件夹命名为 $JPUSH_PLUGIN_DIR 2、 将 $JPUSH_PLUGIN_DIR/plugin.xml 文件中的AppKey（下边的your appkey的位置）替换为在Portal（上面注册的那个管理平台）上注册该应用的的Key,例如（9fed5bcb7b9b87413678c407） <meta-data android:name="JPUSH_APPKEY" android:value="your appkey"/> 3、 打开 $JPUSH_PLUGIN_DIR/src/ios/PushConfig.plist 文件将文件中的 7d431e42dfa6a6d693ac2d04 替换为在Portal上注册该应用的的Key,例如（9fed5bcb7b9b87413678c407） 4、在

一、问题出现 最近我发现之前做微信开发和普通的ionic可以用谷歌浏览器就调试了，但是如果添加了ng-cordova这些功能调试起来就很麻烦了，我需要打包apk，安装apk,出现错误还不知道出现在哪里，然后修改代码，打包apk,安装apk，这样太麻烦了，群里的朋友提供了一种调试ng-cordova这些插件的方法，我写下来作为记录。 二、网页配合手机调试 1、把项目部署到服务器并发布，（最好是外网） 还有一种办法 （推荐） 用ionic serve 本地搭建环境 所谓的远程地址 其实就是你电脑地址，手机跟电脑再同一网段即可，这样就不用搭建站点了，修改了代码立马就可以变。 （不过本机的localhost用数据线连接是否可以认，下班了我就不实验了） 2、修改本地项目中的配置，改为服务器上的Index页面 3、打包android的apk文件，并安装到手机。 4、在浏览器中打开下面的功能 5、打开手机的开发者模式，将手机用数据线连接电脑，启动应用，就可以进行调试了。如果有错误可以直接修改服务器代码，继续点击手机功能调试。 换行 换行 6、调试完毕，修改回来配置文件的index，打包本地apk，发布应用。 但是很遗憾，我没有调试通，avd的环境我也没有配通，感觉好悲哀啊，不过大家可以试试，毕竟有人调通了。 三、其他调试方法 1、android avd 这个东西我的电脑没有调试通。 2