信公眾號的每一次改動對于內容創業者而言都充滿著不確定性,本文作者對最近公眾號更新的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 >江哥博客</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小時內與您取得聯系。