1. 前例
まず、私は実はタイトル当事者です。タイトルに記載されている機能は WeChat によって制限されています。WeChat で開いた H5 ページのビデオをローカルに直接保存したり、フォームで友達と直接共有したりする予定はありませんビデオメッセージの。写真の場合はそのような面倒はありません。写真を直接長押しすると、WeChat がネイティブ メニューをポップアップして写真を保存または共有します。以下に示すように:
ビデオを共有するにはどうすればよいですか? 当初は、妥協策を使用すること、ビデオをリンク メッセージとして共有すること、WeChat jssdk にアクセスしてビデオ アドレスをリンク アドレスとして使用すること、ページ上の矢印を使用してユーザーに右上隅をクリックすることしかできませんでした。アドレスを共有すると、他のユーザーがリンクをクリックします。ブラウザを開いてビデオを直接再生します。
2. 結果
明らかに、この方法は非常にイライラします。共有者はリンクを共有するために特別にガイドする必要があり、共有のしきい値が高くなります。共有者はリンクをローカルに保存することはできず、リンクを保存しない限り、いつでもどこでも共有することはできません。また、共有されるのはリンクメッセージであり、共有対象者に動画であることが直感的に伝わらないため、共有意欲が低下し、同じ状況が二度発生すると共有意欲が低下する。そこで私たちは最終的にビデオを直接共有する方法を見つけたいと考えました。
3. 解決策
WeChat エコシステムで何かを行うには、WeChat のルールに従う必要があります (そして、後で説明する多くの落とし穴を埋める必要があります)。H5 には関連する機能がないため、アプレット内でそれを探す必要があります。予想どおり、アプレットは実際にビデオを直接保存または共有できます。
特定のインターフェース:
したがって、目前にあるのは、小さなプログラムの機能をどのように活用するかということです。調査の結果、3 つのオプションが次のように要約されます。
1. 既存の H5 をアプレットに埋め込む
アプレットのオープン機能を使用して、埋め込み Web ビューは H5 ページをロードし、ビデオ URL を取得した後、Web ビュー ページからアプレットの元のページにジャンプし、ビデオを表示し、ビデオを保存または共有するための関連機能を呼び出します。
問題があります：
埋め込み後、WebView の制限のため、いくつかの調整を行う必要があります。たとえば、既存のページのリンク共有操作を調整する必要があります。元の jssdk インターフェースはリンク メッセージを共有するために呼び出すことができないため、次のように変換する必要があります。共有アプレット カード。別の例として、元々は H5 を開くためにコードをスキャンしていましたが、アプレットを開くためにコードをスキャンするように調整する必要があります。
アドバンテージ：
(ポイント 2 と比較して) エクスペリエンスは比較的一貫しています。共有するときは、アプレット内でページ ジャンプを行うだけで済みます (このジャンプは、アプレット内のページが埋め込み Web ビューに限定されており、直接呼び出すことができないためです)ネイティブ インターフェイスなので、ネイティブ ページ処理にジャンプする必要があります。方法が見つからない場合は、お知らせください)、ワークロードは中程度です。
2. 引き続き H5 を使用し、ビデオを共有する場合にのみアプレットにジャンプします
WeChat では、H5 ページからアプレットを直接開く機能が提供されているため、ビデオ リンクを取得した後、パラメーターを使用してアプレットに直接ジャンプし、ビデオを保存して共有するアプレット機能を呼び出すことができます。
問題があります：
このエクスペリエンスは比較的細分化されており、ボックスがポップアップしてジャンプするかどうかの 2 番目の確認を求められ、その後、単純にビデオを表示して共有し、保存する小さなプログラムを作成する必要があります。レビュー。
アドバンテージ：
現時点では、ほとんどのプロセスを調整する必要はなく、ビデオ共有のロジックのみを調整するだけで、作業負荷は小さいです。
3. アプレットやクロスプラットフォームフレームワークのネイティブコードで既存機能を実現
問題があります：
移植の負担は大きい。
アドバンテージ：
最高のエクスペリエンス、共有するためにジャンプする必要がなく、最もスムーズなエクスペリエンス。
4. プログラムの選択
どのソリューションを選択するかは、工期が急ぐものではない、ページ構成がシンプルである、移植作業の負担が大きくないなど、自社のプロジェクトの実情を判断して決定する必要があります。ユーザーエクスペリエンスに最適なソリューションを実現します。
しかし、多くの場合、人々は川や湖にいて、自分自身を助けることができません。それはプロジェクトを行うときも同じです。時間があまり豊富ではないため、最終的に私たちは選択肢 1 を選択しました。そして最も重要なことは、3 番目の選択肢を使用することです。 party library Three.js 表示用 3Dモデルに関しては、ネイティブアプレットでの対応度が不明(その後の特殊な検証が機能せず、効果が乏しかった) 公式移植版は長らく更新されておらず、また、効果が不明な民間移植版もいくつか存在します。
そのため、調査の結果、中程度のワークロード、中程度の開発リスク、中程度のユーザー エクスペリエンスを備えたオプション 1 を選択しました。
5. 終了
この記事を書いているとき、私はすでに計画に従って調整していました。通常のプロセスは純粋な H5 のパフォーマンスと一致していると思っていましたが、予期せぬ落とし穴がたくさん見つかりました。WeChat ブラウザで H5 を開くのは通常のことです。同じように、アプレットの Web ビューを開いたときにコードが異常になるため、これらのピットのいくつかの記録と要約が後で作成されます。私たちのフロントエンドは Vue 開発を使用しているため、WeChat アプレットの Web ビューに埋め込まれた H5 のロードに関するフォローアップの概要も Vue に基づいています。