Recently, I have been working on a news app that mainly focuses on policy information. Its main function is to collect policy information from various regions so that entrepreneurs can quickly search for relevant policy information on their phones. Users can choose to subscribe to policy sources they are interested in and receive real-time push notifications of the top 10 policy news articles that match their interests, in order to better utilize relevant policy benefits for their own business development. This project mainly aims to help entrepreneurs apply for suitable government subsidies and provide a series of policy interpretation services, which will be operated and managed by the company, not the client.
At first, I thought developing a news app was relatively simple - just fetch relevant news information from servers and display it in a WebView. In reality, it is indeed similar to this, but during the implementation process, I encountered many problems. It took a lot of time to solve issues such as implementing channel management similar to Today's Headlines and implementing nested comments. While solving these problems, I also encountered new challenges. I will share these related knowledge points in the form of a blog in the future.
When it comes to news-related apps, people will definitely think of platforms like Today's Headlines and Yidian News. Most of the content on these platforms is created by their own contracted authors. Regardless of the quality of the content, at least one thing can be guaranteed - most of the content is submitted to these self-media platforms in a fixed format. For example, Today's Headlines has its own headline accounts and Yidian News has its own Yidian accounts. Since the format of most content is determined, it can be perfectly displayed on mobile devices without the need for format adjustments. Of course, there are also news resources fetched from other websites. In order to maintain a consistent display style on mobile devices, it is necessary to adjust the format of third-party news resources. This raises a question: how to embed third-party news resources into our own app while maintaining consistent article styles? The process is not very complicated. The main idea is to create an article detail page template and fill in the content.
Since the data for this project is collected by web crawlers from various government websites, the fetched data has not been processed and contains HTML tags. Some data even have mismatched HTML tags, causing some HTML tags' angle brackets to be partially displayed on the interface, which is quite awkward. Faced with data containing HTML tags, I had to adapt the interface. Although I have some knowledge of CSS-related front-end knowledge, it was not enough to solve this problem quickly. Initially, my approach was to replace the inline styles in <p> and <span> tags with appropriate styles. This seemed to work, so I started working on other pages.
Later, I encountered many problems. For example, there might be tables in the articles, which would widen the page and allow horizontal scrolling in the article detail page, which would definitely affect the browsing experience. In short, this method was not ideal. Previously, the article sharing page directly shared the website's article page. For example, when sharing an article to WeChat, it would open the website first and then enter the article detail page. Sometimes, logging in was required to view the article. This was not user-friendly. So, I decided to write a separate H5 page, directly request data on this page, and mount this page under a domain. This way, it can be used as a sharing page and an article detail page. The idea was good, but the most important thing was to put it into practice. So, I started learning how to write front-end pages.
I chose a user-friendly editor called HBuilder. I like the preview effect of this editor. By the way, HBuilder can be used to create mobile apps, mainly for developing cross-platform applications using the MUI framework, but it can also be used to develop H5 pages. I won't go into too much detail about this. The interface consists of several div elements, displaying the article title, source, publication time, and article details. The key is to use AJAX to request network data and configure the CSS styles. The knowledge points involved here mainly include the use of the !important keyword, the use of Viewport, and CSS media query-related knowledge.
For me, this project has encountered many new things, which I won't go into detail here. The most important thing in solving problems is to have a clear plan and then implement it specifically. Finally, verify whether the results meet the requirements. Also, remember to summarize the problems encountered in work and try to find answers in your own knowledge base instead of always relying on Baidu or Google. Believe in yourself and keep working hard!