这里以通过Vue Router切换不同组件来说明transition的用法。
在app.vue中有一个配置了切换效果的<router-view>：
...
<transition :name="transitionStyle">
<router-view class="content" />
</transition>
...
由于要实现组件切换的前进后退效果，所以
transition的name是动态绑定的，这里不讨论如何实现前进后退，只讨论其中的前进。
想要当前组件向左滑出去的同时，即将显示的组件从右滑动进来，就像iOS版本的微信的左滑切换效果。
很多初学者发现，按照文档设置了相应的class之后，组件之间的切换会出现空白，实际上这就是Vue的文档没有描述清楚的地方。
Vue自定义指令用起来就像Vue内置的v-model、v-on...之类，只不过实现了一些自己想要的功能。因为Vue自定义指令的钩子函数会传入一个el，它是自定义指令绑定到的那个DOM元素，所以Vue自定义指令可以用来直接和DOM打交道。
自定义指令分为全局和组件内的局部指令。全局自定义指令注册方法：
Vue.directive('myDirective', {
// inserted是内置的钩子函数
inserted: function (el) {
// 一些操作...
},
// 指令的其他内容和钩子函数，如果需要的话...
})
MDN上的apply介绍: apply- MDN
apply()方法的第二个参数除了可以是数组外，从 ECMAScript 第5版开始，还可以是一个类数组对象：
从 ECMAScript 第5版开始，可以使用任何种类的类数组对象，就是说只要有一个
length属性和(0..length-1)范围的整数属性。例如现在可以使用 NodeList 或一个自己定义的类似{'length': 2, '0': 'eat', '1': 'bananas'}形式的对象。
在使用Vue Router配置了异步组件后，即使没有激活这些异步组件，在浏览器中仍然可以看到请求这些组件。比如下面的配置：router.js:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Chat',
name: 'Chat',
component: () => import( /* webpackChunkName: "Chat" */ './views/Chat.vue')
}
]
})
iOS有很多独特(奇怪)的表现，最近在做一个H5页面时，遇到了真机上滑动不流畅的问题。查阅资料得知，可以给带滚动条的那个元素设置-webkit-overflow-scrolling: touch解决这个问题，但设置之后依然如故。最后经过实验，必须给滚动元素显式的设置overflow: auto|scroll才能解决这个问题。
具体原理留待空闲时研究。
image组件底部有空白，这可能是小程序自身的bug，对image设置vertical-align为任意值即可消除。
更新时间：2019-06-22
一直以来对小程序image组件底部空白的理解是错误的，以前以为是inline-block元素底部自带的一点空白，现在在用到image的时候发现其实不是的。
小程序image组件有一个默认的高度：240px，如果image组件不设置mode，并且高度不够240px，底部就会出现空白。
消除image组件空白有两种方法：设置合适的mode、设置固定高度。
比如，要图片宽度是100%，高度自适应，就可以这样设置：
<image mode='widthFix' src='xxxx.png'></image>
经过实验发现，给image设置height: auto会导致图片高度为0，所以不能通过重置高度来消除空白，只能设置固定的高度，比如：height: 100%、height: 40px等。
更新时间：2019-06-26
在image垂直排列的时候，image的宽度是100%，mode是widthFix，底下依然会有空白，这就是我在开头的时候遇到的情况了。
刚开始写了个递归：
function getOffsetPosition(element, x, y){
x = x || 0;
y = y || 0;
if(element.offsetParent != null){
return getOffsetPosition(element.offsetParent, element.offsetLeft + x, element.offsetTop + y);
}else{
return {
x: x,
y: y
}
}
};
getOffsetPosition(document.getElementById('id'));
// { x: 100, y: 666 }
scroll-view不可见的时候，设置它的位置是不起作用的。
其他组件也应该有一样的特性。
开发的时候要注意。
在保存图片到相册后，微信会弹出提示“图片已保存到xxxxxx”，如果在saveImageToPhotosAlbum的success中想要提示用户保存成功，就必须先调用hideLoading()，否则自己写的showToast是不会显示的。
wx.saveImageToPhotosAlbum({
success(res) {
wx.hideLoading(); // 必须先调用这个
wx.showToast({
title: '图片已保存到您的相册',
icon: 'none',
duration: 4000
});
}
})由于移动端屏幕的像素密度都非常高，css中的1px呈现在屏幕中，往往不止1个物理像素，看起来比较粗，设计师很难满意。这和devicePixelRatio有关。
用transform实现看起来比较细的边框是一个很简单的方案，在移动端兼容性也非常好，不需要多余的资源，当然，肯定要多些几行代码。