新しいニュースアプリの誕生を振り返る

最近、新聞アプリを作っています。主に政策情報に関連するもので、主な機能は各地域の政策情報を収集し、起業家が関連する政策情報を携帯電話で簡単に検索できるようにすることです。興味のある政策情報を購読することができ、毎日最もマッチする 10 件の政策情報をリアルタイムで配信します。これにより、自分の企業を発展させるために関連する政策の恩恵を最大限に活用することができます。このプロジェクトは、起業家が適切な政府の補助金を申請するのを支援し、政策解釈に関連する一連のサービスを提供することを目的としています。もちろん、これらのサービスはクライアント側ではなく、会社が運営管理します。

最初はニュースアプリは比較的簡単だと思っていました。単にサーバーから関連するニュース情報を取得し、それをWebViewに表示すればいいだけです。実際にはそれがそのままですが、実装の過程で多くの問題に遭遇しました。例えば、今日のトピックチャンネルの管理や、コメントの実装など、かなりの時間を費やしました。問題を解決する過程で新たな問題に直面しましたが、これらの関連する知識は後でブログの形でまとめて共有します。

ニュース情報に関連するアプリについて言及すると、皆さんはおそらく今日のトピックや一点情報などのコンテンツ運営プラットフォームを思い浮かべるでしょう。これらのプラットフォームのほとんどのコンテンツは、自社の契約作家によって作成されたものです。作成されたコンテンツの品質がどうであれ、少なくとも大部分のコンテンツはこれらのメディアプラットフォームに固定の形式で提出されます。例えば、今日のトピックのヘッドライン番号や一点情報の一点番号などです。ほとんどのコンテンツ形式が確定しているため、モバイル端末で完璧に表示されることが保証されており、形式の調整は必要ありません。もちろん、他のウェブサイトからのニュースリソースを取得する場合もありますが、モバイル端末全体の表示スタイルを一貫させるために、第三者のニュースリソースの形式を調整する必要があります。この問題に直面すると、第三者のニュースリソースを自社のアプリに組み込み、記事のスタイルを一貫させる方法はどうすればいいでしょうか？このプロセスはそれほど難しくありません。主に記事の詳細ページテンプレートを作成し、コンテンツを埋め込むことです。

このプロジェクトのデータは、クローラーによって各地方政府のウェブサイトから収集されたもので、収集されたデータは一定の処理がされておらず、すべてがHTMLタグを含んだデータです。一部のデータはさらにHTMLタグと一致していないため、一部のHTMLタグの角括弧が画面上に表示されません。このため、これらのHTMLタグを含むデータに対しては、画面の適応を強制するしかありませんでした。フロントエンドの関連するCSSの知識は少し持っていましたが、この問題を迅速に解決するには十分ではありませんでした。最初のアイデアは、これらの <p>、<span > などのインラインスタイルを置き換え、これらのスタイルを適切なスタイルに再定義することでした。これを行ったところ効果があると思い、他のページも同じようにしました。

後で多くの問題が発生しました。例えば、記事にはテーブルが含まれる場合があり、ページが広がってしまい、記事の詳細ページが左右にスクロールできるようになってしまいます。これは閲覧効果に影響を与えることは間違いありません。結局、この方法はあまり良くありません。以前の記事共有ページは、ウェブサイトの記事ページを直接共有していました。例えば、ある記事を WeChat で共有すると、ウェブサイトにジャンプしてから記事の詳細ページに入る必要がありました。時にはログインしなければならないこともあります。ユーザーの視点からすると、これは確かに良くありません。そこで、独立した H5 ページを作成し、このページでデータをリクエストし、このページをドメインにマウントすることにしました。共有ページとして使用することもでき、記事の詳細ページとしても使用することができます。アイデアは良いですが、最も重要なのは実践です。それでは、少しフロントエンドのページを書くことから始めましょう。

比較的使いやすいエディターである HBuilder を選びました。このエディターのプレビュー効果が気に入っています。ちなみに、HBuilder はモバイルアプリを作成するために使用することもできます。主に MUI フレームワークを使用してクロスプラットフォームアプリを開発するために使用されますが、H5ページの開発にも使用することができます。これについては詳しくは言いませんが、このインターフェースはいくつかのdivで構成されており、それぞれが記事のタイトル、出典、公開日時、および記事の詳細を表示します。また、ネットワークデータをリクエストするために ajax を使用し、重要なのはCSSのスタイル設定です。ここで関連する知識点は、!importantキーワードの使用、Viewportの使用、およびCSSメディアクエリに関連する知識です。

私にとって、このプロジェクトでは多くの新しいことに直面しました。ここでは詳しく説明しませんが、問題を解決する過程で最も重要なのはアイデアと実践です。まずはアイデアを整理し、具体的な実装に取り組み、最後に結果が要件を満たしているかどうかを検証することを忘れずに、また、問題解決の経験をまとめ、自分の知識ベースで答えを見つけるように心がけてください。毎回 Google や百度で検索するのではなく、自分自身を信じて、努力を続けてください！