小程序日益增多的情况下，UI风格显得越来越重要，在页面中如果能让TabBar个性化一点，加一些小交互，用户体验会大大提升。文末附完整源代码。

问题 不是为了设计为设计，最初的设计是为了解决核心的四个问题，实现与登录有关的逻辑收紧，与具体页面或者组件解耦。 设想 基于登录有关的逻辑进行抽离，进行统一设计。 以下涉及代码的部分，都在小程序项目中

上图为微信小程序的项目结构，pages下面包含了小程序中的每一个页面，每一个页面由页面结构，页面样式，页面配置和逻辑代码四部分组成。 页面结构文件为index.wxml，通过微信自定义的标签来写。 页面逻辑通过JavaScript来书写。 类似CSS文件，来定义页面内元素的样式…

【头条】用户信息授权方式还停留在微信小程序第一版，即直接调用 getUserInfo 弹出授权弹窗，如果用户选择允许，则后续调用不再出弹窗，而是直接走 success 回调。如果用户选择取消，则后续调用也不再出弹窗，而是直接走 fail 回调 【微信】【QQ】【支付宝】则采用 …

半年前，有机会开始接触微信小程序开发。却因为只是接触而并没投入开发小程序的过程中，因此对很多小程序的细节并未有充分的理解，仅仅停留在了解类似的理论层面，比如mpvue修改了 Vue.js 的 runtime 和 compiler 实现了编译及运行在原生小程序能力，比如原生小程序…

大部分情况下我们都是使用微信官方自带的navigationBar配置，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。 隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。 公式：导航栏高度 = 状态栏到胶囊的间距（胶囊距上边界距离-状态栏高度） …

这样微信就放开了导航栏的控制权，只保留右上角的胶囊。 接下来，我们要做的就是实现一个导航栏组件，把它放置在页面原来的默认导航栏的位置，内容什么的完全由开发者自己定制。 这种情况下，二者的差值就是默认的导航栏的高度, 但是在设置了"navigationStyle": "custo…

使用微信小程序的movable-view组件。movable-view。 使用position: absolute;，将可滑动部分（z-index值较大）放置在删除按钮（z-index值较小）之上，最开始是遮住删除按钮的。 使用touchstart、touchend属性绑定方法…