欢迎大家试用。

            自己写的代码片段             https://developers.weixin.qq.com/s/wo1dA9mQ746o             安卓video视频重播缓存问题和下载保存到手机实例                         解决方案            给url 后缀加个 传参  我代码片段是用时间戳   这样保证他不会因为地址相同而不重新缓存            这样也可以说是手动清除缓存            例如：https://www.xxx.com/xxx.mp4?filekey='121212121'     (传参字段可以自定义，后面等于时间戳即可)             video重播有问题即可解决             问题描述：             视频刚加载一点，然后拖进度到最后，等它播放完，点重播，视频会卡到视频最后一帧的画面，除非重新打开             就是视频缓存导致的问题  重播 安卓手机会自动播放缓存内容  但是安卓的缓存又好像只有最后十几秒的             (如果视频较短  只有十几秒    不存在重播问题  高于一分钟基本缓存都是  最后十几秒)【官方说出现这个问题是只有小米手机出现过，我的手机是小米6  出现问题的】             论坛另一个码友碰到此类坑     详情戳                 https://developers.weixin.qq.com/community/develop/doc/000684eb41c3f0ecd8e72adb05b000                  后面我开发时候也碰到此类问题    只有安卓才会这样    我发现新浪微博小程序也有这个bug   一直找不到解决办法             后面查看小程序官方组件展示  我发现里面的  video组件视频不会有此问题  然后我以为是我写的代码不对  就去翻看源码               发现它的视频地址是这样的    srcplay: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400'                    和我的视频地址不一样  我的是   https://www.xxx.com/xxx.mp4    这样的   所以我分析一波   再加上我知道是安卓缓存问题              所以我得出解决方案               最后  不得不说句   小程序太牛逼了  是真的牛逼                 [图片]                  备注      代码片段中需要填入的视频地址              [图片]                          

表示小程序的第一个项目就踩坑这么多，难受………… 这是我个人的项目，最下面是我自己的博客地址。感觉作为程序员不分享不行，不然我这么多问题都怎么解决的。还不都是百度。谢谢大家批评 一、小程序navigateTo网络延迟产生连续跳转问题，采用节流函数 //调用封装的节流函数方式防止bug，一秒内只能跳转一次 that.binging(); //采用节流函数方式，解决微信延迟多次跳转bug ,binging:util.throttle(function () {     wx.navigateTo({         url:'/pages/index/binding/binding'     }); }, 500) //节流函数，一定时间内只能执行一次 //参数1：函数，参数2：间隔时间毫秒数，1000为一秒 function throttle(fn, gapTime) {     if (gapTime == null || gapTime == undefined) {         gapTime = 1000     }     let lastTime = null;     // 返回新的函数     return function () {         let nowTime = + new Date();         if (nowTime - lastTime > gapTime || !lastTime) {             fn.apply(this, arguments);  //将this和参数传给原函数             lastTime = nowTime         }     } } 二、小程序苹果机和安卓机样式不兼容（最坑，不同的苹果手机展示效果还不一样，比如新苹果正常，老苹果异常） 1、页面返回切换，发现上个页面走位异常 把所有内容放在一个view里面，出现问题的是当时image标签在外部，导致返回页面的时候整个页面撑开，错位 2、文字安卓机定位基于上个元素，苹果机基于页面顶部 posation:absolute,问题导致，保持页面结构一致，去除即可。调整页面样式 3、canvas隐藏问题 自己overflow要写在父级元素上面，不然连安卓有时候都会隐藏不了 4、安卓机canvas上层div能点击事件，苹果手机不行 解决：不要让别的元素在canvas上面，调整页面样式 三、无法解决问题 小程序input会闪烁失去焦点，键盘拉起异常，微信bug 四、小程序页面生命周期问题 1、onReady无法保证页面正常加载完毕情况，组件无法获取 采用定时器，定时获取，获取成功才出发事件 ---------------------  作者：海天酱油zz  来源：CSDN  原文：https://blog.csdn.net/qq_32858649/article/details/84650394  版权声明：本文为博主原创文章，转载请附上博文链接！

navigateTo连续点击跳转两次的问题大家是怎么解决的啊

按照官方文档的说法 : cover-view   覆盖在原生组件之上的文本视图，可覆盖的原生组件包括[代码]map[代码]、[代码]video[代码]、[代码]canvas[代码]、[代码]camera[代码]、[代码]live-player[代码]、[代码]live-pusher[代码]，只支持嵌套[代码]cover-view[代码]、[代码]cover-image[代码]，可在[代码]cover-view[代码]中使用[代码]button[代码]。 但是我目前使用cover-view 用来遮住canvas,却发下如下问题 cover-view在安卓手机不能遮住canvas,在iOS设备却没问题(可以遮住). iOS设备系统:ios11,安卓设备系统,Android7.1.1;调试基础库:2.2.5 iOS设备截图: [图片] [图片] 安卓设备截图(Android 7.1.1系统) [图片] [图片]

cover-view元素fixed跟随页面滚动 view元素fixed正常 iphone X IOS11.4 微信6.7.3 两个手机同一个版本全都一致 一个有问题 一个没问题

- 当前 Bug 的表现（可附上截图） [图片][图片] [图片] - 预期表现 - 提供一个最简复现 Demo

- 当前 Bug 的表现（可附上截图） [图片] - 预期表现 [图片] - 复现路径 （在华为荣耀v9手机上运行）使用一个cover-view里面嵌套一个cover-image，src属性放一个svg图片路径即可 - 提供一个最简复现 Demo

Page引用自定义组件，开发者工具上组件节点在shadow-root中。 在组件中使用wx.createSelectorQuery().select('#id').boundingClientRect()尝试获取组件中某节点高度。 获取失败，返回null，不知是否是shadow-root的问题？

最近刚好接手支持了每日出击运签的小程序，在小程序完成以后，整理了一下初次接手小程序的一些体验，所以有了现在这篇小总结。在小程序需求的进行期间，十分感谢泽贤，小苏，俞焕，花花的指导~ 话不多说，立马送上小程序码，大家可以扫码体验一下 [图片] 每日出击运签小程序主要划分为几个功能模块： 摇一摇 抽签并显示运签结果 保存图片 预约功能 签到功能 积分功能 评论功能 下面重点介绍一下摇一摇、抽签并显示运签结果、保存图片三个功能。 关于摇一摇功能 花叔早前已经写过文章（链接如下：http://www.ifanr.com/minapp/880378）介绍过摇一摇的实现思路了，这里简单归纳一下摇一摇功能的几个主要的思路。 准备： 需要设置一组变量，保存摇一摇x,y,z三轴的数值，需要设置一个变量来记录摇一摇的时间。 实现注意事项： 我们需要定一个阈值，作为摇一摇的判断基准。 需要通过公式来计算单位时间内运动的路程，也就是我们想要的速度。如果这个速度超过了我们定下来的阈值，那么就算作用户已经摇一摇 [代码]//计算 公式的意思是 单位时间内运动的路程，即为我们想要的速度[代码][代码]var[代码] [代码]speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;[代码] 另外我们需要注意两个小程序提供的API： wx.onAccelerometerChange(CALLBACK)：用于监听加速度数据，在发生有加速度的动作的时候，执行摇一摇的判断逻辑 wx.stopAccelerometer：在摇一摇的逻辑执行期间，需要停止监听加速度数据，避免多次触发摇一摇 为了给予用户更好的摇一摇反馈，建议在执行摇一摇以后设置振动反馈，这个小程序API里面也带有相关的接口：wx.vibrateShort(OBJECT) 关于抽签并显示运签结果的功能 每日出击运签的小程序其中有一个需求是抽签并显示运签结果。在用户每天进入小程序的时候，通过摇一摇，得到一个抽签结果，如图所示： [图片] 关于这块功能，这里需要着重介绍vine在实现小程序的过程中比较关注的两个点，一个是随机显示抽签结果，一个是用于显示签纸的动画效果。 随机显示抽签结果 这个小程序中，随机显示抽签结果的需求具体如下： 随机出现五个运签结果，大吉、吉、平、凶、大凶；不同结果对应下面不同文案；每个用户每天只能获取同一个结果。随机文案，每个用户在用完库存前不重复 这里我们可以提炼出两个关键点：一个是每个用户每天获取的结果不变，一个是，在库存用完前不重复出现文案 也就是说，我们需要把用户的抽签结果和用户id关联起来。另外我们需要准备储存抽签结果的数组，每天从数组里面取出一个值作为抽签结果，从而保证在库存用完前不重复出现文案。贴代码： [代码]// 打乱数组顺序[代码][代码]      [代码][代码]function[代码] [代码]shuffle(a) {[代码][代码]        [代码][代码]var[代码] [代码]j, x, i;[代码][代码]        [代码][代码]for[代码] [代码](i = a.length - 1; i > 0; i--) {[代码][代码]          [代码][代码]j = Math.floor(random() * (i + 1));[代码][代码]          [代码][代码]x = a[i];[代码][代码]          [代码][代码]a[i] = a[j];[代码][代码]          [代码][代码]a[j] = x;[代码][代码]        [代码][代码]}[代码][代码]      [代码][代码]}[代码] [代码]      [代码][代码]var[代码] [代码]m_w = 123456789;[代码][代码]      [代码][代码]var[代码] [代码]m_z = 987654321;[代码][代码]      [代码][代码]var[代码] [代码]mask = 0xffffffff;[代码] [代码]      [代码][代码]function[代码] [代码]seed(i) {[代码][代码]        [代码][代码]m_w = i;[代码][代码]        [代码][代码]m_z = 987654321;[代码][代码]      [代码][代码]}[代码]  [代码]      [代码][代码]function[代码] [代码]random() {[代码][代码]        [代码][代码]m_z = (36969 * (m_z & 65535) + (m_z >> 16)) & mask;[代码][代码]        [代码][代码]m_w = (18000 * (m_w & 65535) + (m_w >> 16)) & mask;[代码][代码]        [代码][代码]var[代码] [代码]result = ((m_z << 16) + m_w) & mask;[代码][代码]        [代码][代码]result /= 4294967296;[代码][代码]        [代码][代码]return[代码] [代码]result + 0.5;[代码][代码]      [代码][代码]}[代码] [代码]//获取用户id      [代码][代码]      [代码][代码]var[代码] [代码]userid = parseInt(gbConfig.user_id, 16);[代码][代码]      [代码][代码]seed(userid);[代码][代码]      [代码][代码]// 随机生成抽签描述[代码][代码]      [代码][代码]var[代码] [代码]qian = [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];[代码][代码]      [代码][代码]var[代码] [代码]result = [];[代码][代码]      [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < 10; i++) {[代码][代码]        [代码][代码]shuffle(qian);[代码][代码]        [代码][代码]result = result.concat(qian);[代码][代码]      [代码][代码]}[代码] [代码]      [代码][代码]// 随机生成抽签结果[代码][代码]      [代码][代码]var[代码] [代码]luck = [1, 2, 3, 4, 5];[代码][代码]      [代码][代码]var[代码] [代码]luckarr = [];[代码][代码]      [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < 60; i++) {[代码][代码]        [代码][代码]shuffle(luck);[代码][代码]        [代码][代码]luckarr = luckarr.concat(luck);[代码][代码]      [代码][代码]}[代码]    2.签纸显示的动画效果 这次小程序，在上线前添加了签纸显示的动画效果，以加强“抽签”的用户感受。签纸以滚轴的形式向下展开，慢慢呈现出签纸的结果。 关于动画效果，最容易被使用的实现方式应该就是css3动画以及序列帧。这里尝试了三套方案，最终选择了最后一套。下面分别来介绍一下这三套方案。 第一：使用传统的序列帧方式。尝试使用传统的序列帧，通过逐帧动画，慢慢铺开签纸，逐帧动画如下： [图片] 在通过减帧以后，得到了8张序列帧图，vine发现，8张序列帧图通过拼接得到的雪碧图会非常大（达到了1M左右的大小），所以再次进行减帧得到由4张序列帧图拼接而成的雪碧图（也有500+kb左右）。但是在实际放到页面上面的时候发现，4张序列帧图帧数太少，造成了动画卡顿不流畅的情况，而且在低端安卓机上面，这组序列帧动画完全无法流畅进行。所以第一套方案放弃。 第二：把8张序列帧图分开加载，4张为一组，拼接成一张雪碧图，一共两张雪碧图，如下： [图片]    [图片] vine的处理方式是：先加载第一张雪碧图，在第一张雪碧图逐帧动画结束后，切换到第二张雪碧图，无缝连接播放第二组逐帧动画。结果在低端安卓机上面出现了同样的情况，动画播放非常卡顿，而且在图片切换的过程中出现了空白。于是第二套方案失败。 第三：在vine百思不得其解的时候，突然发现，这套序列帧有一个特点：它的签纸和卷轴并不是立体的！也就是说，这里其实可以不需要序列帧来实现签纸打开的效果，只需要最后一张图就可以了： [图片] 关于保存图片的功能 保存图片的功能是这次小程序中的一个大难点，这里非常感谢泽贤和小苏提供的建议。下面来介绍一下保存图片的功能到底是什么： [图片][图片] 通过点击分享按钮，可以生成一张和签纸类似的图片，用户可以长按保存这张图片到手机本地。从而达到转发分享的目的。 而这个保存，所需要的就是canvas。小程序API提供了canvas的接口： [图片] 通过这个接口，我们可以把当前画布指定区域的内容导出成指定大小的图片，然后再调用小程序的预览接口进行图片预览以及保存： [图片] 但是在这里，vine遇到了几个问题： 多次点击保存按钮触发canvas，导致手机滑动的时候非常卡顿 生成预览图片时间非常慢 三星note5保存图片尺寸的问题 下面来介绍一下这两个问题相应的解决措施： 多次点击保存按钮触发canvas，导致手机滑动的时候非常卡顿 canvas只在需要触发的时候渲染，在用户没有点击保存按钮的时候，默认不渲染canvas。代码如下：由于小程序和MVVM框架类似，无法直接操作dom，所以vine采取了在样式上面添加状态，通过修改showcanvas变量的值，来控制canvas的显示和隐藏。在执行画图操作的时候使变量值为false，显示canvas，在绘制完成的时候更改变量值，隐藏canvas [代码]<[代码][代码]canvas[代码] [代码]class[代码][代码]=[代码][代码]'{{showcanvas ? "hidcanvas" : "showcanvas"}}'[代码] [代码]style[代码][代码]=[代码][代码]"width: 750px; height: 1334px;position:fixed;left:100000rpx;top:-100000rpx;"[代码] [代码]canvas-id[代码][代码]=[代码][代码]"shareQRcode"[代码][代码]></[代码][代码]canvas[代码][代码]>[代码] 生成预览图片时间非常慢 生成预览图片时间非常慢，目前判断的原因是，直接预览canvas临时路径的图片耗时比较久。那么应该如何优化这个过程呢？ 小程序的API提供了几个关于文件的接口： [图片] [图片] [图片] 我们可以通过这几个接口优化目前的预览方式。在这其中vine做了两种不同的尝试。 第一，在执行wx.previewImage的success的回调的时候，把previewImage生成的临时路径保存下来，下次再点击预览的时候，直接获取本地已保存的文件列表wx.getSavedFileList，取得最近保存下来的文件的本地路径，进行预览。这么做的想法主要是为了解决canvas渲染的问题，每天只渲染一次，后续都是通过预览本地图片链接达到生成图片的目的。梳理一下流程： 初次渲染：canvasToTempFilePath -> previewImage -> saveFile 二次渲染：getSavedFileList -> previewImage 可惜理想始终是丰满的，在实际操作的过程中vine发现，通过这样的方式预览图片的时候，一直处于loading的状态，无法生成初次渲染的图片。vine非常苦恼，至今没能找到原因。 于是vine想了另一种办法，调整了预览的顺序如下： 初次渲染：canvasToTempFilePath -> saveFile -> previewImage 二次渲染：getSavedFileList -> previewImage 这时候vine发现，先把canvas生成的临时路径保存到本地，再预览，这种方法是可行的！而且在二次渲染的过程中，由于只是读取小程序本地的图片路径，无需再次调用canvas绘图，二次预览的时间大大减少。 在这里我们需要注意官方文档中提到的一点：小程序本地文件存储的大小限制为10M。所以我们需要调用wx.removeSavedFiled的方法删除我们不需要的图片（当天之前存下来的图片都是我们无需保存到本地的图片，可以删除） 三星note5保存图片尺寸的问题 在数量庞大版本不一的安卓手机上，vine收到反馈，三星note5在保存图片的时候会遇到图片底部被裁减的情况。在通过多次修改以及对比类似的小程序以后发现，note5用canvas绘制的图片有一个最大的范围是750*1150，超出这个范围的图片，底部就会被裁减。为什么会有这个最大范围vine目前还没探索出结论，希望遇到过这个问题的大神可以和vine交流一下心得，手动比心！~ 最后梳理一下小程序项目的一些注意点： 小程序需要申请小程序公司主体的账号，拿到appid，给到后台同学配置接口 小程序的体验需要上传体验版本，获取体验者的微信号，到小程序管理后台开通体验者权限 小程序开发过程中需要的单位为rpx，兼容问题较少 在小程序的需求中，需要仔细查看文档中提到的版本以及兼容问题，做好降级处理：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html

微盟小程序性能优化要分享的内容分为三部分，启动性能加载、首屏加载的体验建议和渲染性能优化。 今天主要讲启动性能加载的性能优化实践，先看启动加载过程的流程： [图片] · 公共库注入 · 资源准备（基础UI创建，代码包下载） · 业务代码注入和渲染 · 渲染首屏 · 异步请求 优化方案 1、控制代码包大小 · 开启开发者工具中的 “ 上传代码时自动压缩 ” · 及时清理无用代码和资源文件 · 减少代码包中的图片等资源文件的大小和数量 · 将图片等资源文件放到CND中 · 提取公共样式 · 代码压缩，图片格式，压缩，或者外联 · 公共组件提取，代码复用 2、 分包加载 分包加载过程流程 [图片] 在开发小程序分包项目时，会有一个或者多个分包，其中没有分包小程序必须包含一个主包，即放置启动页面或者tabBar页面，以及一些分包都需要用到的公共资源脚本。 在小程序启动时，默认会下载主包并且启动主包内页面，如果用户打开分包内的页面，客户端会把分包下载下来，下载完之后再进行展示。 · 分包加载流程 [图片] 使用分包加载的优点： · 能够增加小程序更大的代码体积，开发更多的功能 · 对于用户，可以更快地打开小程序，同时不影响启动速度 使用分包加载有哪些限制： · 整个小程序所有分包不能超过8M · 单个主包/分包不能超过2M 3、 运行机制优化 · 代码中减少立即执行的代码数量 · 避免高开销和长时间阻塞代码 · 业务代码都写入页面的生命周期中 · 做好缓存策略 4、 数据管理优化 · 首屏请求数量尽量不能超过5个，超过的可以做接口合并（node层，服务端都可以处理） · 对多次提交的数据可以做合并处理 首屏加载的体验建议和渲染性能优化这两部分的内容，将在下次分享给大家。微盟小程序性能优化实践（下）

在上一篇分享中，给大家分享了启动性能加载的相关实践，详情可戳右方链接：微盟小程序性能优化实践（上） 接下来和大家聊一聊首屏加载的体验建议和渲染性能优化。 二、首屏加载的体验建议 · 提前请求     异步数据请求不需要等待页面渲染完成。 · 利用缓存   利用storage API对异步请求数据进行缓存，二次渲染页面，再进行后台更新。 · 避免白屏   先展示页面骨架和基础内容。 三、渲染性能优化 ·  每次 setData 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关 ·  setData 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互 ·  setData 是小程序开发使用最频繁，也是最容易引发性能问题的 ·  在页面列表中使用懒加载+动态移除非可视区域范围内的内容，让dom小下去 ·  耗时比较长的js做到异步，不要阻塞进程（js属于单线程） ·  少使用scroll-view,这个组件对性能的影响太大，单纯的只是需要一块区域滚动，可以使用view+css的方式实现 ·  在页面频繁滚动触发回调函数，会导致页面卡顿，这时必须和防抖动函数或者节流函数相结合做一些处理 ·  页面中的图片可以使用懒加载的方式（添加lazy-load属性，只针对page与scroll-view下的image有效） ·  页面跳转要做一下限制，如果页面快速点击会出现跳转多次的情况  避免不正当的使用setData · 使用data在方法间共享数据，可能增加setData传输的数据量。data 应该仅仅包含与页面渲染相关的数据 · 使用setData 传输大量的数据，通讯耗时与数据量成正比，导致页面更新延迟 可能造成页面更新开销增加。所以setData 仅传输页面需要的数据,使用setData 的特殊Key 实现局部更新 · 短时间内频繁调用setData  (操作卡顿、交互延迟   阻塞通信、页面渲染延迟)，对连续的setData 调用进行合并 · 后台进行页面setData  (抢占前台页面的渲染资源) 例如 活动定时器 再页面切入后台时应该将关闭 避免不正当的使用onPageScroll · 只在必要的时候监听pageScroll 事件 · 避免在onPageScroll 中执行复杂的逻辑 · 避免在onPageScroll 中频繁调用setData · 避免频繁查询节点信息(SelectQuery) 部分场景建议使用节点布局相交状态 ·  监听( IntersectionObserver) 替代 使用自定义组件 在需要频繁更新的场景下，自定义组件的更新只在组件内部进行，不受页面部分内容的复杂性的影响。 使用体验评分功能 在开发过程中使用体验评分可以测试出代码中一些需要优化的点，准备定位到影响性能的原因，很大程序提高页面的性能。

内容详情参见github

github地址组件地址微信小程序 wepyjs 基于scroll-view 下拉刷新说明官方scroll-view组件不支持下拉刷新，只有滚到顶部刷新的机制，所以做一个基于scroll-view的下拉刷新组件。 使用安装组件[代码]npm i wepy-scroll-view-refresh --save-dev[代码]使用提示1、该组件外面必须套用scroll-y的scroll-view(暂时不支持横向滚动)2、scroll-view必须使用scroll事件实时向该组件传递一个scrollTop（scroll-view的scrollTop）参数3、内容区域用卡槽slot="refresh-content"部分填充4、组件刷新会触发refresh事件，父页面需要在events内接收一个refresh的事件5、重置刷新组件调用this.$invoke('refresh', 'reset')方法使用示例// index.wpy<template> <view class="kai-content"> <scroll-view scroll-y="{{true}}" class="refresh-scroll__container" scroll-with-animation="{{true}}" bindscrolltolower="lower" style="width: 100vw;height:100vh;" catchscroll="scroll"> <view style="width:100%;height:100%;"> <refresh :scrollTop.sync="scrollTop"> <view slot="refresh-content" style="margin-top:45px;"> <repeat for="{{[0,1,2,3,4,5,6,7,8,9,10]}}" index="i" item="item" key="new-{{i}}"> <view class="new-block"> {{i}} </view> </repeat> </view> </refresh> </view> </scroll-view></view></template><script>import wepy from 'wepy'import Refresh from 'wepy-scroll-view-refresh'export default class ScrollViewRefresh extends wepy.page { components = { refresh: Refresh } data = { scrollTop: 0 } methods = { lower (index) { console.log(index) }, scroll (e) { this.scrollTop = e.detail.scrollTop this.$apply() } } events = { 'refresh': (data) => { setTimeout(() => { this.$invoke('refresh', 'reset') }, 3000) } } }</script>刷新重制方法this.$invoke('refresh', 'reset')

小程序设置 navigationStyle 是 custom 的时候，没有顶部标题栏，只有右侧的胶囊按钮。 这个胶囊按钮的位置在Android和iOS上不一样；有没有“齐刘海”高度也不一样。 如果自己做的设计需要与胶囊对齐，该怎么做呢？ wx.getSystemInfo 接口返回的 statusBarHeight （基础库1.9.0以上）可以用到这里。代码如下 [代码]wx.getSystemInfo({[代码][代码]      [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]        [代码][代码]// console.log(res.model)[代码][代码]        [代码][代码]// console.log(res.pixelRatio)[代码][代码]        [代码][代码]// console.log(res.windowWidth)[代码][代码]        [代码][代码]// console.log(res.windowHeight)[代码][代码]        [代码][代码]// console.log(res.language)[代码][代码]        [代码][代码]// console.log(res.version)[代码][代码]        [代码][代码]console.log(res.platform)[代码][代码]        [代码][代码]console.log(res.statusBarHeight)[代码][代码]        [代码][代码]let nav_top = res.statusBarHeight + 4;[代码][代码]        [代码][代码]if[代码][代码](res.platform.toLowerCase() == [代码][代码]'android'[代码][代码]){[代码][代码]          [代码][代码]nav_top += 4;[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]_this.setData({[代码][代码]          [代码][代码]global_top: nav_top[代码][代码]        [代码][代码]})[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]})[代码] 效果如下： [图片] 在真机测试发现： iOS 设置fixed定位的紫色横条top为： statusBarHeight + 4px 可以跟右侧胶囊顶部对齐。 在Android系统，需要设置top值为： statusBarHeight + 4px + 4px 才能对齐。 原因未知。 以上代码在开发工具调试，对不起，对不齐。原因未知，以真机测试为准吧。

[图片] 非自定义导航栏高度怎么计算？ 自定义导航栏高度由谁决定？ 小程序自定义导航栏开发注意点与参考文档 一、默认导航栏高度怎么计算？（非custom情况下获取） wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息 screenHeight - windowHeight   计算标题栏高度 [代码]{[代码][代码]       [代码][代码]'iPhone'[代码][代码]: 64,[代码][代码]       [代码][代码]'iPhone X'[代码][代码]: 88,[代码][代码]       [代码][代码]'android'[代码][代码]: 68[代码][代码] [代码][代码]}[代码]不完全统计（ip6 , ip5 , ip6p , ipx , 小米mix2  , 小米5等综合了开发工具提供的数据和真机数据）所得 二、自定义导航栏高度由谁决定？（自定义情况下，屏幕高度和窗口高度没有差别，所以要通过步骤1先获取数据，预定义到代码中） 开发时发现，自定义导航栏的实现需要 包含状态栏+胶囊 ：没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层 根据上一标题中步骤1的函数，可以获得状态栏高度 statusBarHeight demo，点击打开小程序开发工具 三、小程序自定义导航栏开发注意点与参考文档 微信官方设计指导中关于胶囊按钮的描述 由此得知胶囊宽度87pt=116px，设置之后，的确能产生较好的兼容性效果 社区Q&A：自定义标题栏高度计算、在 navigationStyle: 'custom',苹果X和8兼容问题 注意某些方法、参数的兼容性，时刻关注官方更新信息 开一个项目采集设备的screenHeight,windowHeight,pixelRatio等信息到一个数据库中，或者微信可以提供这样一个数据库便于计算，亦或者微信优化自定义标题栏（譬如通知栏可以改变颜色但不要算在自定义范围内，给出胶囊宽高到通知栏距离到右侧屏幕边框距离等相关参数）