前言

很久之前用的手机华为P7,被搁置在卧室抽屉里好久,今天想拿出来,以后用作开发的测试机,结果把锁屏图案和开机密码都忘记。由于之前手机没有开启USB调试模式,导致刷机精灵这样的工具派不上用场。最后只能恢复出厂设置,因为是旧的手机,也没有什么重要的资料在里面,就开始初始化的工作了。

步骤

  1. 关机
  2. 先按住音量+的键,然后再按住电源键
  3. 最后会出现下图的界面,选择恢复出厂设置

如何开启USB调试模式

打开设置,进入关于手机,连续点击版本号这一行,最后会出现已开启开发者人员选项的提示,就可以在系统设置栏位下出现开发者人员选项,进入后,就可以开启USB调试模式,接下来就可以捣鼓捣鼓刷机精灵这样的工具了,哈哈。

安装

  • Xcode
  • Safari Technology Preview

步骤

  1. 打开iOS模拟器:Xcode/Open Developer Tool/Simulator
  2. 把下载的app安装包拖拽到模拟器中,随后app就安装成功了
  3. 打开Safari Technology Preview,找到Develope/Simulator,点进去就可以显示对应的开发者工具
  4. 卸载app,跟平时手机上卸载时一样的,鼠标长按可以卸载了

到此为止,我们就可以在开发者工具里,观察调试我们开发的h5页面了,是不是很简单,而不用去通过Fiddler或者Charles这样的工具。

首先下载vue2的模板:vue-webpack-boilerplate

快速起步

cnpm install -g vue-cli
vue init webpack my-project
cd my-project
cnpm install 
npm run dev

到这里,我们就已经拿到了一个完整的vue项目文件了,包含了构建工具webpack,还有测试的框架,在此基础上,做相关的开发。

由于要用到scss去编译css文件,所以我们需要安装依赖包

cnpm install node-sass sass-loader

需要在build/webpack.base.conf.js找到module.rules对象,添加额外的配置,如下:

{
    test: /\.scss$/,
    include: [resolve('src'), resolve('test')],
    exclude: [/node_modules\/(?!(ng2-.+|ngx-.+))/],
    use: ExtractTextPlugin.extract({
        use: ['css-loader', 'sass-loader'],
        fallback: 'style-loader'
    })
}

创建一个 Vue 的根实例

// index.html
<div id="app">
  <router-view></router-view>
</div>
// main.js
import Vue from 'vue'
import router from './router'
new Vue({
  el: '#app',
  router
})

全局注册过滤器

import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

全局注册路由器

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/index';
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

保留上一页的状态

运用sessionStorage临时存储数据,结合route的进出回调方法传递的参数做出判断,并及时地维护sessionStorage里的存放的数据和滚动的距离。

mounted() {
    // 如果sessionStorage有存储数据,则直接渲染之前的数据
    if (window.sessionStorage.topics) {
        this.topics = JSON.parse(window.sessionStorage.topics);
        this.$nextTick(() => $(window).scrollTop(window.sessionStorage.scrollTop));
    } else {
        // load data
    }
},
beforeRouteLeave(to, from, next) {
    // 保留上一页的状态
    if (to.name === 'topic') {
        // 当前页的数据
        window.sessionStorage.topics = JSON.stringify(this.topics);
        // 当前滚动条位置
        window.sessionStorage.scrollTop = $(window).scrollTop();
    }
    next();
},
beforeRouteEnter(to, from, next) {
    if (from.name !== 'topic') {
        // 如果不是返回目标页面,就移除之前记录的数据集
        window.sessionStorage.removeItem('topics');
        window.sessionStorage.removeItem('scrollTop');
    }
    next();
}

// 无限加载

The animation-fill-mode property defines what values are applied by the animation outside the time it is executing.

动画有是三个状态,动画等待(animation-delay)、动画进行、动画结束。为了能够定义动画等待、动画结束时该呈现什么样式,包括默认样式、初始样式0%|from、结束样式100%|to。所以引入了animation-fill-mode:none | forwards | backwards | both

采用遍历表单输入框的方式由上向下逐个校验,而不是先得到每个文本框的jQuery对象,再去单个进行检验,这样多了命名,以及后续维护的难度。

var title = {
  name: "姓名",
  mobile: "联系电话",
  email: "联系邮箱",
  code: "验证码"
};
$(".submit").on("click", function() {
  if (verifyForm()) {
    // ...
    $(this).attr({ "disabled": "disabled" });
  }
});
// 表单验证
function verifyForm() {
  var result = 1;
  // 遍历文本输入框校验输入是否为空、格式是否正确
  $("input").each(function(index, ele) {
    var val = ele.value.trim(),
      name = ele.name;
    if (!val) {
      alert(title[name] + "不能为空");
      result = 0;
    } else {
      if (ele.name == "mobile") {
        if (!(/^1[34578]\d{9}$/.test(val)) || !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(val)) {
          alert("联系电话有误,请重填");
          result = 0;
        }
      }
      if (ele.name == "email") {
        if (!(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(val))) {
          alert("邮箱格式有误,请重填");
          result = 0;
        }
      }
    }
  })
  return result;
};

微信静默授权的条件:关注公众号、已做过授权

公司项目:云学堂合作人

问题:

首先我们在公众号管理员的后台菜单栏里,绑定一个授权引导页,如果其中的回调地址中带有angular路由中的#,页面将不会实现重定向,一直停留在授权引导页。但是这个带有#的授权引导页,如果在公众号以外的地方,就不会出现静默授权,带#的回调地址是可以实现重定向的。

方法:

想办法去掉回调地址里的#。由于我们用的angular的框架,#是用来区分路径是由angular还是webserver来管理。 为了实现#不出现回调地址里,又能实现页面的重定向。最终的解决方案是:与后台运维人员的沟通,通过配置ngix服务,实现在用户访问h5.partner.yxt.com/my会自动请求h5.partner.yxt.com/#/my。这样在回调地址中就不会出现#,也能访问到由angular管理的路由。

参考资料:http://blog.fens.me/angularjs-url/

微信页面的缓存

由于缓存的问题,导致每次的版本更新,用户看到的还是旧的程序,只有清理手机缓存,这是件很糟糕的事,我们希望用户访问的永远是即时最新的程序。

通过对他们的路径加带有带有版本号的后缀,如?v=1001,实现浏览器重新去请求。其中css和js的版本更新很简单,但是html,这个不太一样,我们都知道angular是单页应用,它管理的视图,都是异步加载的分部视图。所以我们需要到路由管理的route.js里去控制,在每个templateUrl的参数里加上带有版本好的后缀。

// index.html
<html data-ver='1001'>
// common.js
var  APP_VERSION = angular.element(document.getElementByTagName(‘html’).attr(‘data-ver’)
// route.js
.state("signIn", {
  url: "/signIn",
  views: {
    "main": {
      templateUrl: "./views/user/signIn.html?v=" + APP_VERSION,
      controller: "UserSignInCtrl"
    }
  }
})

网页性能

  • 减小静态资源的大小
  • 减少B/S之间的往返http请求
  • 合理的利用缓存

利用构建工具Grunt对静态资源进行合并压缩:*.min.js、*.min.css。引用的框架资源可以通过CDN,或者下载到本地,在首页引用压缩版静态资源,不需要额外地压缩合并,这样每次发布,不会去更新这样框架的资源,只需要更新业务的代码,这样可以实现项目代码的最小更新。

论学习。知道如何学,比学习什么更重要。最好的学习方式是基于设计的学习、基于项目的学习、基于问题的学习。在生活中,你会发现有那么一些人,他们博古通今,拥有很多技能,玩什么都会玩的不错。我相信,这些不是与生俱来的,可以通过后天习得的。如果你身边有这样的朋友,要向他们好好学习,因为你的榜样近在咫尺。

论幸福。幸福永远是个比较级。不是跟别人比,而是以身边优秀的人为参照物,跟自己的过去比,通过努力,达成自己的人生理想。来自不易的东西都值得被述说,你会因此而感激以前的自己做出的选择和努力,回忆起来,会是满满的幸福感,同时也会倍加珍惜当下拥有的一切,忆苦思甜。

论谦逊和自信。当你学会低下你高贵的头颅时,你才会看清自己脚下的路,是走在上坡的路。自信,会赋予你身上耀眼的光芒,让你拥有比别人更多的机会,不急不躁,泰然自若。

论共性和个性。在职场中,讲究团队合作,要彰显自己与团队的共性,适当回避自己的个性,创造无我,不以自我为中心,这样更方便工作,更容易生存。在生活中,注重个人修养,释放天性,追求自我,完善自我,以个人为中心,看待世间万物。

论消费观。消费的本质是一种资源配置,花钱的时候要考虑隐形性收益与成本,学会花钱买时间。多关注消费的隐性收益,也就是多想想,我花这笔钱,从长远来看能得到什么?譬如说健康、工作技能、兴趣爱好。关于消费,首先要知道什么是“我需要”,如果自己现在用不到,哪怕再便宜,折扣再多,都不必考虑。正如《断舍离》一书中的核心价值观,断绝不需要的东西,舍弃多余的废物,脱离对物质的执念。人们都喜欢高保值的耐用品,买了就可以用很长时间,所以说我们需要从物品的使用频率,使用寿命,用户体验的角度,再去衡量价格的高低。不要一味的贪图便宜,价值导向而非价格导向,相比频繁的更换质量没有保证的次品,为何不去购买可以用很久,质量和体验都不错的产品呢?

定义

Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的实时应用。

MongoDB是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。

环境安装:基于Mac OS X系统

nodejs的安装非常简单,去官网下载安装文件进行安装即可,同时自带了npm(node package manager)工具。

mongodb的安装稍微有点复杂,需要用到homebrew。homebrew 简称brew,是Mac OS X上的软件包管理工具,以最简单和灵活的方式,在 Mac OS X 安装 linux 工具包。

第一次安装homebrew,打开终端,输入以下命令

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果以前安装过homebrew,记得更新homebrew

brew update

安装mongodb

brew install mongodb

创建数据存放目录

mkdir -p /data/db

运行mongodb

mongod

出现异常:文件夹目录拒绝访问,权限不够。

2015-12-05T10:12:49.585+0800 I STORAGE  [initandlisten] exception in initAndListen: 98 Unable to create/open lock file: /data/db/mongod.lock errno:13 Permission denied Is a mongod instance already running?, terminating
 2015-12-05T10:12:49.586+0800 I CONTROL  [initandlisten] dbexit:  rc: 100

解决方法:需要手动将文件夹的权限设置为读和写。选中文件夹data、db,快捷键command+opition+i,弹出文件夹的简介,修改其中everyone的权限为读和写。

启动mongodb后台管理

mongo

出现异常:不能连接mongodb,连接失败。

MongoDB shell version: 3.0.7
connecting to: test
2015-12-05T11:24:01.021+0800 W NETWORK  Failed to connect to 127.0.0.1:27017, reason: errno:61 Connection refused
2015-12-05T11:24:01.025+0800 E QUERY    Error: couldn't connect to server 127.0.0.1:27017 (127.0.0.1), connection attempt failed
    at connect (src/mongo/shell/mongo.js:179:14)
    at (connect):1:6 at src/mongo/shell/mongo.js:179
exception: connect failed

原因:Mac OS X系统没有自启动mongodb服务。

brew services start mongodb

国内的问答社区,解决不了问题。只能访问:来自stackoverflow的问答。缺点是:国内的访问速度有点慢,甚至打不开。

如何在windows中添加mongodb服务

mongod --dbpath "C:\data\db" --logpath "C:\data\log\MongoDB.log" --install --serviceName "MongoDB"

nodejs如何访问mongodb数据库?

首先得通过npm安装mongoose模块。

$npm install mongoose

mongoose是为nodejs而生的mongodb对象建模工具,可以定义一些Schema(定义每个doc里的字段名、类型、初始值、验证条件等),增删改查等,功能比较强大。

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test');
var Cat = mongoose.model('Cat', {
    name: String
});
var kitty = new Cat({
    name: 'Zildjian'
});
kitty.save(function(err) {
    if (err) // ...
    console.log('meow');
});

如上面的示例,运用.save的方法,就可以将kitty的数据保存到本地test的数据表。

项目开发
后端框架
前后端交互
路由
配置文件