css3 新特性

• scroll-behavior
• clip-path
• background-clip
• ::selection
• ::placeholder

参考 掘金小册 和 chrome 官方文档，这些东西基本都过一遍有个印象就行，需要用的时候，再看也不迟。

简单列举，并不全面。

Atwood 定律

Any application that can be written in JavaScript, will eventually be written in JavaScript. （任何能够用JavaScript实现的应用，最终都必将由JavaScript实现。） – Jeff Atwood

记录react学习进程，以及使用 antd 和 react 写 demo 时候遇到的问题。

项目地址：https://github.com/popring/ofo-ms/tree/ofo-ms-js

新的一年，应继续保持学习，计划

• vue 深入学习，之前还是学习的不够深入
• TypeScript 也应该入手了，都 0202 年了，总不能还不会 ts 吧
• 走进后端，koa, eggjs 等学一个
• 不挂科
• 不挂科
• 不挂科

开启管理员模式

1

Start-Process powershell -verb runAs

删除文件夹

1

rm -r -f [文件夹名称]

大致为一下几个方面

• 指令
• 生命周期函数
• Watch
• computed
• filter
• 插槽
• 路由

axios使用总结

安装

推荐 yarn

1

yarn add axios

或者 使用 npm

1

npm i axios

去哪儿网项目链接

Vue-cli 配置

Vue-cli 2.x 和 Vue-cli 3.x 配置webpack别名目录 alias

vue-cli 2.x

1
2
3
4
5
6
7
8
9
10
11

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
			// resolve 函数文件已配置好
			'styles': resolve('src/assets/styles')
    }
	}
}

vue-cli 3.x

直接在项目根目录新建 vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'styles': path.resolve('src/assets/styles')
      }
    }
  }
}

Mini Program Notes

尺寸单位 - rpx和px

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

详情查看官方文档

组件

API

小程序生命周期(Life Cycle)

文档

事件传参

注意

bindtap或者bindtap(1) 都会会直接当成函数名直接调用包括括号

传参使用自定义属性 data-*

1
2
3
4
5
6
7

<view bindtap="bdtap" data-info="1"></view>

// js代码
bdtap() {
	// e.target.dataset 获取data-*的值
	console.log(e.target.dataset.info)
}

wxs

• 没有兼容性
• 与JavaScript不同
• 隔离性：不能调用js代码，也不能调用小程序提供的API
• 不能作为事件回调
• IOS设备比JavaScript运行环境快2~20倍，而在Android和JavaScript环境运行效率无差异

语法

wx:if 控制元素的渲染，为惰性渲染，更高的切换消耗

hidden 始终会渲染，只是简单的控制显示和隐藏，更高的出事渲染消耗

1
2
3
4
5
6
7
8
9
10
11
12

// 相当于 v-if
wx:if=""
wx:elif=""
wx:else

// 控制元素的显示和隐藏
hidden 

// 列表渲染
wx:for=""
wx:for-index=""
wx:for-item=""

block标签

相当于vue中的template，只做包括，当前标签不会渲染出来，内容会渲染

1

<block></block>

自定义组件

数据监听器

类似于Vue中的watch，支持版本2.6.1以上

数据监听器

1
2
3
4
5
6
7

Component({
    observers: {
        '字段1', '字段2': function(字段1的新值，字段2的新值) {
   			// do something         
        }
    }
})

监听子数据字段的变化

1
2
3
4
5
6
7
8
9
10
11
12

Component({
  observers: {
    'some.subfield': function (subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
    },
    'arr[12]': function (arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // （除此以外，使用 setData 设置 this.data.arr 也会触发）
    }
  }
})

通配符**监听所有子数据字段的变化

1
2
3
4
5
6
7
8
9
10

Component({
  observers: {
    'some.field.**': function (field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    }
  }
})

组件的生命周期

取消顶部导航栏

1
2
3
4
5

{
    "window": {
        navigationStyle: "custom"
    }
}

将图片转换为base64

1
2
3

const fileManger = wx.getFileSystemManger()
const fileStr = fileManger.readFileSync('dir', 'base64')
// fileStr 即为 图片的base64

hover-class

去除navigator跳转链接的跳转时的默认灰色背景，设置为none

1
2

<navigator hover-class="none">
</navigator>

早期在学习 node 时候，做的笔记。