WeChat Mini Program Short Play Development Technology Stepping Pit Guide Imitation Douyin Kuaishou Small Video

1. ビデオ コンポーネント

WeChat 公式文書アドレス:

https://developers.weixin.qq.com/miniprogram/dev/component/video.html

Uniapp 公式文書アドレス:

https://uniapp.dcloud.net.cn/component/video.html

2. Swiper と Video が Douyin Kuaishou の効果をどのように達成するか

公式のヒントは 3 つのラベルを超えないようにします (同じインターフェイス) 公式のヒントは 3 つのラベルを超えないようにします (同じインターフェイス)

リンクアドレス:
https://developers.weixin.qq.com/community/develop/doc/000e4ef22583d8961919efb6b56009

  • 解決策 1: swiper で iamge タグと Video タグを切り替える
  • 解決策 2: スワイパーには 3 つの固定ビデオ タグしかなく、アルゴリズムを使用してデータ ソースの更新と切り替えを行う

3. ビデオコンテンツの互換性

ビデオ コンテンツが暗号化されていない場合は、mp4 形式のファイルが優先されます。
m3u8 は多くの Android モデルでエラーを報告し、異常な再生が発生しました。

エラー 1

errMsg":"HLS error, type: mediaError, details: bufferStalledError,

エラー 2

{"errMsg":"HLS error, type: mediaError, details: fragParsingError, response: \"none\""},

エラー 3

{"errMsg":"MEDIA_ERR_DECODE(-4003,-1)"}}

4.一部の携帯電話は、フリーズ、フリーズ、グリーンスクリーンなどになる場合があります。

解決:

  • 1:m3u8をmp4ファイルに変更
  • 2: Video コンポーネントに属性custom-cache="{ {true}}"を追加します

ヒント: ほとんどの Huawei の携帯電話には異常があり、Xiaomi にも小さな部分があります。

5. 動画コンテンツのキャプチャ方法

自分のアプレット内のビデオ データが他人に下請けされないようにする方法。

概要: Apple は現在、適切な解決策を持っていません.Android は、m3u8 を介してリモートで暗号化し、ローカルで再生できます。

WeChatの公式文書から、私たちはそれを知っています
ここに画像の説明を挿入

しかし、実際に使用すると、WeChat IOS ビデオはローカル一時ファイルの読み取りをサポートしていませんが、Android はサポートしています。

上記に基づいて、バックエンドから返された暗号化された m3u8 ファイルを、フロントエンドの復号化アルゴリズムを介してローカルにキャッシュし、最終的に再生することができます。(興味のある方は、メッセージまたはプライベートメッセージを残してください)

6. 独自のインターフェイスがキャプチャされないようにする方法

解決

  • 1:WeChatが提供するゲートウェイサービスを利用して、パケットキャプチャ時にネットワークから要求されたデータが見えないようにする(有償
  • 2: フロントエンドとバックエンドは署名暗号化を使用してデータを復号化できます (無料)

7. 小さなプログラム インターフェイスへのアクセスが遅い

ここに画像の説明を挿入

1:アプレット側でドメイン名検証が有効になっているか確認する
2:ミニプログラム管理のバックグラウンド設定
開発管理-「開発設定-」IPホワイトリスト+サーバードメイン名
3:バックグラウンド運用・保守と連携し、サーバードメイン名が有効になっているか確認するご覧のとおり、有料の CDN アクセラレーションです

8. アプレットのドメイン名にアクセスできない

1:アプレット側でドメイン名検証が有効になっているか確認
2:アプレット管理背景設定
開発管理-「開発設定-」ipホワイトリスト+サーバドメイン名
3:運用保守背景に対応するサーバとIPが有効かどうかhttps証明書に対応するように設定

例:

'{"errno":600001,"errMsg":"request:fail -200:net::ERR_CERT_COMMON_NAME_INVALID"}',

上記のエラーは、サーバーIPにhttps証明書がないことが原因で発生しており、背景や運用・保守のお兄さんに対処してもらうことができます。

9. 存在しないパス path を解決して、既存のアプレットにアクセスします。

uniapp が開発したアプレットを例にとると、onLaunch と同じレベルのApp.vue に次のコードを追加します。

onPageNotFound(e) {
			printLog('页面路径未找到', JSON.stringify(e))
			let query = e.query;
			let paramsArr = Object.keys(query);
			let params = '';
			paramsArr.forEach((item, index) => {
				if (index === (paramsArr.length - 1)) {
					params += (item + '=' + query[item]);
				} else {
					params += (item + '=' + query[item] + '&');
				}
			});
			if (e.path.includes('oldPage')) {
				uni.reLaunch({
					url: `/pages/newPage/newPage?${params}`
				})
				printLog('页面路径未找到,打开新页面', params)
				return false;
			} else {
				uni.reLaunch({
					url: `/pages/home/home`
				})
				printLog('页面路径未找到,打开主界面')
			}
		},

10. アプレットでエラー例外を監視する方法

uniapp が開発したアプレットを例にとると、onLaunch と同じレベルのApp.vue に次のコードを追加します。

エラーは、定期的または即時にバックグラウンドに報告
するか、WeChat のWE 分析プラットフォームまたはサードパーティ アプレット レポート統計プラットフォームに報告することができます。

onError(error) {
			printLog('小程序报错', JSON.stringify(error))
			if (this.globalData.errorCount < 6) {
				printLog('小程序报错 上报')
				sensor.reportWeixinEvent("app_lauch", {
					"errordetail": JSON.stringify(error)
				})
				this.globalData.errorCount += 1
			}
		},

11: 他の人が私たちのビデオ リソースを録画できないようにする方法

アンドロイドプラットフォーム

次のコードは、Android ユーザーが記録したビデオ画面をすべて黒くすることができます。

スクリーンショットの場合、プロンプトが表示されます:このアプリケーションではスクリーンショットは許可されていません

wx.setVisualEffectOnCapture({
						visualEffect: 'hidden',
						success: (res) => {
							printLog('录屏 success->', res)
						},
						fail: (err) => {
							printLog('录屏 fail>', res)
						},
						complete: (res) => {
							printLog('录屏 complete>', res)
						}
					})

iOS プラットフォーム

次のコードを使用して、通知イベントを監視および送信し、リマインダーを妨害するために処理する必要があるインターフェイスの上位レイヤーにカスタム ビューを追加します。

wx.onScreenRecordingStateChanged(function(res) {
						printLog('录屏状态', res.state)
						uni.$emit('screenRecord', res.state == 'start');
					})
					wx.getScreenRecordingState({
						success: (res) => {
							printLog('查询 录屏 success->', res)
							if (res.state == 'on') {
								uni.$emit('screenRecord', true)
							} else if (res.state == 'off') {
								uni.$emit('screenRecord', false)
							}
						},
						fail: (err) => {
							uni.$emit('screenRecord', false)
						}
					})

12. アプレットのカテゴリーが合わない場合の審査通過方法

実際の運用区分がAで、審査時にAの区分資格を補う必要があると不採用となったが、Aの区分資格を自分で取得できない場合は、迂回して解決することを検討できます。

全体的な考え方は、レビュー時に正しいデータ レイアウトであるということです。

審査を通過してオンラインになったら、OSS 構成またはバックグラウンド インターフェイスを介してデータを最新に調整します。

13. 1 セットのコードは複数のミニプログラムにどのように対応していますか?

フロント エンドとバック エンドは、アプレット ID などの 1 つ以上のフィールドと、どのアプレットが

14. wx.login がたまにデータ取得に失敗する場合の対処法

  • 取得したら、通常どおり動作し、バックグラウンド API にログインと登録を要求できます。
  • 取得が空の場合は、デバイス ID 戦略を使用して最初にログインし、次に wx.login 要求のバックグラウンドを更新します
  • 取得に失敗した場合はリトライする リトライ回数を設定した方が良い
wx.login({
					timeout: 10000,
					success(res) {
						if (res.code) {
							//有微信code登录
							that.postLoginData(params, res.code)
						} else {
							//无微信code登录 借助设备id登录,后续在接口里再补充wxCode上去
							that.postLoginData(params)
						}
					},
					fail(failRes) {
						//重试
					},
				})

15. アプレットの CSS アニメーションが最終状態のままで失敗する

これを追加するだけでは不十分です-webkit-animation-fill-mode:forwards。追加する必要もあります!important

以下の究極のソリューションをご覧ください。

.zhuanpanView360{
	-webkit-animation-fill-mode:forwards !important ;
	animation-fill-mode: forwards !important;
	animation: zhuanpan360  2.1s linear 1 ;
}

16. ミニプログラムのビデオは、競合製品と同じくらい明確で小さくするにはどうすればよいですか?

  • 1: ffmpeg コマンドを使用する
  • 2: フォーマット ファクトリを使用して圧縮する
  • 3:【おすすめ】クリッピングのショートカットを使う

解像度: 通常、元のフィルムの解像度を維持します。

エンコーディング: デフォルトの H.264 を使用

形式: mp4 ファイルを選択

フレームレート: 60fps を選択

コードレート: 1000 以上手動デバッグ

異なるビット レートで出力されるビデオ サイズも異なります。具体的なサイズは、実際のサイズと出力コンテンツの定義によって異なります。

ここに画像の説明を挿入

最後までありがとうございました。議論してメッセージを残してください。

おすすめ

転載: blog.csdn.net/admin_jalen/article/details/127396372