在弹性布局中，一个 flex 子项的最终尺寸是基础尺寸（或内容尺寸）、弹性增长或收缩、最大最小尺寸共同作用的结果。
最终尺寸计算的优先级是：
最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸

• 基础尺寸由 flex-base 属性或 width 属性，以及 box-sizing 盒模型共同决定；
• 内容尺寸最指最大内容宽度，当没有设置基础尺寸是会顶替基础尺寸的角色；
• 弹性增长指的是 flex-grow 属性，弹性收缩指的是 flex-shrink 属性；
• 最大尺寸主要受 max-width 属性限制；最小尺寸则比较复杂，受最小内容宽度、width 属性和 min-width 属性共同影响。

很早之前就遇到过这个问题但没有整理，当时处理完问题之后就没有管了。昨天又遇到了同样的问题，因为嵌套的层次很深折腾了有2个小时，所以还是需要记录下来以免未来又忘了。

其实很简单，容器使用 width:0;flex:1; 即可解决问题。

但是稍微有点没有理解的是：为什么设置宽度为 0 时，使用 flex-grow:1 可以使容器放大，但是设置宽度为 100% 时，使用 flex-shrink:1 并不会让容器缩小。

今天小程序完成了一个新功能，在自测的时候发现了一个问题，小程序的返回按钮点击没反应了，一开始以为是模拟器的问题，结果使用实机测试同样复现了这个问题。

具体跳转路由为：

首页 => wx.navigateTo => 新功能列表页 => wx.navigateTo => 新功能添加页 => wx.redirectTo => 新功能详情页 => 返回按钮 => 新功能列表页 => 返回按钮 => 首页

结果从 详情页 返回 列表页 之后，返回按钮点上去没反应了！！！页面中添加一个自定义按钮调用 wx.navigateBack 返回也不行。

监听了 wx.navigateBack 的 success、fail、complete 三个回调之后发现，success 和 fail 都不执行，只执行了 complete 的回调，输出为：

complete: {errMsg: "fail:navigateBack intercepted"}

副作用，是相对于主要作用的，并不只是“坏”作用

因为“药物的副作用”，一直以来都没有很好的理解编程中 “副作用” 一词，想当然的把它理解为了 一些“负面”的作用。

对于 “副作用” 科书版的解答就是：

• “副作用”（side effect），指的是函数内部与外部互动，产生运算以外的其他结果。

但是很笼统，对于已经有刻板影响的中文世界，还是很容易曲解的。
正巧今天在水群的时候提到了这个词，发现其实还有很多人和我有一样的问题，并没有很好的理解。

目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

随着项目的不断迭代，小程序的主包会越来越大， 终究会有一天会超过 2M 的主包限制，首先考虑到的就是图片资源放到 CDN 或者 OSS，起初会很奏效，但是随着一些JS库的加入就没办法了，即使使用了 .min 版本，或者精简了类库代码，主包还会很大，这时候就会用到项目分包了。

今天开发的小程序遇到了一个问题，在 iPhone8 iOS 12.2 的设备上访问出现了高度崩塌的问题，但是在其它的型号的 iOS 和 Android 设备上没有复现，
一开始以为是 微信版本 的问题，但是更新到了最新还是出现该问题。调试了一下发现问题出在子元素的 display:flex 上，修改为 block 之后高度就不会崩塌了，但是元素的样式就没办法做了。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

赶巧不巧，正好在假期第一天遇到了修改接口地址的问题 —— 节前最后一个工作日后端兄弟自己修改了编译后的 Js 文件中的接口地址，但是并没有生效，只不过当时没发现，今天电话过来问应该怎么处理，奈何电脑没带在身边，只能让他修改了接口地址之后重新编辑被修改的 Js 文件名中的 hash 值随便改一位，同时修改一下 index.html 中的引入路径。
可是没多久又发来消息说，不行还是请求旧地址，没有被修改。我怀疑是页面被缓存了，于是让他确认了一下页面源代码中是否有 no-cache 的 meta ，他说有，但是页面还是被缓存了，看到引入 Js 文件的路径还是他修改前的旧路径。
于是我就纳闷了，好像浏览器跳过了设置的机制，并没有重新请求服务器获取最新的 index 文件。

页面间的通信在各种项目中都是很常见的功能，在小程序中如何在不同页面中使用组件间通信，
其实很简单，懒得看我叨叨的可以直接查看 🔗 官方的DEMO

小程序的插槽用法和 Vue 的 slot 几乎一模一样，现在组件内需要的地方加入插槽（<slot>）节点就行了。也可以直接查看小程序提供的 🔗 代码片段

<!-- 组件模板 P.S. 设置语言类型为html是因为wxml没有高亮 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

是不是很简单，需要使用到具名插槽的话，只需要在组件的 options 中开启 多slot支持 multipleSlots 就可以了。

早些时候有看到过一个 纯CSS轮播图 的文章，当时有研究过实现，大概是利用了 hash (锚标记) 和 scroll-snap 来实现的，但是具体实现已经回忆不起来了。

正好现在分享群组里边暂时没有主题了，就想着可以当成一个常驻的补位小环节，大家一起浏览 CodePen 之类的社区找一个大家都感兴趣的 Demo 来研究。
在分享前还是需要自己重新研究一遍的，不然在讲述的时候出错可太 “甜蜜的” 尴尬了。

之前在一篇 帖子 中看到了一个名词 【阻断权重传递】，进而去了解一下这个名词。

阅读相关资料的过程中，收集了3个 no 开头的关键词(noopener、noreferrer 和 nofollow)，并且作为相似内容整理成这篇笔记。

太长不看版：

• noopener: 使用target="_blank"所打开的页面，将无法获取 window.opener 对象。
• noreferrer: 使打开的页面无法获取 document.referrer 信息。
• nofollow: 表明对该链接不认可，不传递权重。

如果有兴趣可以接着看下去