微信小程序学习日记 L09 消息推送

项目新增了一个过期提醒的需求,需要增加定时推送消息的功能,查看文档了解到消息推送可以选择两种推送方式,一种是 小程序订阅消息,另一种是 服务号模板消息

最简单的肯定是小程序直接拉起订阅消息,不需要做很多的准备,在开放平台设置好订阅消息模板之后直接使用就可以了。

服务号订阅则会麻烦一些,需要从小程序跳转到公众号引导用户关注,然后绑定公众号的OpenID到账户上。

所以肯定是先尝试最简单的小程序订阅消息啦!

阅读全文

简写的 flex:1 具体简写了些什么?

前几天写 flex 容器宽度被内容撑开的问题 查文章的时候,看到了一篇 flex:1 到底代表什么?,确实很多时候只是知道 flex:1 的作用,并不清楚他具体代表了什么。
和那篇帖子一样,我原先理解的也是 flex:1 应该是 flex:1 1 auto 的简写。因为设置了 flex:1 之后就可以让容器扩张了。既然 flex 的默认值是 0 1 auto 那么理所当然的就这样认为了。

看完了这个帖子之后发现其实并不是这样。
简写的 flex:1 其实是 flex:1 1 0%,其中的 flex-basis 的值从默认值变成了 0% ,但是文章并没有说明为什么会这样。

确实这个东西不值得深入研究为什么,只需要知道和理解就可以了。
但,正好昨天在翻《CSS新世界》的时候看到了这部分内容!

阅读全文

flex 容器宽度被内容撑开的问题

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

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

flex 容器宽度被内容撑开的问题

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

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

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

阅读全文