页面间的通信在各种项目中都是很常见的功能,在小程序中如何在不同页面中使用组件间通信,
其实很简单,懒得看我叨叨的可以直接查看 🔗 官方的DEMO
微信小程序学习日记 L07 eventChannel 页面事件通信通道
微信小程序学习日记 L06 组件插槽
小程序的插槽用法和 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实现轮播图
早些时候有看到过一个 纯CSS轮播图 的文章,当时有研究过实现,大概是利用了 hash
(锚标记) 和 scroll-snap
来实现的,但是具体实现已经回忆不起来了。
正好现在分享群组里边暂时没有主题了,就想着可以当成一个常驻的补位小环节,大家一起浏览 CodePen 之类的社区找一个大家都感兴趣的 Demo 来研究。
在分享前还是需要自己重新研究一遍的,不然在讲述的时候出错可太 “甜蜜的” 尴尬了。
网页链接里的 noopener、noreferrer 和 nofollow
之前在一篇 帖子 中看到了一个名词 【阻断权重传递】,进而去了解一下这个名词。
阅读相关资料的过程中,收集了3个 no
开头的关键词(noopener
、noreferrer
和 nofollow
),并且作为相似内容整理成这篇笔记。
太长不看版:
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-gap
与column-gap
的简写形式。
起初是在 Grid 布局中用 grid-gap
来设置行间距和列间距的,后来意识到 Multi-column 布局中有一个 column-gap
属性,同时存在 grid-column-gap
和 column-gap
对于开发者来说是一个很疑惑的问题。并且在大范围应用的 Flex 布局中,并没有一个很好的方法来设置行间距和列间距。
于是CSS齐属属性规范开始调整,gap
代替了grid-gap
属性,并且规范对间隙属性进行了大统一,三种布局只需要使用 gap
属性就可以设置间距样式了。
Hexo 主题开发
去年就开始说要更新博客主题了,拖到现在终于有点空闲时间和动力了,相信大家已经使用过 Hexo 了,安装之类的我都不多废话了,直接开始。
想要自定义一个 Hexo 主题大概需要了解一个 模板引擎,Hexo 内置了 Swig
,我所用的是默认安装的 EJS
,反正都差不多,都提供了一些模板语法,书写还是按照Js的方法来的。
然后先按照文档创建完主体目录结构和模板组件,就可以开始开发了,我比较偷懒没有使用 yeoman + generator-hexo-theme 来创建,直接复制了原先的 landscape
主题。
哦,对了!还要选择一个CSS预编译器,我还是没有选择适用了默认安装的 Stylus
,你也可以按照习惯去安装,并且 install
对应的 Hexo 插件。
原型链! __proto__ 与 prototype
Every JavaScript object has a second JavaScript object (or
null
,but this is rare) associated with it. This second object is known as a prototype, and the first object inherits properties from the prototype.
每个 JavaScript 对象都会对应一个原型对象(除了null
),并从原型对象继承属性和方法。
JavaScript 权威指南
一句话解释:对象 __proto__
属性是JS内置的,它所对应值是原型对象的 prototype
;而 prototype
就是你自己写的原型属性、方法 加上 JS原型内置的属性、方法