信公众号的每一次改动对于内容创业者而言都充满着不确定性,本文作者对最近公众号更新的6个功能进行了梳理总结并对其利弊进行了分析,与大家分享。
从年初开始,微信接连进行了一系列的产品更新,动作很多。
包括视频号、深色模式、群待办、群备注、朋友圈跳到还没看的位置,还有处于灰度测试阶段的微信版花呗「分付」。除此之外,微信公众平台(公众号)也进行了多次产品迭代,除了之前都知道的付费阅读,还有很多小变化。
每次更新,最着急的应该是各种第三方插件开发商了,经常需要跟节奏进行升级。
先说第一个,也就是昨天刚上线的文章留言区支持作者多次回复。
如果按以前的产品规则,读者留言后作者只能回复一条。
而且设置为精选后,留言和回复会一起被公示到留言区。
更新后,公众号作者可以对读者的留言进行多级回复,且留言内容和回复可以分开设置精选。
这种设计,很好的增加了作者的反向沟通次数。
在用户场景中,以前作者只能回复一次。如果有补充,只能复制并删掉原回复内容,然后补充完再次回复。
对于读者,如果补充留言,则可以发起一条新的留言。
但如果同一个读者多次留言,在文章留言区会分成多条展示,而且会被其他留言给间隔开,体验就不是很好。
相比之下,同一读者和作者的盖楼模式就是一种比较好的解决方案。
作者的多条回复在超过 3 条后就会折叠,需要读者手动展开才能查看全部。
这就不禁让人联想出一个场景,一个喷子用户爽完后,作者可以连环开炮。
一个拿手枪、一个拿机枪,你说谁威力大。
关键是,是否上战场还是由拿机枪的来决定,而且连出哪颗子弹都可以选择。
从产品角度看,留言区的这次更新是为了增强作者和读者的互动属性。
如果未来能开放基于同一条留言的一(作者)对多(多读者)模式,那公众号留言区的盖楼才算完整。
现在,只能算是一个阉割版的盖楼模式。
我认为公众号团队未来有可能开放一对多的留言功能,因为实际场景中确实有很多读者在针对其他读者的留言进行回复。
比如我的文章中就经常有读者留言中带着「回复一楼」这样的主题。
但随着其他留言点赞数的变化,原本的留言楼层顺序早就变了,这就很尴尬。
都知道,新注册的公众号是没有留言功能的,很多人觉得这是微信的决定。
其实,对于这一点,不取决于微信平台的意志。
懂的自然懂,所以就别怪微信了。
微信公众号在后台把原「页面模板」功能升级成了「专辑」,新瓶装老酒,也有一些新变化。
以前的页面模板是这样的。
其实可以理解成一个自定义的文章集合页,可以设置最多三个顶部滚动 banner。
底部可以设置文章分类 tab,文章由作者自己选择添加。
页面模板生成后就是一个独立的 H5 页面,支持微信群和朋友圈,这跟现在的专辑功能也是保持一样的。
升级后,换了个更直观的名字。
说实话,以前的「页面模板」这名字乍一看真不知道是干嘛的。
因为这个功能还在逐渐灰度中,我截取冯大的小道消息专辑页面做参考。
可以看到,有专门的专辑封面、名称、介绍以及文章合集,同时还有文章发布日期、阅读量、精选留言数。
还有一个细节,专辑里的文章好像默认都是带前缀序号的。
说实话,我觉得这个设计有点多余,而且视觉体验上容易跟标题混在一起。
对于专辑功能的目的,其实也好理解,无非是为了解决长尾文章的问题。
因为公众号的产品机制和文章时效性,很多已发布的文章就变成了长尾,而且比较分散且不连续。
虽然在公众号详情的历史文章里能看到,但同时也掺杂着很多其他信息,体验上就不是很好。
而这次专辑功能的优化,要求入选专辑的必须是原创。
这给作者的历史优质文章提供了一个集合地,也能让其他人一次性获取所有文章。
但问题是,如果还是手动设置专辑内容,这个维护就比较麻烦。
我之前设置过页面模板,也把入口放到了底部菜单,但因为需要经常维护更新,所以索性下掉了。
我觉得专辑的特点应该更突出可分享性,提供在朋友圈和群里面更好的分享体验。
比如视频号卡片和小程序卡片,而不仅仅只是一个链接。
以前微信原生的发布器是不支持超链接和小程序发布功能的。
但可以通过第三方插件或者直接写链接代码发布。
例如如果我想发布一个纯链接到推送信息流里,可以直接在文字消息里写<a href=”链接地址”>链接文字内容</a>。
消息发送后,这段 HTML 标签代码就会被转化成一个可点击的链接。
现在,微信上线了原生功能,能支持文字链接和小程序链接发布。
再通过上面代码的方式发布就不再识别了,发布出去就是源代码本身。
此外,文字链接发布后支持直接打开进入详情页,而且可以看到文字链接消息的阅读量。
这一点在以前是做不到的。
以前在文章内上传图片的大小限制是 5M,现在提升到了 10M,这对一些高清图和动图比较友好。
而且还特别提示了深色模式下阅读体验的问题,因为深色模式下,图片的底图背景是能显示的。
说实话,深色模式我是真用不习惯。
之前有读者好奇我是怎么知道他赞赏了多少次、留言多少次、以及是什么时候关注的。
其实这些数据在后台都能看到。
前段时间公众号后台也更新了一个小功能,能在一篇文章的留言下按照 4 个维度进行排序。
其中有两项就是留言总数和赞赏总额排行。
这不是针对某一篇文章,而是以单个用户进行的历史统计的,所以是累积。
证明是否是老铁真爱粉,就更加一目了然了。
所以,好奇自己是什么时候关注的,以及留言过多少次或累计交过多少稿费的。
不妨留言试试,我可以挑选一些老铁放出来。
昨天下午,公众号又上线了一个新功能,支持在文章内嵌入搜索组件,实现对作者历史文章的快速检索。
入口在文章编辑器的右上角,目前最多支持 6 个关键词设置。
编辑文章时,可以在文章任何位置嵌入搜索组件入口,用户点击后可以根据作者关键词和自定义关键词进行历史文章搜索。
搜索组件的推出,能很好的盘活作者的历史长尾文章,同时也反向要求作者对文章内容的结构化。
其实这并不是一个新功能,而是对原有隐藏很深的公众号搜索能力的优化。
以前入口是在公众号详情页面的右上角,这次优化提升了入口优先级,而且给出了更好的解决方案。
微信团队做产品迭代一向比较谨慎,小心求证,迭代的步子通常也不会很大。这是值得很多产品团队学习的。
而且他们的灰度机制做的很好,当时开通付费阅读时,我是全网第一批灰度用户,被邀请进入微信团队的灰度测试群。
群里的用户质量很高,而且都是公众号的深度用户。
对产品比较熟悉,大家也提出了很多不错的建议,微信团队也在积极采纳和反馈。
此外,他们对问题响应很及时。
之前我发现公众号订阅助手里留言功能异常,每次回复或加精选后就无故消失了,多次测试证明可复现。
跟他们产品经理说完后,很快就处理完毕,并且给了我一个十分详细的反馈结果。
积极思考、小心求证、尊重用户反馈、及时响应,这是我对微信公众号团队的直观印象。
微信后续还会有一些积极的变化,拭目以待!
唐韧(Ryan),微信公众号:唐韧,人人都是产品经理专栏作家。前Juliye Care产品总监,《产品经理必懂的技术那点事儿》作者,写过代码、做过产品、出过一本书,有过 4 年的创业经历,也在大厂服役过,如今是一名自由职业者。
本文原创发布于人人都是产品经理。未经许可,禁止转载
题图来自 Unsplash,基于CC0协议
、location.href常见的几种形式
①如果页面中自定义了frame,那么可将parent、self、top换为自定义frame的名称,效果是在frame窗口打开url地址。
②此外,window.location.href=window.location.href;和window.location.Reload();都是刷新当前页面。区别在于是否有提交数据。当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据.
③用window.open()打开新页面但是用window.location.href=""却是在原窗口打开的.有时浏览器会一些安全设置window.open肯定被屏蔽。例如避免弹出广告窗口。
二、location.href不同形式之间的区别
a.html:
b.html:
c.html:
d.html:
a.html里面嵌着b.html;b.html里面嵌着c.html;c.html里面嵌着d.html
在d.html里面head部分写js:
再次运行a.html,点击那个"跳转"按钮,运行结果贴图二如下:
对比图一和图二的变化,你会发现d.html部分已经跳转到了百度的首页,而其它地方没有发生变化。这也就解释了"本页跳转"是什么意思。
修改d.html里面的js部分为:
分析:我点击的是a.html中嵌套的d.html部分的跳转按钮,结果是a.html中嵌套的c.html部分跳转到了百度首页,这就解释了"parent.location.href是上一层页面跳转"的意思。再次修改d.html里面的js部分为:
运行a.html后,再次点击"跳转"按钮,
你会发现,a.html已经跳转到了百度首页。
分析:我点击的是a.html中嵌套的d.html部分的跳转按钮,结果是a.html中跳转到了百度首页,这就解释了"top.location.href是最外层的页面跳转"的意思。
三、location.href总结
看完上面的讲解之后,在来看看下面的定义你就会非常明白了:
location是window对象的属性,而所有的网页下的对象都是属于window作用域链中(这是顶级作用域),所以使用时是可以省略window。而top是指向顶级窗口对象,parent是指向父级窗口对象。
四、window.location.href和window.open的区别
window.location是window对象的属性,而window.open是window对象的方法window.location是你对当前浏览器窗口的URL地址对象的参考!window.open是用来打开一个新窗口的函数!
在给按钮、表格、单元格、下拉列表和DIV等做链接时一般都要用Javascript来完成,和做普通链接一样,可能我们需要让链接页面在当前窗口打开,也可能需要在新窗口打开,这时我们就可以使用下面两项之一来完成:
window.location或window.open如何指定target?这是一个经常遇到的问题,特别是在用frame框架的时候解决办法:
或
5、window.open用来打开新窗口window.location用来替换当前页,也就是重新定位当前页
用户不能改变document.location(因为这是当前显示文档的位置)。window.location本身也是一个对象。
但是,可以用window.location改变当前文档(用其它文档取代当前文档),而document.location不是对象。服务器重定向后有可能使document.url变动,但window.location.href指的永远是访问该网页时用的URL.大多数情况下,document.location和location.href是相同的,但是,当存在服务器重定向时,document.location包含的是已经装载的URL,而location.href包含的则是原始请求的文档的URL.
6、window.open()是可以在一个网站上打开另外的一个网站的地址window.location()是只能在一个网站中打开本网站的网页
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小编。
lt;h2 id="title1">开发工具(工欲善其事必先利其器)</h2>
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后的课程中我们统一采用最高级高发工具来编写网页
<h3 id="title2">常见的前端开发工具</h3>
记事本: 提示功能较差
editplus/nodepad++: 提示功能较差
Dreamwaver: 更偏向设计
Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
WebStorm: 重量级, 自带功能全面
其它ide(zend studio、netbean等)
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 今后的课程中我们统一采用最牛逼最高级的高发工具WebStorm
<h3 id="title3">WebStorm安装和使用</h3>
安装软件
1.png
2.png
3.png
4.jpg
5.jpg
6.png
7.jpg
8.png
破解软件
9.png
10.png
11.jpg
12.jpg
13.png
14.png
汉化软件
15.png
16.jpg
设置模版
创建文件
17.png
18.jpg
关注微信订阅号:网页设计轻松学 有更多内容
19.png
WebStorm常见快捷键
如何在WebStorm中利用快捷键创建一个新的.html的文件
同时按下键盘上的Ctrl + Alt + Insert
如何在WebStorm中让光标移动到当前行的末尾
按下键盘上的End键即可
如何在WebStorm中让光标移动到当前行的最前面
按下键盘上的Home键即可
如何在WebStorm中让光标在多行中闪烁
按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可
如何在WebStorm中快速的复制光标所在的那一行
按下键盘上的Ctrl + D
如何在WebStorm中快速的删除光标所在的那一行
按下键盘上的Ctrl + X
如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签
按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可
<h2 id="title4">基础标签学习</h2>
<h3 id="title5">H系列标签(Header 1~Header 6)</h3>
作用:
用于给文本添加标题语义
格式:
<h1>xxxxxx</h1>
注意点:
H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
被H系列标签包裹的内容会独占一行
在H系列的标签中, H1最大, H6最小
在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)
<h3 id="title6">P标签(Paragraph)</h3>
作用:
告诉浏览器哪些文字是一个段落
格式:
<p>xxxxxxxx</p>
注意点:
在浏览器中会单独占一行
<h3 id="title7">Hr标签(Horizontal Rule)</h3>
作用:
在浏览器上显示一条分割线
格式:
<hr />
注意点:
在浏览器中会单独占一行
通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做
<h2 id="title8">HTML注释(Annotation)</h2>
什么是注释?
注释是在所有计算机语言中都非常重要的一个概念,从字面上看,就是注解、解释的意思
注释可以用来解释某一段程序或者某一行代码是什么意思,方便直接或程序员之间的交流
为什么要使用注释?
适当的注释,能够让我们的程序更加可读,所以用中文提示自己,这里的程序是干什么的
注释格式
<!--被注释的内容-->
注意点:
被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
注释不能嵌套使用
<!--<!--被注释的内容-->-->
快捷键: ctrl + /
<h3 id="title9">img标签(image)</h3>
作用: 在网页上插入一张图片
格式: 
标签的属性
写在标签中K="V"这种格式的文本我们称之为标签属性
属性名称 | 作用 |
---|---|
src(source) | 告诉浏览器需要插入 的图片路径, 以便于浏览器到该路径下找到需要插入的图片 |
alt(alternate) | 规定图像的替代文本, 只有 在src指定的路径下找不到图片 ,才会显示alt指定的文本 |
title | 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示) |
height | 设置图片显示的高度 |
width | 设置图片显示的宽度 |
注意点:
img标签添加的图片默认不是占一整行空间
如果想让图片等比拉伸, 只写高度或者宽度即可
关注微信订阅号:网页设计轻松学 有更多内容
<h3 id="title10">br标签(Break)</h3>
作用:
让内容换行
格式:
<br/>
注意点:
br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做
<h3 id="title11">相对路径和绝对路径</h3>
图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径
, 因为在企业级开发中没有人使用绝对路径
绝对路径
从电脑的具体盘符开始寻找我们需要的资源

以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片
相对路径
一个文件相对于另外一个文件的位置寻找我们需要的资源

假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片
为什么没人使用绝对路径?
可以移植性太差.
什么是可移植性?
可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行
为什么绝对路径可移植性差?
假如我编写的html文件放在我电脑的 F:/lnj
目录下, html文件中用到的图片放在F:/lnj/images
目录下, 我给src指定的绝对路为F:/lnj/images/girl.png
. 那么将来我将整个lnj文件夹拷贝给你
, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png
, 而src会去F盘找, 所以不会显示
你只有将lnj
文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好
Q群;162542073
为什么相对路径可移植性好?
同上, 如果src指定的路径为images/girl.png
, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片
, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示
相对路径几种查找方式
../代表访问上级目录
假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
直接编写, 例如abc/girl.png
加上./ 编写, 例如./abc/girl.png
相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png
或./abc/bbb/ccc/ddd/girl.png
直接编写, 例如: girl.png
加上./ 编写, 例如./girl.png
./代表当前目录, ./girl.png
代表在当前目录下查找
同级
下级
上级
注意事项:
相对路径不会出现这种格式aaa/../bbb/girl.png
虽然可以显示, 但是企业开发中千万不要这么写
<h3 id="title12">a标签(anchor)</h3>
格式: <a href="http://www.it666.com">江哥博客</a>
作用: 用于从一个页面链接到另一个页面
注意事项:
在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
a标签也叫做超级链接
或超链接
a标签的属性
属性名称 | 作用 |
---|---|
href(hypertext reference) | 指定跳转的目标地址 |
target | 告诉浏览器是否保留原始界面, _blank保留, _self不保留 |
title | 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示) |
base标签和a标签结合使用
如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
格式: <base target="_blank" />
注意事项:
base必须嵌套在head标签里面
如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
a标签其它用法
例如<a href="girl.zip">下载福利资源<a/>
格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
只需要在01-锚点链接.html
页面添加一个id位置即可
2.1.格式<a href="#location">跳转到指定位置</a>
2.2.在页面的指定位置给任意标签添加一个id属性
例如 <p id="location">这个是目标</p>
格式<a href="#">江哥博客</a>
格式<a href="javascript:">江哥博客</a>
假链接(本质是跳转到当前页面)
跳转到当前
页面指定位置
(锚点链接)
跳转到指定
页面的指定位置
下载(极力不推荐使用)
*请认真填写需求信息,我们会在24小时内与您取得联系。