月度归档:2019年02月

Micro:Bit 蓝牙如何在开机状态进行连接?

如果你使用了 Micro:Bit 的话,你就知道,Micro:Bit 的蓝牙模块有一个默认的 Paring Mode。但是在 Paring Mode 就切换到了另外的模式,并非我们自己写的代码。

micro:bit 结构说明

如何进入 Paring Mode?

首先,需要为你的 Micro:Bit 通电,确保其可以正常运行。

接下来,按下Micro:Bit正面(有 LED 阵列的一面)的 A 键和 B 键,并保持按下的状态。在按下状态的同时,按一下背面的 Reset 按钮,并放开。此时需要确保没有松开 A 键和 B 键。

稍等片刻后,正面的 LED 阵列就会显示 “PAIRING MODE!” 的字样,说明你进入了 Paring Mode。此时,你就可以通过你的 Android/iPhone 手机进行连接了。

如果你想要开发自己的应用程序,我们应该是要求设备不需要进入对应的模式来设置的,毕竟这样操作极为不方便。而且如果你是要做一些自己的硬件,比如小车、机器人的时候,应该是不需要进入特定的模式来进行连接的,毕竟板子会直接装在亚克力的壳子上,极为不方便。

如何解决呢?

很简单,其实在 micro:bit 的在线编辑器中,你可以找到项目设定,打开项目设定

项目设定

在项目设定中,你可以修改蓝牙的连接模式!

三种不同的连接模式

你只需要将模式切换为 “No Paring Required: Anyone Can connect Via Bluetooth”,就可以无序进入到 Paring Mode 了。

Screeflow vs Camtasia

从极客学院录制课程开始,我就一直使用的是 ScreenFlow。Screenflow 界面美观,功能强大,渲染出的视频大小也不错,所以我就一直用了下来。

screenflow 8

最近因为工作需要,需要录制一个视频,视频需要能够被 Windows 系统编辑,所以改用了 Camtasia ,功能更加强大、界面也不像是使用 Qt 之类的跨平台框架开发的,十分的流畅。非常的爽。

Camtasia 2018

后续我应该会使用 Camtasia 来录制视频了。

为什么我们要了解一个产品的生命周期

作为一个开发者,我们经常要使用到各种各样的开发工具,比如你使用 Vue ,那么肯定要了解 Vue 的生命周期;如果你使用 WordPress ,就需要了解他的产品加载顺序。

如果你只关注如何使用,却不曾关注底层的逻辑到底是什么,那么有朝一日你也会提出这样的问题:

V2ex 的帖子

实际上,如果你曾先了解过一个应用的生命周期、加载顺序等这些比较基础的东西时,就不会问这些问题了。

从另外一个层面, 面试常问 HTTTP 的三次握手四次挥手也是这个原因,当你了解了整个流程,才能更好的在这个流程上进行研究、开发、Hack。

在 Vue 中使用 Render 函数来进行结果的格式化

在 Vue 中,想要对数据进行格式化有很多种方式,比如,使用 filter 并搭配上 管道符|来进行格式转化。或者使用 computed 方法进行数据格式的转化。

这篇文章分享一下我是如何使用 Render 函数来进行结果的格式化的。

目前的需求是这样的,我从服务器获取到的数据需要渲染到 Table 组件中,由于数据的渲染形式受到多组参数影响,因此,我决定使用 render 函数来进行处理。

根据 iView 文档的说明,我们可以在 data 中传入一个 render 函数,来进行 render 处理,因此,我们可以这样设定数据

let data = [{
          title: "生日",
          key: "birthday",
          render: (h, params) => {
            // here is my render function
          }
        },]

在 render 函数中,我们需要返回一个 h 函数的实例,这个 h 函数其实是渲染函数,你只需要返回对应的数据即可。

我们在初始化时,传递了两个参数,其中第一个参数是渲染函数,第二个参数则是当前的数据。其中包括如下信息

index 是当前数据的顺序;row 是当前行的数据,column 则是当前列的数据。你可以通过 params.row.xxx 来获取其他字段的数据,来进行组合数据的判断。

比如(params.row.a + params.row.b)=== params.row.c

Vue 使用 Axios

在 Vue 1 时,我们使用的主要是 Vue-Resource,到了 Vue 2 时,推荐使用 axios。不过 Axios 并非为 Vue 设计,所以需要自己配置一些东西。

But,我是一个懒人,决定选择使用最简单的方法来实现——使用 vue-axios

首先,安装 axios 和 vue-axios

yarn add axios vue-axios

然后,在你的 main.js 中加入如下代码

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

这样,就可以将 Axios 注册为全局可用了。

然后在你需要的地方调用即可。

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

Vue Router 中的默认路由如何定义?

在使用 Vue 开发后台的时候,有些时候我们需要一个默认路由。

比如说,用户登陆以后,会看到一个界面,此时这个界面就需要一个默认路由。因为这个界面一般会放置一个 route-view,如果没有默认路由,就会导致首页的内容是空白的。因此,放置一个默认路由来显示内容即可。

想要实现也很简单,在对应的路由中添加 children 项目,并设置其 path"" 这样,就会将这个路由设置为默认路由。比如,这个样子:

let router = new Router({
    routes: [
     {
        path: "/dashboard",
        component: home,
        children: [
          {
            path:"",
            component: analytics,
          }
        ]
    ]
})

这样就实现了点击 dashboard ,进入对应页面后,默认查看的是 analytics 的内容。

在 Vue 中使用 alias 来简化引用路径

在写 Vue 代码时,我们经常会用到组件化的思想,因此,我们的文件也被拆分的七零八落,如果每次都使用完整的路径来写引用,未免有些太长了,因此,我们可以考虑使用一些工具来帮助我们解决这个问题。

这一步,我们可以通过 Webpack 的 resolve 模块的 alias 功能来实现

比如说,可以将一个较长的路径 src/components/admin-components/login/login.vue 简化为 @admin_com/login/login.vue,这样你就少写了很多代码,可以让你的代码可读性更高。

简化示意图

如何实现

首先,在你的项目根目录创建一个 vue.config.js 文件。如果有了就不需要再创建了。

然后,在其中加入如下代码

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

这个函数用来让你免于在每一次设置 alias 时都写前面的 path.join

然后,添加如下代码

module.exports = {
  chainWebpack: config => {
   // 设置项目
  }
};

然后,导出一个对象,我们稍后将在这个对象中设置 alias。

接下来,我们需要在 chainWebpack 的函数中添加我们的 alias。将代码修改如下

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@admin_com", resolve("src/components/admin_components/"));
  }
};

我们添加的这一行代码 config.resolve.alias.set("@admin_com", resolve("src/components/admin_components/")); 就是在 Webpack 中添加解析的 alias,在渲染页面时,会自动将 @admin_com 替换为 src/components/admin_components

这样,你就可以根据自己的需要,去设置各种各样的 alias, 来简化你自己的代码了。

需要注意的是,@默认被 alias 到了 src 目录,所以你最好不要修改 @,以免出错。

以及,如果你担心后续在其他地方使用你要设置的 alias,可以和我一样,前面加一个符号。

Debug 你的 alias

如何看你的 alias 呢?也很简单,只需要在项目根目录执行 vue inspect resolve.alias,就可以看到所有你自己定义的 alias 了。

关注你的核心目标

我们常常没有办法很好的完成一件事,是因为我们在前进的路上,迷失了方向,忘记了什么才是我们追求的目标。

比如说:写博客。

作为程序员,写博客是再正常不过的事情了。就写博客这一件事来说,也有很多不同的方案:

  • 有的人使用 CSDN、ITEye 这样的博客服务提供商(BSP)来建立自己的博客;
  • 有的人购买虚拟主机,使用 WordPress 这样的程序来建立自己的博客;
  • 也有的人选择直接使用一些静态博客程序,生成静态页面,托管在免费的 Github Pages 上。

每个人选择都有自己的想法,我想说一说我选择 WordPress 的原因。

首先,我的目标是“写博客”,非常纯粹。落脚点呢,是”写”,所以核心的目标就是要坚持写。

那么,从这个目标出发,所做的一切选择都应该是为”写”而服务的。比如,为什么不用 Hexo、octporess、Jekyll?因为这些工具会拉长写作的路径,写一篇文章需要先安装 Git、下载编辑器、Clone 代码、写内容、编译、commit、push,路径非常长。如果你选择使用诸如 WordPress 这样的程序,就可以直接打开浏览器,登陆后台,并开始写作。

最后,为什么不用 BSP 呢?BSP的原因是编辑器的体验并不好,不少平台都还在用可见即所得的编辑器,但是对于我平时主要写随笔和代码文章来说,这样的编辑器太难用了,而且, BSP 的自由度也太低,作为程序员,还是要自己折腾折腾,广告也不少。不过, BSP 也有自己的优势,比如有流量的加持,平台可以为你提供流量,帮助你更好的出名,But,我的本意是写作,而不是出名,这个流量的加持对我来说并不重要。所以,也不选择 BSP。

在前进的路上,我们很容易就迷失自己的方向。在写博客的过程中,我也曾多次切换过平台,直到最后,我明白了,写作才是真正值得我追求的,最终,回到了 WordPress, 并坚持写下去。

前进时,别光顾着走,也看看自己的目标是什么,时常回顾自己的目标,才不至于走偏。

神奇的海底捞生日之旅

今天是我的生日。昨晚大概12点的时候,我跑去了海底捞,想着蹭一蹭海底捞的生日面。

由于海底捞一直人比较多,所以我提前做了预约,另外一方面,总的来说,我还是一个比较腼腆的人,所以希望海底捞的系统自动识别出我今天是生日,自动为我送上生日面。

点完餐以后,在海底捞的 iPad 上登陆自己的账号,积攒了积分。

海底捞的生日面

除了生日面,过了一会,服务员又送了一个小蛋糕过来。这个蛋糕是我完全没有想象得到的。我估计是因为前面登陆了账号,识别到我 24 号生日,然后给我送上了蛋糕。也可能是为我服务的服务员帮我和总管说了一下,送上了蛋糕。

海底捞送的生日蛋糕

然后她随机拉了两个服务员,来给我一起唱生日歌。真的很惊喜。

海底捞真的做到了,别人想要60分的东西,给你 80 分的东西。