小程序的视频内容流自动播放 啊啊啊，又解决一个问题 0、起因 这个需求产生的起因，是在做内容流（包含文本，图片，视频）的时候，需要如果流里面有视频，则滚动到一定位置时自动播放视频，类似朋友圈、微博等等的自动播放效果。 [图片] 1、第一版尝试 第一版的思路是： 收集当前所有内容流相对于页面头部的高度，做成一个Array 滚动过程中，监听页面滚动事件，当达到某个高度要求，则播放对应的索引视频 这个操作缺点太多了，捡几个主要的说 缺点： 内容流是一个个的组件，获取距离顶部高度不方便，也不太准。并且组件内需要通过事件传播到列表页，在列表页进行高度Array整理、事件监听、切换索引等等（如果有几种列表页，就要写几遍，很麻烦） 监听滚动事件本身就消耗性能，做了节流也不是那么优秀 2、第二版尝试 突然，就发现了[代码]wx.createIntersectionObserver[代码]这个属性，它的作用是：返回[代码]intersectionObserver[代码]对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见（创建一个目标元素，根据目标元素和视窗的相交距离来判断当前页面滚动的情况。通常这个方案也用于页面图片的懒加载）。参考https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.html 怎么解释呢，就是可以理解为，做一个监听，如果当前被监听的元素，进入了你规定的视界或者离开你规定的视界，就触发。 那么，怎么做到监听呢，参考如下代码： [代码]/** 监控视频是否需要播放 */ let {screenWidth, screenHeight} = this.extData.systemInfo //获取屏幕高度 let topBottomPadding = (screenHeight - 80)/2 //取屏幕中间80的高度作为播放触发区域，然后计算上下视窗的高度 topBottomPadding // 80这个高度可以根据UI样式调整，我这边基本两个视频间隔高度在100左右，超过了两个视频之间的间隔，就会冲突，两个视频会同时播放，不建议过大 const videoObserve = wx.createIntersectionObserver() videoObserve.relativeToViewport({bottom: -topBottomPadding, top: -topBottomPadding}) .observe(`#emotion${this.data.randomId}`, (res) => { let {intersectionRatio} = res if(intersectionRatio === 0) { //离开视界，因为视窗占比为0，停止播放 this.setData({ playstart: false }) }else{ //进入视界，开始播放 this.setData({ playstart: true }) } }) [代码] 其中，[代码]observe[代码] 是对应你需要监听的视频（也就是滚动进入视窗的元素） 那么，为什么选择[代码]relativeToViewport[代码]呢，是因为我们需要对它进入某一个视窗进行监听，而不是对进入整个屏幕视窗监听（因为可能整个视窗里会有多个视频）。 以上，就是整个逻辑思路。 最开始用的[代码]relativeTo[代码]监听视频进入某个元素(如[代码].view-port[代码])，但是后来发现每个页面都要写这个元素，太麻烦，并且容易遮盖操作区域 [代码]// 太麻烦，后来舍弃了这个方案 <view class="view-port" style="height: 100rpx; position: fixed; z-index: 1;width: 100%;letf:0;top:50%;transform: translateY(-50%);"></view> [代码]

Sass或者Less开发，在windows使用miniprogram-ci 上传代码时报错,但是用开发工具可以正常上传代码，错误信息如下：  {   type: 'SummerError',   message: 'The file (C:\\hp-work\\TestMiniProgram\\miniprogram\\styles\\variable.less) required by app.less is outside the project',   stack: undefined,   code: 10046,   path: 'miniprogram/app.less',   plugin: 'summer-less',   hook: 'load' } [图片] 分析定位后找到报错位置 miniprogram-ci -> dist -> summer ->graph -> basegraph.js -> loadSourceForModule -> addWatchFile 方法 if (!i.startsWith(this.rootPath))     throw (0, error_1.makeSummerError)(             `The file (${t}) required by ${e.sourcePath} is outside the project`,              error_1.SummerErrors.SUMMER_PLUGIN_CODE_ERR,              e.path         ); 在该方法里面输出 i,以及 this.rootPath console.log('loadSourceForModule i--->', i) console.log('loadSourceForModule rootPath--->', this.rootPath) 在控制台可以看到相关信息： loadSourceForModule i---> C:/hp-work/TestMiniProgram/miniprogram/styles/variable.less loadSourceForModule rootPath---> C:\hp-work\TestMiniProgram/\miniprogram 可以发现是i 和 rootPath的格式不一致导致的该问题。 处理方式，将两个path的格式改成一致即可： addWatchFile: (t) => {  const i = (0, tools_1.normalizePath)(t);  const _r = (0, tools_1.normalizePath)(this.rootPath)  if (!i.startsWith(_r))    throw (0, error_1.makeSummerError)(      `The file (${t}) required by ${e.sourcePath} is outside the project`,      error_1.SummerErrors.SUMMER_PLUGIN_CODE_ERR,      e.path    );    e.addWatchFile(path_1.default.posix.relative(this.rootPath, i));  }, 重新打包上传，上传成功 希望官方看到后尽快将这个问题修复，该问题只在window平台上发生 相关BUG： https://developers.weixin.qq.com/community/develop/doc/00086410108d58836c6d9995151000?highLine=is%2520outside%2520the%2520project