最近一直在做一個新聞 App，主要針對政策資訊相關的內容。它的主要功能是收集各地區的政策資訊，讓每個創業者能夠透過手機快速查詢相關的政策資訊，並選擇訂閱自己感興趣的政策來源。每天會實時推送與你匹配度最高的 10 條政策資訊，以便更好地利用相關政策福利來發展自己的企業。這個項目主要是幫助創業者申報合適的政府補助，並提供一系列的政策解讀相關服務。當然，這些服務不是由客戶端來做，而是由公司來運營管理。
剛開始覺得新聞 App 比較簡單，不就是伺服器抓取相關新聞資訊，然後在 WebView 中顯示嗎？實際上確實是這樣，但在實現過程中還是遇到了很多問題，例如類似今日頭條頻道管理的實現、疊樓式評論的實現等，這些問題花費了不少時間。在解決問題的同時也踩到了新的坑，這些相關的知識點將在以後以博客的形式整理出來分享給大家。
提到新聞資訊相關的 App，大家肯定會想到今日頭條、一點資訊等這些內容運營平台。這些平台的大部分內容都是自家簽約作者創作的內容，不管創作內容的質量如何，至少有一點可以保證，它的大部分內容是按照固定格式提交給這些自媒體平台的。例如今日頭條的頭條號、一點資訊的一點號。由於大部分內容格式的確定，可以保證在移動端完美顯示，不需要進行格式調整。當然也有從其他網站上抓取的新聞資源，為了整個移動端保持統一的顯示風格，就需要對第三方的新聞資源進行格式調整。這就面臨一個問題，如何將第三方新聞資源嵌入自家的 App 並保持文章風格一致呢？這個過程說起來也不是很麻煩，主要就是借助創建一個文章詳情頁模板將內容填充進來就好了。
由於這個項目的數據全是由爬蟲從各地方政府網站采集數據，抓取的數據沒有進行一定的處理，全是帶有 HTML 標籤的數據，有的數據甚至連 HTML 標籤都不是一一對應的，導致某些 HTML 標籤的尖括號只顯示一半在界面中，這就比較尷尬了。面對這些帶有 HTML 標籤的數據，只能硬著頭皮做界面適配。雖然我了解一點 CSS 相關的前端知識，但不足以快速解決這個問題。剛開始的思路是替換這些 <p>、<span> 等標籤中的內聯樣式，將這些樣式重寫成合適的樣式。這樣做後發現有效果，以為這樣做可以解決問題，於是就做其他的頁面了。
後來出現了很多問題，例如文章中可能會有表格，會把頁面撐寬，導致文章詳情頁可以左右滑動，這肯定會影響瀏覽效果。總之，這種方式比較不理想。由於之前的文章分享頁面直接分享的是網站上的文章頁面，例如將某篇文章分享到微信，打開後跳轉到網站，然後才進入文章詳情頁，有時還得登錄才能查看。從用戶角度來看，這確實不太好。於是決定寫一個獨立的 H5 頁面，直接在這個頁面中請求數據，然後將這個頁面掛載在域名下，既可以做分享頁面，又可以用來做文章詳情頁。想法雖好，但最重要的還是實踐，那就開始學習寫一點前端頁面吧。
選擇了一款還算友好的編輯器 HBuilder，我比較喜歡這個編輯器的預覽效果。順便提一下，HBuilder 可以用來創建移動 App，主要用於使用 MUI 框架來開發跨平台應用，當然也可以用來開發 H5 頁面。這個就不多說了，這個界面就是幾個 div，分別顯示文章標題、來源、發布時間以及文章詳情。再者就是使用 ajax 來請求網絡數據，關鍵一點就是 CSS 的樣式配置。這裡涉及的知識點主要就是 !important 關鍵字的使用、Viewport 的使用以及 CSS 媒體查詢相關的知識點。
對我而言，這個項目中遇到了很多新東西，這裡就不再贅述了。在解決問題的過程中，最重要的是思路和實踐。先整理思路，然後具體實現，最後驗證結果是否滿足要求。還有一點就是記得總結工作中遇到的問題，儘量在自己的知識庫中尋找答案，而不是每次都去百度、Google。相信自己，繼續努力！