微信小程序返回键被劫持点击无效

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

具体跳转路由为:

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


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

监听了 wx.navigateBacksuccessfailcomplete 三个回调之后发现,successfail 都不执行,只执行了 complete 的回调,输出为:

complete: {errMsg: "fail:navigateBack intercepted"}
阅读全文

编程中的"副作用"是什么意思?

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

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

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

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

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

阅读全文

微信小程序学习日记 L08 分包加载

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

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

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

阅读全文

记小程序flex布局垂直排列出现高度崩塌的问题

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

阅读全文

分享会 只用CSS实现轮播图

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

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

阅读全文

网页链接里的 noopener、noreferrer 和 nofollow

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

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

太长不看版:

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

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

阅读全文

使用属性选择器为 Markdown 里的图片添加样式

在写 上一篇文章 的时,文章开头有一张示例图,为了节省空间,我用的图片一般都不会很大,并且那张图只是Google出来的,没有调整就直接放上来了。

在列表页看着图片居左就很难受,想要把它居中放置,但是不想用 HTML 的方式来写,就突然想起来早前有看到过 肉大的一篇分享,是通过 CSS属性选择器 来实现的,就想着自己也可以整理一下,然后放到博客的主题当中使用,以后图片排版就会方便很多。

阅读全文

聊聊数据大屏 “炫酷” 容器边框的实现

最近大屏又开始火了,群里好多人又开始捡起来了数据可视化,我也一样遇到了新得是数据可视化项目,但是这次不是说 ECharts,而是数据大屏上的所谓 “科技感” 容器,比如下图:

数据大屏截图

可以看到很多的边框,虽然说可以直接让 UI 小姐姐 切给我们出来所有不同规格的背景图片来解决问题,但是就需要 UI 一份一份切给我们,就很麻烦,而且占用首屏加载的资源。
我就想是否可以用一些精灵图来完成,或者一些简单的边框可以直接使用一些 CSS 的奇技淫巧来完成。

我从花瓣上找了一些示例,然后通过CSS复现,接下来上实例

阅读全文

CSS 中的遮罩属性 mask/masks

最近有点忙,于是又停更了一个月😂,前两天在 V2 上看到 一个帖子,需求是要做一个镂空遮罩。

回答的过程中想起来有一个 mask 属性来着,好像可以试试,但是快下班了,也没有找到合适的遮罩图,也不想打开PS自己画一个再传图床,就还是用的 clip-path 做了一个 CodePen Demo
这两天稍微有点时间,可以考虑研究一下这个遮罩属性,以及能否搭配 filter:drop-shadow() 使用。

阅读全文

在 Flex 布局中使用 gap 属性

最近在更新博客的样式,突然想到现在的flex布局已经可以定义间距了,所以大概整理了一下关于gap这个新属性资料。

gap 属性是用来设置网格行与列之间的间隙(gutters),该属性是 row-gapcolumn-gap 的简写形式。

起初是在 Grid 布局中用 grid-gap 来设置行间距和列间距的,后来意识到 Multi-column 布局中有一个 column-gap 属性,同时存在 grid-column-gapcolumn-gap 对于开发者来说是一个很疑惑的问题。并且在大范围应用的 Flex 布局中,并没有一个很好的方法来设置行间距和列间距。

于是CSS齐属属性规范开始调整,gap 代替了grid-gap 属性,并且规范对间隙属性进行了大统一,三种布局只需要使用 gap 属性就可以设置间距样式了。

阅读全文