由于现在公司用的是Windows电脑，而对于经常要用到命令行工具的开发来说，敲CMD可真是要命的。于是就找到了一款在windows下好用且很强大的cmd命令工具 - Cmder。
Cmder = Cmd + PowerShell + Git for Windows + “bash”。
我们知道在PC上实现鼠标移动到按钮上的交互很简单：利用css的:hover和:active 就可以很好的实现。但是在H5的移动端上面要实现这样的交互有点麻烦，假如你还是只写:hover或:active 的话，在交互上会看到只有:hover或:active时的样式，而且还会一直保持这样样式，除非你在其他地方有交互操作。这多蛋疼啊，难道H5移动端就没办法了吗？有的！
每次写 Vue 组件的时候，都要在 Components 文件夹里面手动新建一个文件，然后再把 template、script 和 style 的结构写一遍或者从其他文件 copy 一份出来再粘贴进去实在是费工夫。说实话，我（bu)比（shi）较（lan）懒 （我写 React 组件的时候却是这么干的）。
只要是一张可以正常查看的图片，一般老说通过 canvas 就可以将这个图片直接绘制出来。但是在微信小程序里面canvas 有一个坑就是不能够直接利用网络图片进行绘制。这在微信开发者工具中模拟是正常的，但是在手机端则显得力不从心了 — 画不出来啊！！！
不过，并不是没有解决方案。通过使用 wx.getImageInfo 的方式可以将网络图片缓存下来，然后我们使用缓存的图片地址来进行画图。效果是相当的漂亮了。
wepy提供了$broadcast、$emit、$invoke三个方法来为我们实现page和子组件或者组件和组件之间的通信。
page通过$broadcast方法向所有被引用的组件发送指定广播，子组件如果有需要则在events里面设置接收器用来接收page的广播，然后进行相应的事件处理。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58<!-- page -->
<view @tap="changeText">
<comA />
<comB />
</view>
<script>
import wepy from 'wepy';
import ComA from 'components/coma';
import ComB from 'components/comb';
export default class Index extends wepy.page {
components = {
comA: ComA,
comB: ComB
};
methods = {
changeText() {
this.$broadcast('com-changeText');
}
};
}
</script>
<!-- comA -->
<view>{{text}}</view>
<script>
import wepy from 'wepy';
export default class ComA extends wepy.component {
data = {
text: 'comA'
};
events = {
'com-changeText': () => {
this.text = 'comA接收到来自父级broadcast的变更';
this.$apply();
}
};
}
</script>
<!-- comB -->
<view>{{text}}</view>
<script>
import wepy from 'wepy';
export default class ComB extends wepy.component {
data = {
text: 'comB'
};
events = {
'com-changeText': () => {
this.text = 'comA接收到来自父级broadcast的变更';
this.$apply();
}
};
}
</script>
在小程序原生开发里面，我们可以通过 this.setData({}) 来设置操作data数据，而wepy中将该操作进行了封装，我们可以直接使用 this.dataName 来实现data数据的赋值或变更。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<!-- page -->
<view @tap="change">{{title}}</view>
<script>
import wepy from 'wepy';
export default class Index extends wepy.page {
data = {
title: '初始化内容'
};
methods = {
change() {
this.title = '改变内容';
}
};
}
</script>
Props是page和组件，组件和组件之间传递数据的媒介，不仅是数据，还可以是自定义事件（方法）。
静态值可以看做是一个常量，固定不变的值。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<!-- component -->
<text>{{title}}</text>
<script>
import wepy from 'wepy';
export default class Com extends wepy.component {
props = {
title: String
};
data = {}
}
</script>
<!-- page -->
<view>
<com title="常量值" />
</view>
<script>
import wepy from 'wepy';
import Com from 'components/com'; // 引入com组件
export default class Index extends wepy.page {
components = {
com: Com
};
}
</script>
