ホームページ  >  記事  >  バックエンド開発  >  ハイテクポスト! thinkphp+ モバイル開発経験!

ハイテクポスト! thinkphp+ モバイル開発経験!

WBOY
WBOYオリジナル
2016-06-23 13:31:331096ブラウズ

開発環境:
ローカル: Wampserver2??Apache2.4.9+php5.5.12+mysql5.6.17
Alibaba Cloud サーバー: Apache+php5.5+mysql
================ =========================================
ウェブサイト開発関連:
オープンソースの使用フレームワーク: yershop (onethink の二次開発に基づいており、onethink と同等)
モバイル バージョン: html5 ページ テンプレートをオンラインでダウンロードします
補助テスト: モバイル スタイル テストのために html5 テンプレート ファイル (純粋なテンプレート ページ、フレームなし) を sae にアップロードします
== = ================================================ = ====
私が作ったウェブサイトのフレームワークは Onethink をベースにしています。モバイル版の機能を追加したいので、Baidu の関連ドキュメントにアクセスしました。 エントリ ファイルに従って、クライアントがアクセスしたかどうかを判断します。パソコンまたは携帯電話で、パソコン版またはモバイル版のページにアクセスします。具体的な参考記事: http://my.oschina.net/deanzhao/blog/322563。すべてが正常に展開され、正常にアクセスできます。発生した問題は次のとおりです。
コンピューターでモバイル サイトを閲覧すると、写真は正常に表示されますが、モバイル ブラウザーで閲覧すると、img タグ内の写真が表示されません。
=============================================== =========
以下は私が行ったテストです:
1. HTML5 ページが原因かどうかを判断します。
テスト手順:
(1) 対応するコントローラーにテストメソッドを追加します
(2) 新しい html4 ページ test.html を作成します
(3) 変更された部分をサーバーにアップロードします
テスト結果:
コンピューターは画像を出力します。そして、画像なしで携帯電話からアクセスできるようにサーバーにアップロードします。この理由を解決してください
2. サーバーが収集ステーションの画像を表示していないかどうかを確認します。
テスト手順:
(1) コンピューター上のモバイル Web サイトへのデフォルトのアクセスになるようにコントローラー メソッドを変更します。
(2) 変更した部分を Alibaba Cloud サーバーにアップロードします
テスト結果:
画像が正常に表示されます。この理由を解消してください
3. イメージタグが ThinkPHP 静的パス __IMG__ を使用しているためですか?
テスト手順:
(1) test.html テンプレートに基づいて、画像の src パスを外部リンクに変更します
(2) 変更された部分をサーバーにアップロードします
テスト結果:
画像はコンピューターに正常に表示されます。ただし、携帯電話からアクセスすると画像が表示されません。 (テンプレートファイル内で相対リンクを使用すると、コンピュータ上で画像を表示できません)
4. ThinkPHP フレームワークが原因でしょうか?
テスト手順:
(1) ルート ディレクトリに新しい test.html ページを作成します
(2) 同じディレクトリにテスト画像を配置します
(3) ページに画像タグを挿入し、テストとして src を記入します画像アドレス (相対パス)
(4) サーバーにアップロード
テスト結果:
通常、コンピューターではこのページの画像が生成されますが、携帯電話でアクセスすると画像が表示されません。 TP フレームワークを使用しているため、このテスト方法は不適切だと思います。
=============================================== =========
携帯電話ではimgタグが全て無効になってしまい大変困っておりますが、携帯電話からパソコン版のページにアクセスすると写真は正常に表示されます。画像が表示される唯一の場所は、スタイル内の back-image タグです。
ウェブサイトのアドレス。携帯電話でテストしていただけると幸いです。画像もデータも消費しません。
さらに、ここでは、携帯電話にさらに js が読み込まれている可能性があり、これは js のせいだと言う人もいます。参考までに、thinkphpに詳しい方アドバイスをいただければ幸いです、ありがとうございます!


ディスカッションへの返信(解決策)

ucブラウザとAndroidの内蔵ブラウザを使用してテストしましたが、効果は同じです。左上の画像はCSSのbackground-imageタグ __IMG__/xx.jpg で書かれています

パソコン版とモバイル版を扱っているので(実際にはテンプレートが違うはずです)
それならこうするべきですまずパスの問題かどうかを検討してください。これは多くのテストには反映されません
携帯電話で Web ページのソース コードを表示できない (表示しない) 場合は、コンピュータを強制的にモバイル バージョンに切り替えることができます。テスト中
画像を js 経由で表示する場合は、js の互換性の問題を考慮する必要があります
さらに、画像が大きすぎて端末のメモリ不足が発生して表示できないかどうかも考慮する必要があります

画像を処理しているため、コンピューター版とモバイル版で別々のバージョンで実行します (実際、テンプレートは異なるはずです)
次に、パスの問題かどうかを最初に検討する必要がありますが、これは多くのテストに反映されません
できない場合は (不本意ですが) 携帯電話で Web ページのソースコードを表示するには、テストのためにコンピューターを強制的にモバイルバージョンに切り替えることができます
画像が js 経由で表示される場合は、js の互換性の問題を考慮する必要があります
さらに、画像が大きすぎて、携帯電話のメモリ不足が発生して表示できないかどうかを考慮する必要があります


別のテンプレートが使用されていますか?? モバイルが View と同じレベルの Home に追加されました。
パス上では、テンプレートのパスが正しいため、TP のパスが間違っている場合は、直接エラーが報告されます。 (最初見落としていましたが、修正しました)
携帯電話でソースコードを表示してみます。以前は表示方法がわかりませんでした。
コンピューターをモバイルバージョンに強制しますか?ローカル テストでは、常にコンピューターを使用してモバイル サイトにアクセスします。
表示されていない写真はすべて img タグ内の写真です。
画像サイズに関しては、小さいものは7k、大きいものは100kですが、利用できません。

コンピューターバージョンとモバイルバージョンを別々に処理しているため (実際、テンプレートは異なるはずです)
次に、最初にパスの問題であるかどうかを検討する必要があります。複数のテストでは、これは反映されません
もし、携帯電話でウェブページのソースコードを表示できない(したくない)場合は、テストのためにコンピュータを強制的にモバイルバージョンに切り替えることができます
画像が js 経由で表示される場合は、js の互換性の問題を考慮する必要があります
さらに、画像が大きすぎるため、携帯電話のメモリが不足して表示できないかどうかを考慮する必要があります


Android スマートフォンでは画像が表示されませんが、Apple スマートフォンでは画像が表示されます。

もう解決しましたか? AndroidとAppleの両方で写真が正常に表示できることをテストしました

解決されましたか? Android と Apple の両方で写真が正常に表示できることをテストしました


本当ですか?使用している携帯電話とブラウザは何ですか?私の携帯電話が壊れすぎていますか?それは決して現れませんでした。今日も一日作業を続けてきましたが、今ではウェブサイトに目がくらみそうになりました

ついにその理由が分かりました! ! !
Baidu Cloud Acceleration Service を使用しています。設定に「高速画像読み込み」オプションがあり、これがオンになっている限り、モバイル端末上の画像は「遅延読み込み」テクノロジーを使用します。ロードされません。 。 。 。幸いなことに、特別にすべてのプログラムを Sina sae に移植したところ、それが Baidu のせいであることがわかりました。 (セカンドレベルドメイン名にアクセスすると画像は表示されますが、ドメイン名のバインドは機能しません)

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。