为什么要写这样一个插件 中小公司或个人都会把资源文件放到七牛上，小程序在做上传时，都要依赖服务端生成 token； 1. 服务端生成 token 代码都要写一遍 2. 一些七牛的坑或限制也要淌一遍 3. 分块、分片都实现一遍 基于这些原因写了这个小程序插件（vktool），使用云开发生成 token； 这个插件源码开放（https://github.com/myzingy/wx-plugin-oxoo）， 不会储存你的ak\sk，如果你不放心，可以直接部署成你的插件； 针对七牛的处理 图片处理（20兆以内） 一般为了加快图片加载，七牛图片都会增加类似 ?imageView2/3/w/980 的缩略图方式，但如果图片很大，超过20兆时，七牛直接就报错了，图片也显示不出来，针对这个问题，生成token 上传策略时，特意另存了一份.lim.jpg 的瘦身文件。 分片上传后的 lim 文件 2.1 分片真是个复杂的事，坑已淌好，这个插件已处理好，你可以直接用； //图片瘦身另存为lim options.persistentOps = ‘imageslim|saveas/$(x:limkey)’，分片上传后一直不生成lim文件，提交了工单，七牛给出了解决方案（七牛技术服务响应很高效），需要做2次urlsafeBase64Encode [图片] 2.2 小程序 FileSystemManager.readFileSync 真机目前只能支持10兆内的文件，超过10兆直接报错，等小程序官方修复吧；目前分片上传只能支持10兆以下文件，意义不大； 即使你不用插件，希望这些坑也能帮到你，毕竟源码都给你了 案例 [图片] 自己写了个小程序 图略，新建活动或发布照片都可以体验七牛直传；

我一直希望只用小程序的原生框架进行开发，之前为Nike和沃尔玛开发过小程序，发现大多数小程序在功能上也不会像web前端那样复杂，所以再引入一个开发框架难免会觉得是在增加复杂度。 而用原生框架开发时，我觉得唯一缺少的就是一个全局的状态管理框架，所以我自己写了一个，使用风格上有点偏向mobx，大家如果有想法和意见，欢迎告诉我。 Github: https://github.com/wwayne/minii 举个栗子如何使用：(只有两个api，mapToData 和 observe) [图片]

1、微信小程序动画有自己的方法：官方链接 但需要自己去写动画效果，比较麻烦。 2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内使用。 animate.css包含76种动画，使用非常简单。animate.css官网 : https://daneden.github.io/animate.css/ 3、由于小程序对代码大小限制比较大，所以删除了animate.css中 所有@-webkit-部分css，减少了一半体积 再把文件后缀名改为wxss，以后出来的百度小程序、支付宝小程序、今日头条小程序估计修改对应的后缀名就可以直接使用了。 下载地址：http://nodejs999.com/animate.wxss 4、放到小程序代码中，然后@import到app.wxss文件中。 我项目是把animate.wxss文件放在utils文件夹下。 所以在app.wxss中加入 @import './utils/animate.wxss'; 即可。 就可以像animate.css一样使用了。

写在前面的话 大家看到这个文章时一定会感觉这是在炒剩饭，社区中已经有那么多分享自定义导航适配的文章了，为什么我还要再写一个呢？ 主要原因就是，社区中大部分的适配方案中给出的大小是不精确的，并不能完美适配各种场景。 社区中大部分文章给到的值是 iOS -> 44px , Android -> 48px 思路 正常来讲，iOS和Android下的胶囊按钮的位置以及大小都是相同且不变的，我们可以通过胶囊按钮的位置和大小再配合 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 [代码]statusBarHeight[代码] 来计算出导航栏的位置和大小。 小程序提供了一个获取菜单按钮（右上角胶囊按钮）的布局位置信息的API，可以通过这个API获取到胶囊按钮的位置信息，但是经过实际测试，这个接口目前存在BUG，得到的值经常是错误的（通过特殊手段可以偶尔拿到正确的值），这个接口目前是无法使用的，等待官方修复吧。 下面是我经过实际测试得到的准确数据： 真机和开发者工具模拟器上的胶囊按钮不一样 [代码]# iOS top 4px right 7px width 87px height 32px # Android top 8px right 10px width 95px height 32px # 开发者工具模拟器（iOS） top 6px right 10px width 87px height 32px # 开发者工具模拟器（Android） top 8px right 10px width 87px height 32px [代码] [代码]top[代码] 的值是从 [代码]statusBarHeight[代码] 作为原点开始计算的。 使用上面数据中胶囊按钮的高度加 [代码]top[代码] * 2 上再加上 [代码]statusBarHeight[代码] 的高度就可以得到整个导航栏的高度了。 为什么 [代码]top[代码] * 2 ？因为胶囊按钮是垂直居中在 title 那一栏中的，上下都要有边距。 扩展 通过胶囊按钮的 [代码]right[代码] 可以准确的算出自定义导航的 [代码]左边距[代码]。 通过胶囊按钮的 [代码]right[代码] + [代码]width[代码] 可以准确的算出自定义导航的 [代码]右边距[代码] 。 通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 [代码]windowWidth[代码] - 胶囊按钮的 [代码]right[代码] + [代码]width[代码] 可以准确的算出自定义导航的 [代码]width[代码] 。 再扩展 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 [代码]statusBarHeight[代码] 每个机型都不一样，刘海屏得到的数据也是准确的。 如果是自定义整个页面，iPhone X系列的刘海屏，底部要留 [代码]68px[代码] ，不要问我为什么！ 代码片段 https://developers.weixin.qq.com/s/Q79g6kmo7w5J