整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
樂CMS采集，奇樂CMS基于國內主流框架開發，多模塊化，手冊完善。是很多站長的建站選擇。但是由于奇樂比較小眾，導致市面上沒有一款采集器是針對奇樂CMS的采集發布，這就很惱火了，奇樂CMS采集可批量采集發布偽原創以及一鍵自動百度、神馬、360、搜狗推送。還有很多相關的SEO優化設置。助力網站SEO收錄還有SEO排名。
奇樂CMS采集不會過度優化網站。奇樂CMS讓文章內容和關鍵詞標題相互呼應，不能出現不相關的情況。同時對于網站的內容，奇樂CMS采集注意最基本的質量問題，即文章內容具有一定的價值，用戶可以從中獲得一些有用的信息。
其實網站周圍的關鍵詞其實就是各個頁面的標題。對于文章，我們最好穿插我們網站的關鍵詞，或者至少是一些網站關鍵詞的相關詞。這主要有三個目的:一是提升關鍵詞在整個網站的相關性；第二，用這個標題的文章頁面可以更好地吸引點擊和流量；第三，關鍵詞相關的標題頁越多，網站的競爭力就越強，排名也就越高。
相比其他的奇樂CMS采集，這個奇樂CMS采集基本上沒有什么規則，更不用說花大量的時間去學習正則表達式或者html標簽了一分鐘即可使用，只需輸入關鍵詞即可(奇樂CMS采集還配備了關鍵詞功能)。一路自動掛機！設置任務，并自動執行偽原創的收集和發布并主動推送至搜索引擎。
無論你有成百上千個不同的CMS網站，你都可以實現統一管理。一個人維護幾百篇網站文章更新不是問題。這個奇樂CMS采集還配置了很多SEO功能，在通過軟件收集偽原創發布的同時，可以提高很多SEO優化。
搜索引擎觀察網站都是循序漸進的，喜歡網站每天都有內容的更新，如果今天發現了站內沒有更新，特別是對一些新站來說，很有可能第二天就不來了，這無疑對于收錄是不太好的，所以建議奇樂CMS采集文章的更新要每天進行，慢慢的蜘蛛就會有天天訪問網站的習慣，自然對收錄是有利的。
很多時候，網站的內容規模到達一定程度的時候，僅僅依靠單薄的頁面內鏈還是不夠的，為了增加蜘蛛的訪問入口，外鏈是一個非常重要且不容忽視的辦法，而且不僅如此，也會給網站的帶來可觀的提升！
做網站地圖幾乎是所有站長們必須要采用的手段了，把網站的鏈接集中在于地圖這一個頁面上，可以很好地幫助蜘蛛一覽網站的全貌，從而方便蜘蛛的鏈接抓取，進而促進網站的收錄。
雖然要求網站關鍵詞盡量出現，但是一定要注意這種出現的頻率，因為網站頁面合理的關鍵詞密度是2%-8%。我們在布局頁面關鍵詞的時候，一定要注意這一點。關鍵詞的出現不僅不能太少，也絕對不能太多。但是對于文章的頁面，大賽建議文章的第一段可以適當出現1-2個關鍵詞，因為我們的首頁在檢索文章內容時可以自動檢索這些關鍵詞，從而控制我們首頁的關鍵詞密度！今天關于奇樂CMS采集的講解就到這里下期分享更多SEO相關的知識還有見解。
著工業自動化的不斷發展，數據采集與遠程控制成為了生產過程中不可或缺的一環。而工業數采網關，作為連接工業設備與上位管理系統之間的橋梁，扮演著越來越重要的角色。HiWoo Box 作為一款優秀的工業數采網關產品，為 PLC、傳感器、DCS、OPC 等工業設備的數據采集與遠程控制提供了高效、穩定的解決方案。
一、什么是工業數采網關？
工業數采網關是一種專門用于工業領域的數據采集和傳輸的設備。它具備多種通信接口和協議轉換功能，能夠將不同廠商、不同協議的工業設備連接起來，實現數據的統一采集和傳輸。同時，工業數采網關還具備數據緩存、預處理和加密等功能，能夠確保數據的安全性和完整性。
二、HiWoo Box 作為工業數采網關，如何遠程做數據采集？
HiWoo Box 作為一款優秀的工業數采網關產品，具備強大的遠程數據采集能力。它支持多種通信協議和接口，可以與 PLC、傳感器、DCS、OPC 等工業設備進行無縫對接。通過配置相應的采集規則和參數，HiWoo Box 可以實現對這些設備的實時數據采集和傳輸。
具體來說，HiWoo Box 的遠程數據采集過程包括以下幾個步驟：
1、設備連接：HiWoo Box 通過支持的通信接口和協議與工業設備進行連接。這可以是通過有線連接（如以太網、串口等）或無線連接（如WiFi、4G）實現的。
2、數據采集：一旦設備連接成功，HiWoo Box 就可以開始根據配置的采集規則和參數從設備中讀取數據。這些數據可以是設備狀態、生產參數、環境參數等。
3、數據處理：采集到的數據會經過 HiWoo Box 的處理，包括數據清洗、格式化、加密等。這樣可以確保數據的準確性和安全性。
4、數據傳輸：處理后的數據會通過網絡傳輸到指定的數據中心或云平臺。HiWoo Box 支持多種傳輸協議和方式，可以根據實際需求進行選擇。
5、遠程監控與控制：除了數據采集外，HiWoo Box 還支持遠程監控和控制功能。用戶可以通過上位管理系統或移動應用程序隨時查看設備的實時數據和狀態，并進行相應的控制操作。
樣機申請 https://www.hiwooiot.com/h-col-158.html?statId=62
三、遠程數采的價值
遠程數采在工業領域具有廣泛的應用價值和意義。具體來說，它可以帶來以下幾個方面的價值：
1、提高生產效率：通過實時采集和分析生產現場的數據，企業可以及時發現并解決生產過程中的問題，提高生產效率和產品質量。同時，基于數據的優化和調整還可以進一步提升生產效率。
2、降低運營成本：遠程數采可以減少人工巡檢和干預的頻率，降低人力成本。同時，通過實時監測設備的運行狀態和能耗數據，企業還可以實現能源的合理利用和節約，降低運營成本。
3、增強設備可靠性：通過遠程數采，企業可以實時監測設備的運行狀態和性能參數，及時發現并處理潛在的故障和隱患。這不僅可以延長設備的使用壽命，還可以減少因設備故障導致的生產中斷和損失。
4、促進智能化轉型：遠程數采是企業實現智能化轉型的重要基礎。通過實時采集和分析生產數據，企業可以更加精準地掌握生產過程中的各種參數和指標，為智能化決策和優化提供數據支持。同時，基于遠程數采的智能化應用還可以進一步提升企業的競爭力和創新能力。
綜上所述，HiWoo Box 作為一款優秀的工業數采網關產品，為 PLC、傳感器、DCS、OPC 等工業設備的數據采集與遠程控制提供了高效、穩定的解決方案。通過遠程數采，企業可以實現生產過程的實時監控和優化調整，提高生產效率和質量水平；降低運營成本和能耗；增強設備可靠性和安全性；促進智能化轉型和創新發展。在未來工業自動化的發展中，HiWoo Box 將繼續發揮重要作用，為企業的數字化轉型和智能化升級貢獻力量。
求背景
一句話描述需求：答題并根據答案生成你是什么食物，可長按保存圖片。
體驗地址：https://personal.webank.com/s/hj/op-mall/food-festival/index.html
問題1：字體文件太大
活動頁用到了特殊的中文字體“漢儀小麥”，完整的字體文件約 6.9MB，而實際活動頁只用到了很少的一部分字體，全部加載會增加整個頁面的加載時間，需要對字體進行按需裁剪。
使用 fontmin 工具進行字體裁剪，將要裁剪的文字集合保存到文本文件keep.txt中（有重復文字沒關系會自動去重），通過下面命令裁剪字體文件：
# input.ttf 輸入的字體文件 # output 裁剪后的字體輸出目錄，包含了多種字體格式 fontmin -t "$(cat keep.txt)" input.ttf output
在 CSS 中引入裁剪后的字體文件，下面這段代碼是 fontmin 自動生成的，其根據每個平臺所支持的字體格式選擇最合適的：
活動頁中用到了約1100個不同漢字，裁剪后大小從 6.9MB 降為 284KB 左右，體積縮減了約 96.5%，從實際體驗上看，可以接受了。
-rw-r--r-- 1 whincwu staff 284K Jul 24 15:57 hyxm.eot -rw-r--r-- 1 whincwu staff 710K Jul 24 15:57 hyxm.svg -rw-r--r-- 1 whincwu staff 284K Jul 24 15:57 hyxm.ttf -rw-r--r-- 1 whincwu staff 284K Jul 24 15:57 hyxm.woff
如果可以調用原生的截圖接口，實現這個需求應該是比較簡單的。但這是一個純 H5 頁面，要求使用 web 技術實現，有兩種思路：
方案一：調用后臺接口，后臺渲染網頁成圖片返回給前端
優點：前端不需要太多工作量；后臺可以利用成熟的網頁渲染庫處理；不存在跨域等問題。
缺點：增加了后臺工作量和復雜度；調用接口返回需要時間，前端會有一定的等待期，這會造成體驗下降；前端頁面發生需求變化時，需同時更新后臺渲染模板，可能會造成更新不及時，增加了維護成本。
方案二：前端遍歷 DOM 結構將頁面繪制到畫布上后，導出成 base64 圖片
優點：不依賴后臺；及時性好；體驗好。
缺點：對前端技術挑戰比較大（好在有現成的第三方庫完成這件工作）；圖片跨域會有一些問題。
我選擇了第二種方案，使用 html2canvas 庫對網頁的部分進行“快照”，html2canvas 這個庫是一個純前端的庫，其原理是讀取 DOM 上的樣式信息，在 canvas 上繪制按照 W3C 的 CSS 規范渲染 DOM，只支持部分 CSS 屬性，不過也足夠一般的使用場合了。”截圖“的代碼如下：
去年在做 Webank App 存本取息存款心意卡時也用過這個庫，當時是 0.5-beta 版，那個版本存在不少問題，例如不支持高清屏導致圖片模糊，好在截止做這個活動頁時，版本已經來到了 1.0-alpha 版，解決了那一版的很多問題，節省了不少時間。
開發完后給測試同學體驗時，發現微信通過右上角分享出去時，沒有任何反應或者發送失敗。
以前聽過微信分享圖片有限制，懷疑是畫布導出的圖片過大，超出了微信分享縮略圖大小限制。
控制臺打印圖片大小出來確實比較大，在我的小米 MIX2 上大概 300 KB 左右（這個值在不同分辨率手機上會不同，分辨率越高越大），解決辦法就是降低圖片大小，canvas 的 toDataURL 接口有兩個參數，第一個參數是導出的圖片類型，第二個參數是圖片質量（僅當圖片類型是 jpeg 時有效）。下調導出圖片質量，再嘗試分享是否成功，如此返回下調多次后，在圖片尺寸降低到幾十KB 后，圖片終于可以分享成功了。
img.src=canvas.toDataURL('image/jpeg', 0.92)
分享的問題雖然解決，但是圖片清晰度嚴重不足，這個解決辦法行不通。
在查閱部分網上資料后，發現微信分享網頁時，自動提取頁面內第一張可見圖片作為縮略圖，縮略圖最大不能超過 32KB，否則發送失敗。既然微信分享時的縮略圖是取第一張圖片，那就放一張小于32kb的圖片在頁面內最前面，作為分享時的縮略圖，只要它不占用空間就不會影響布局，這個方法最終實踐簡單可行。
注意：這個圖片不能設置為display: none，否則微信取不到該圖片。
上面這種解決方法最后還是沒有使用，原因是有更好的處理方式了。在同事的幫助下，使用還未被和諧的微信 JSAPI 設置分享縮略圖，既解決了分享縮略圖的問題，還可以定制分享的標題和描述內容。
活動頁中用到了大量的圖片，網絡慢時會出現圖片加載不完全的情況，而且頁面中有不少動畫，如果圖片沒有加載完，動畫看起來比較詭異。所以，圖片預加載是非常必要，其原理是利用瀏覽器的緩存機制——優先使用已經下載過的圖片。
常見實現是在頁面中將一些要用到的圖片以<img/>標簽的形式放入頁面中且使其不可見，瀏覽器自動解析下載這些圖片，后面再用到相同的圖片時，無需再次下載就立即可用。也可以通過 JS 動態創建HTMLImageElement實例來下載圖片，這里我使用了第二種，主要是方便 JS 操作。
圖片資源通過動態創建Image并設置其src屬性觸發瀏覽器加載，監聽 load 和 error 事件來統計已完成的數量，代碼如下：
如果資源很多要加載比較久，可以加一個最大時長限制，超過時限后，即使沒加載完也進去首頁（資源依然在后臺異步加載），這樣可以讓用戶可以盡快與頁面互動，減少用戶在等待頁的流失。
字體文件和圖片一樣也需要預加載，不過是放在首頁index.html中進行的。
這里有個坑，字體文件渲染時才會加載，如果頁面預加載時沒有地方用到，瀏覽器不會去下載，解決辦法在頁面看不見的地方放一個使用字體的標簽，觸發瀏覽器加載字體資源。
預加載字體后，發現 Loading 頁使用了自定義字體的進度百分數一開始不顯示，然后突然從大于 0 的某個百分數開始顯示。
這里又是一個坑（與其說是坑，倒不如說是知識點的欠缺--!），自定義的字體在加載完成之前，字體如何展示取決于font-display屬性（用法可參考這篇文章 font-display 的使用），這個屬性支持 5 個值auto | block | swap | fallback | optional，大部分瀏覽器默認是block，表示在字體加載完成前，以一種”隱形“字體（或者說不帶墨水的字體）顯示文字，即文字占用空間但是不可見，這也是造成上面問題的源頭。這個屬性的另一個值swap，表示字體加載完成前，先以后備字體顯示文字，待字體加載完后立即替換成自定義的字體。swap取值正好可以解決上面問題，代碼如下：
<audio> ios上無法自動播放，設置autoplay屬性或者調用play()都不行，網上查了下遇到類似問題的不少，原因是 IOS 對此進行了限制，必須在用戶發生交互行為時才能播放（避免了頁面打開各種廣告聲音~~），從 Chrome 66 開始也加入了這項限制，更多細節查閱這邊文章Chrome 66禁止聲音自動播放之后。
比較常見的解決辦法，是在用戶觸摸屏幕任何地方后開始播放音頻，這樣能在最早的時機開始音頻的播放，而且兼容性好。
活動頁答題完成后的結果頁（下面左圖），用戶可以長按保存圖片或分享圖片（下面右圖）。
根據前面的解釋，在結果頁會對網頁進行快照得到一張 base64 圖片，并替換網頁原來的內容，這樣用戶可以長按圖片觸發微信的操作彈窗，這里的長按的圖片和被分享圖片必然是同一樣的圖片。但是，需求有要求看到的內容和分享的圖片是不一致的，很矛盾。
確實很矛盾，但還是得想辦法。對比上面兩個圖片發現只有底部不一樣，所以思路是在分享圖片（下面右圖）上方蓋一層（下面左圖），這樣就可以達到預期效果：看到的是左圖，長按食物圖片時分享的是右圖。
但是使用這種遮罩的方式，又會產生一個新的問題，長按二維碼時，分享出去的是二維碼而不是上面右圖，這是因為長按事件是傳遞到了遮罩層上的二維碼圖片，觸發了圖片默認的長按行為。
解決辦法是將遮罩層的根元素加上pointer-event: none屬性，關于該屬性的用法可參考這篇文章 pointer-events，一個神奇的css屬性。這個屬性可以讓事件忽略某個元素及其子節點，仿佛這個元素不存在一般。添加該屬性后，長按事件可以透過遮罩層直達底層的分享圖片，從而觸發待分享圖片的長按事件。經過這樣處理后，無論長按界面哪個地方（按鈕除外）都分享的是上面右圖，問題解決。
問題8：微信長按圖片無法識別其中的二維碼
該情況出現在部分 iphone 手機上，安卓出現很少。起初懷疑是二維碼圖片太小導致的，更換一張大圖就可以識別了，正準備更換大圖，發現同事用一張同等尺寸的二維碼替換后，之前不能識別的手機卻可以識別了，這就納悶了。。。
對比了下我們兩個生成的二維碼，發現我的二維碼密度較低，看了下生成二維碼的工具，還有一個容錯率可選，容錯率越高，二維碼密度越高，我的二維碼容錯率選的是 7%，同事選的是 30%，提高容錯率后重新生成二維碼替換，問題解決。
上面是以我的視角列舉了一些開發遇到的問題，還有一些其他小問題在這里沒有列舉。活動中的動效是 UI 的同事精心調制的，其中也有不少值得學習的地方。
這次活動頁的開發過程中所踩過的坑，也暴露出部分知識點的欠缺，這部分后面是需要“補課"的。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
