序文
モバイル Web アプリケーションの重要な形式の 1 つとして、H5 ページは最新の Web 開発でホットなトピックになっています。H5 ページの開発プロセスでは、フロントエンド テクノロジーの適用が非常に重要です。この記事では、アニメーション、スタイル設定、スキン切り替え、ポスター テクノロジー、デバッグ スキルなどを含む、京東速度リストの H5 ページの中核となるフロントエンド テクノロジーを調査し、フロントエンドの有用な参考資料とアイデアを提供したいと考えています。エンド開発者。
技術的なポイント
1.アニメーション
ユーザーエクスペリエンスを向上させ、ページをより活発で興味深いものにし、ユーザーの満足度と維持率を向上させるために、ページに複数のアニメーションが追加されます。
その中で、ページ上の重要なコンテンツを強調表示するために、プログレス バー、バッジ、メニュー、ボタン、箇条書きボックスなどのアニメーションが追加されます。
1.1、プログレスバーアニメーション
プログレス バーには、ProgressRise と moveScaleRight という 2 つのアニメーション効果が含まれています。これら 2 つのアニメーション効果は、CSS のアニメーション プロパティを同じ要素に同時に適用することで実現されます。アニメーション プロパティはカンマで区切って複数のアニメーション効果を受け入れることができます。データの読み込みを初期化するとき、進行状況バーは 0 ～ 100% で表示されます。イージング機能を使用します。つまり、アニメーションの開始と終了が遅くなり、途中で展開が速くなります。実行は 1 回だけです。そして ProgressRise アニメーションが終了します。4.6 秒の遅延の後、代替アニメーション moveScaleRight が開始され、要素が X 軸方向にスケーリングされます。スケーリング率は 1.04 倍で、ループは 2 秒間無限になり、右側の弾性効果が得られます。
効果は次のとおりです。
<div class="progress"></div><!--* 进度条 *-->
.progress {
z-index: 10;
height: 7px;
background-image: @progress-bar-color;
border-radius: 8px;
/* 这是一个CSS动画，包含两个动画效果：ProgressRise和moveScaleRight。这两个动画效果是通过CSS的animation属性同时应用在同一个元素上实现的。其中，animation属性可以接受多个动画效果，用逗号分隔。在这个例子中，表示同时应用ProgressRise和moveScaleRight两个动画效果。*/
animation: ProgressRise 2s ease, moveScaleRight 2s 4.6s alternate ease-out infinite;
transform-origin: left center;
}
/* 当页面首屏渲染进度条的宽度 */
@keyframes ProgressRise {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes moveScaleRight {
from {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) skewX(0deg);
}
to {
transform: translate3d(0, 0, 0) scale3d(1.04, 1, 1) skewX(0deg);
}
}
1.2. バッジの左右のアニメーション
ランキングバッジは進行状況バーに合わせて弾力的に揺れる必要があります。まず、4.6 秒の遅延の後、要素の X 軸位置が無限に移動され、alternate プロパティが使用されるため、アニメーションが繰り返し再生されると逆再生され、スイング アニメーション効果が実現されます。
<div class="light-theme-0"></div><!--* 排名徽章 *-->
.light-theme-0 {
position: absolute;
top: -6px;
right: -34px;
width: 22px;
height: 22px;
background: url('~@/assets/images/bcmixin/1.png') no-repeat center center;
background-size: 100% 100%;
//这段代码为元素添加了一个名为lightMoveRight的动画效果，持续时间为2秒，时间函数为ease-out，延迟时间为4.6秒，重复次数为无限次，并且使用了alternate属性，使得动画在重复播放时会反向播放。
animation: lightMoveRight 2s ease-out 4.6s alternate infinite; //右侧弹性效果动画
transform-origin: left center;
}
@keyframes lightMoveRight {
from {
transform: translateX(0px);
}
to {
transform: translateX(-8px);
}
}
1.3. メニュースクロールアニメーション
ドロップダウン メニューを切り替えると、主に touchmove イベントをリッスンしてメニュー要素のtransform属性値を取得することにより、メニュー上にスクロール アニメーションが表示されます。要素の位置を計算した後、transform属性が追加されます。要素を X 軸方向に右に移動させる要素を Translate し、要素の変換プロセスの継続時間が 0.3 秒になるように、transition-duration 属性を追加して、メニューのスムーズなスクロール効果を実現します。 。
<div class="menu" style="transform: translateX(257px); transition-duration: 0.3s;">
<ul><li>菜单项1</li>...</ul></div>
document.querySelector('.menu').addEventListener('touchmove', function () {
var transformValue = window.getComputedStyle(menu).getPropertyValue('transform')
var translateXValue = parseInt(transformValue.split(',')[4])
var scrollDistance = 100
menu.style.transform = 'translateX(' + (translateXValue + scrollDistance) + 'px)'
})
1.4. ボタン遷移アニメーション
ユーザーが 1 つの画面でより多くの重要な情報を表示できるようにするために、ページの簡潔なバージョンが追加されました。コンパクト版に切り替える場合、ボタンは遷移アニメーションを採用します。ボタン要素にトランジション効果を追加しました。これにより、要素のすべての属性が 1 秒以内に変更されるとスムーズに遷移します。このうち、ボタンをクリックすると背景画像が1秒ごとに滑らかに切り替わります。
<div class="bc-controll-zoom-wrap bc-controll-zoom-wrap-deep"></div>
.bc-controll-zoom-wrap {
position: fixed;
bottom: 30px;
right: 0;
width: 83px;
height: 54px;
background: url('../../assets/images/float_btn_2023_618.png');
background-size: 100% 100%;
z-index: 1999;
display: flex;
justify-content: center;
align-items: center;
//all表示所有属性都会发生过渡，1s表示过渡的持续时间为1秒
transition: all 1s;
}
.bc-controll-zoom-wrap-deep {
background: url('../../assets/images/float_btn_deep_2023_618.png');
background-size: 100% 100%;
}
1.5. 箇条書きボックスが小から大に変化するアニメーション
箇条書きボックスが小から大に変化するアニメーションにより、箇条書きボックスに段階的なズームイン効果を追加することができ、箇条書きボックスが表示されるときにより鮮やかかつ自然になり、ユーザー エクスペリエンスが向上します。したがって、速度チャートのポスターでは実際にグラデーション ズーム アニメーションが使用されています。これは主に、要素のズーム効果を実現するために使用される、zoomIn という名前のアニメーションを定義します。アニメーションの開始時、要素の不透明度プロパティは 0、つまり要素は完全に透明ですが、同時に要素の変換プロパティはscale3d(0.3, 0.3, 0.3)、つまり要素は 3 方向すべてで 0.3 倍削減されます。アニメーションが 50% まで進むと、要素の不透明度属性は 1、つまり要素が完全に不透明になりますが、同時に要素の変換属性はそれ以上変化せず、縮小された状態のままになります。
.zoomIn-enter-active {
animation: zoomIn 0.3s;
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
2. アニメーションの互換性
CSS スタイルの互換性の役割は、Web ページがさまざまなブラウザーやデバイス上で正しく表示および表示されることを保証し、Web ページの互換性とアクセシビリティを向上させることです。CSS アニメーションとトランジション効果用のいくつかの Mixin を定義でき、これらの Mixin を他の Less ファイルで参照して、CSS アニメーションとトランジション効果をすばやく定義できます。CSS アニメーションの互換性のために mixin を使用する利点は、さまざまなブラウザーでの互換性を確保しながら、CSS コードの再利用性と保守性を向上できることです。特定のミックスインは以下の記述方法を参照できます。主にアニメーションアニメーションエフェクト、トランスフォーム変形エフェクト、回転回転エフェクト、スケールズームエフェクト、translate3dトランスレーションエフェクト、キーフレームキーフレームアニメーションの6つのエフェクトに分かれています。
// Animation 定义CSS动画效果
.animation(@animation) {
-webkit-animation:@animation;
-moz-animation:@animation;
-o-animation:@animation;
animation:@animation;
}
3. ポスター技術
ページ上でのポスターの自動生成により、ユーザーの対話と共有が改善され、ブランドの露出と口コミ効果が強化され、ユーザーの維持率とコンバージョン率が向上します。Web ページの重要な情報はポスターとして自動的に生成され、Web ページの共有と配布を容易にするために QR コードが追加されます。したがって、純粋なフロントエンドでポスターをどのように描画するかが重要なテクノロジーになります。スピード リストでは、CSS 属性を通じてキャンバス イメージを描画する軽量の Vue コンポーネント Vue Canvas Poster を使用します。css のような属性を使用して、絶対配置レイアウトに従ってキャンバス画像を生成できます。また、widthPixels を設定することで画像サイズを生成し、画像のぼやけの問題を解決できます。image 属性は絵を描画するために使用され、text はテキストを描画するために使用され、rect は長方形を描画するために使用され、qrcode は QR コードを描画するために使用されます。幅幅、高さ高さ、上部上部マージン、左左マージンに従って、対応する要素の位置を組み立て、ポスターコンテンツを描画します。
import { VueCanvasPoster } from 'vue-canvas-poster'
export default {
components: {
VueCanvasPoster,
},
}
this.painting = {
width: '334px',
height: '600px',
top: 0,
background: backgroundImage,
views: [
{
// 小标题背景
type: 'image',
url: subTitleBackgroundImage,
css: {
top: '125px',
left: '16px',
width: '297px',
height: '70px',
},
},
//页面文本
{
type: 'text',
text: currTitle,
css: [
{
left: '23px',
top: '140px',
fontFamily: 'PingFangSC-Semibold',
fontSize: currTitleFontSize,
color: textColor,
width: '290px',
height: '33px',
textAlign: 'center',
},
],
},
...
{
// 底部白色背景
type: 'rect',
css: {
bottom: '10px',
right: '24px',
width: '53px',
height: '53px',
color: '#fff',
},
},
//二维码
{
type: 'qrcode',
content: qrcodeSrc,
css: {
bottom: '14px',
right: '28px',
width: '44px',
height: '44px',
color: '#000',
},
},
],
}
4. バージョンBのレースリストページのUIアップグレード
レーシングリストの継続的なアップグレードは、メーカーをより効果的にスクロールすると同時に、リストの導入と排出の効率を向上させ、大規模なプロモーション期間中に携帯電話のカテゴリとブランド間の競争の重要なツールの1つになります。そのため、大型プロモーションでは毎年色調整を中心としたUI調整が行われます。そこでテーマカラーを抽出し、パブリック変数を変更して開発効率を向上させます。主に、よく使用される 6 つの変数、色、フォント、境界線、レイアウト、アニメーション、応答性にまとめられます。
/* 颜色变量 */
@primary-color: #007bff;
/* 字体变量 */
@font-size-base: 16px;
/* 边框变量 */
@border-color: #ccc;
/* 布局变量 */
@container-width: 1200px;
/* 动画变量 */
@animation-duration: 0.3s;
/* 响应式变量 */
@screen-xs: 576px;
5. スキン選択の実装
ユーザーはスキンを選択して、Web サイトのパーソナライゼーションとユーザー エクスペリエンスを向上させ、さまざまなユーザーのニーズと好みを満たし、ユーザーの満足度とロイヤルティを向上させることができます。
これには、Web サイトの開発効率と保守性を向上させるために、開発中のスタイル構成のサポートが必要であり、スタイル エラーやコードの繰り返しを減らし、Web サイトの安定性とパフォーマンスを向上させることもできます。
まず、ユーザーが必要なスキンを選択できるように、新しいページ構成の背景を追加します。
ページにスタイル設定ファイルをロードし、インターフェイスを通じてユーザーが選択したスキンのロードをリクエストし、JavaScript を通じてスタイル属性と値を動的に設定して、ページのスタイルをすばやく変更し、ページテーマスキンの置き換えを実現します。
//背景颜色
this.posterConfig = getConfigBySkin(this.$store.state.skin)
let getConfigBySkin = (skin) => {
// 默认背景
let config = {
globalBg:'#3F2786', //背景图
purpleTitleBg: require('../../../assets/images/skin_purple/bg-time-purple.png'), //标题背景图
rightArrow: require('../../../assets/images/skin_purple_pre/arrow-right.png'),
titleBg: require('../../../assets/images/skin_common/purple-title-border.png'),
number: 'skin_purple',
progressBar: require('../../../assets/images/skin_common/purple-bar.png'),
leftBg: require('../../../assets/images/skin_common/digital-l-b.png'),
rightBg: require('../../../assets/images/skin_common/digital-r-t.png'),
}
//获取背景图片'red'、'golden'、'purple'、'blue'
switch (skin) {
case 'red':
config.globalBg = '#780605'
config.number = 'skin_red'
...
break
case 'blue':
...
break
case 'golden':
...
break
}
return config
}
6. スナップショットモード
履歴キー ノード データを表示したいというユーザーの要求を満たすために、それを実現するスナップショット モードが追加されました。具体的なプランは以下の通り
1. 一意のタイムスタンプ SnapshotId が履歴時間に対して生成され、履歴データとともに保存されます。
2. ユーザーがスナップショット時間を選択すると、履歴時間に従って一意の識別子のタイムスタンプ SnapshotId が生成され、ページ URL に追加されます。ページが共有される場合、SnapshotId も一緒に共有できます。ページの最初の画面が読み込まれると、URL 内の SnapshotId を読み取り、それをインターフェイスに渡して履歴データの表示を取得します。
7. 価格セキュリティのアップグレード
レーシング リストへのアクセス数が多いため、多数のクローラーが価格データを取得して悪用しようとします。これは、Web サイトのデータ プライバシーを侵害し、インターフェイスの安定性に影響を与え、ビジネス上の利益を破壊します。インターフェイスにクロール防止機能を追加すると、悪意のあるクローラーによる価格データの取得と悪用を効果的に防止し、販売者の利益とデータのセキュリティを保護し、同時に Web サイトの安定性とパフォーマンスを向上させ、ユーザー エクスペリエンスを向上させることができます。
したがって、レーシング リスト Web ページの価格情報インターフェイスには、暗号化操作を完了するためのゲートウェイと対応する SDK が追加されます。主にバックグラウンドで発行されるトークンとランダムキーのアルゴリズムを通じて、フロントエンドはアルゴリズムを通じて特定の情報の署名を生成し、それを識別のためにバックエンドに渡します。これにより、引き起こされたビジネス損失を効果的に識別/遮断できます。注文やクーポンをスワイプすることでインターフェイスの対立を強化し、ブラッシング防止能力を向上させます。
8、デバッグスキル
8.1、vconsole を追加
レースリストのH5ページは主にJD APPとWeChatで開かれており、エラー報告などの問題が見つかった場合、携帯電話で開発者ツールを呼び出してトラブルシューティングすることはできません。vconsole は、モバイル ページ上でログの表示、コードのデバッグ、パフォーマンス分析などを簡単に実行できる軽量のフロントエンド デバッグ ツールで、開発者が問題を迅速に特定して解決し、開発効率と品質を向上させるのに役立ちます。したがって、vconsole を追加すると、モバイル ページのデバッグと最適化が容易になり、開発効率とユーザー エクスペリエンスが向上します。URL にパラメータ vconsole=1 を追加すると、コンソールが表示され、モバイル端末のトラブルシューティングの効率が向上します。
/**
* 参数携带了vconsole,就启用vconsole
*/
import VConsole from 'vconsole'
if (location.href.indexOf('vconsole') !== -1) {
import('vconsole').then(({ default: VConsole }) => {
new VConsole();
})
}
8.2、ジャンプしない nojump を追加しました
一部の異常なシナリオは、自動的に他のページにジャンプします。以前の異常なエラーはカバーされ、表示できません。これは、トラブルシューティングには役立ちません。現在のアクティビティが外部時間範囲内にない場合は、自動的にホームページにジャンプします。URL にパラメータ nojump=1 を追加すると、ページは現在のページに留まり、例外情報を確認するのに便利です。
/**
* 返回结果处理控制器
*
* @param {function} resolve promise resolve function
* @param {function} reject promise reject function
* @param {object} result 接口返回数据
* @param {boolean} isNeedReject 是否需要执行reject
* @param {string} url 请求的接口地址
*/
const handlerResult = (resolve, reject, result, isNeedReject, url) => {
//是否需要跳转
const nojump = getQueryString('nojump') === '1'
switch (result.code) {
//时间小于“活动对外时间”或者时间大于“活动下线时间”
case '103':
if (nojump) {
console.log('nojump非跳转模式', '状态码:103', '时间小于“活动对外时间”或者时间大于“活动下线时间”', '请求接口:', url, '当前页面地址:', location.href)
} else {
window.location.href = '//www.jd.com'
}
break
case '200':
resolve(result.data)
break
//未登录ERP / 登录异常 / 活动类型有误
case '401':
window.location.href = `//ssa.jd.com/sso/login?ReturnUrl=${encodeURIComponent(location.href)}`
break
...
}
}
9、インターフェースをキャンセルします
ページがジャンプしたり閉じたりした場合、応答エラーやサーバー リソースと帯域幅の無駄を避けるために、進行中のリクエストをキャンセルする必要があります。
具体的な実装計画は、インターフェイスの読み取り時にインターフェイスの一意の識別子を生成し、それをグローバル オブジェクトに格納することです。次に、beforeunload イベント リスナーを window オブジェクトに追加します。ユーザーがページを閉じるか更新すると、リスナー内のコールバック関数が実行されます。グローバル変数 window.globleAxioToken に以前に保存されていたリクエストをキャンセルします。
10. ポーリングインターフェイスが異常で、下のページに3回ジャンプします
速度リストには非常に高いリアルタイム パフォーマンスが必要なため、最新のデータが毎秒ポーリングされます。ネットワーク変動やサーバー例外による散発的なエラーを避けるため、例外発生時にポーリングインターフェースを3回呼び出した後にエラーページにジャンプする方式を実装しています。これにより、Web サイトの安定性とユーザー エクスペリエンスが向上します。エラーが散発的である場合、ユーザーはすぐにあきらめるのではなく、1 回目または 2 回目の試行で再試行することができるため、チャーンが減少します。同時に、ネットワークの変動やサーバーの異常による誤検知を軽減し、ユーザーへの無用なトラブルや影響を回避することもできます。
11. ローカルパッケージ分割コマンド
開発効率を向上させるためには、以下のように複数のクイックスタートコマンドを追加する必要があります。
1. ローカルのモック データ環境を開始します。これにより、バックエンド インターフェイスが開発されていないときに、フロントエンドのモック データを並行して開発できます。
2. バックエンドとの接続に便利なテスト環境データ環境を起動します。
3. オンライン データを開始し、ユーザーの実際の環境をシミュレートして問題のトラブルシューティングを行います。
4. コンパイルおよびテスト環境
5. オンライン環境を構築する
"start:dev": "node script/switch_env_server.js dev && cross-env BUILD_ENV=dev vue-cli-service serve --open",
"start:prod": "node script/switch_env_server.js prod && cross-env vue-cli-service serve --open",
"start:mock": "node script/switch_env_server.js local && cross-env MOCK=true vue-cli-service serve --open",
"build:dev": "node script/switch_env_build.js dev && cross-env BUILD_ENV=dev npm run oss",
"build:prod": "node script/switch_env_build.js prod && cross-env BUILD_ENV=prod npm run oss"
異なるファイルは異なるコマンドを通じて読み取られ、異なる環境インターフェイスが実装されます。
12. モニタリング
ump監視を追加しました。ページリンクの接続状態を1分ごとに訪問し、ページが200、301、302以外の異常なステータスコードを返すかどうかを判断します。ページアクセス例外が3回連続した場合に発生します。異常なステータスコードが返された場合は、社内チャットツール「ドンドン」や電子メールなどを通じてメッセージをプッシュ配信する。
要約する
この記事では、京東速度表の H5 ページのコア フロントエンド テクノロジを紹介します。これらのテクノロジは、開発者が H5 ページをより適切に開発し、Web サイトの品質とユーザー満足度を向上させるのに役立ちます。同時に、変化する市場やユーザーのニーズに適応するために、ページの読み込み速度のさらなる高速化、ページの構造とレイアウトの最適化、Web サイトのアクセシビリティの強化など、将来の計画もまだいくつかあります。今後もH5ページの最先端技術と開発動向に注目し、常に新しい技術ソリューションを模索・実践し、ユーザーにより良い体験とサービスを提供してまいります。
著者: JD Retail ラオ・エンフイ
出典: JD Cloud 開発者コミュニティ