フロントエンド開発作業で遭遇する可能性のある問題とその解決策

• 1. uni-app アプレットの xxx コード依存関係分析は無視されます。
• 2.ユニアプリのポップアップ リストがスクロールし、ポップアップ ボックスの下のコンテンツもスクロールします。
• 3. ユニアプリ アプレットの通常のカスタム コンポーネントは有効になりません。

• 4. ユニアプリポップアップのポップアップレイヤー下部のギャップ問題

• 5. ユニアプリアプレットのナビゲーションバーをカスタマイズした後、iOS ページが上下にスライドする問題の解決策

• 6. uni-appでQRコードを共有し、フォトアルバムに保存します

• 7. Vue の実行時にエラーが報告される

---

1. uni-app アプレットの xxx コード依存関係分析は無視されます。

この問題は新しいタスクで発生しました。タスクが開始されると、大きな赤い色が非常に煩わしく見えました。幸いなことに、次の図に示すように、エラー メッセージには解決策も示されていました。

"ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,

---

2. ユニアプリのポップアップ リストがスクロールし、ポップアップ ボックスの下のコンテンツもスクロールします。

この問題を解決するには、ポップアップ コンポーネント コードで、最も外側のビューに @touchmove.stop.prevent="moveHandle" を追加する必要があります。

3. ユニアプリ アプレットの通常のカスタム コンポーネントは有効になりません。

これは奇妙な問題です。ページ上で通常のカスタム コンポーネントが導入、登録、使用されていますが、それらは表示されず、コンパイル後に他のエラーも報告されません。なぜですか? わかりません...この hbuilder は間違いなく次のことを行うことができます。 「私だけを捕まえても大丈夫ですか?」 調べてみたところ、他の人もこの問題に遭遇していることがわかりました。

まとめると、解決策としては大きく分けて以下の2つがあります。

1.新しいコンポーネントを参照するたびに、コンパイラを閉じて再起動します。

2.新しいコンポーネントを作成した後、新しいページを作成し、再コンパイルします (個人テストは有効です)。新しく作成したコンポーネントが有効になります。

もっと良い方法があれば、ぜひ提案してください。上記の 2 つの愚かな方法はもう使いたくないのです。

4. ユニアプリポップアップのポップアップレイヤー下部のギャップ問題

写真に示すように、私が遭遇した問題は、下部のポップアップレイヤーに隙間があることでした。調べてみると、スタイルの問題のようでした。パディングボトムが付属していたので、見てみましたソースコードを確認すると問題は解決しました。

解決：

まずはPopupのソースコードを見つけます

一番下のポップアップレイヤーが設定されているので、一番下のポップアップスタイルに注目します。

5. ユニアプリアプレットのナビゲーションバーをカスタマイズした後、iOS ページが上下にスライドする問題の解決策

このことについて話したとき、私はこう思いました。これは素晴らしいことです。これは、さらに学ぶ機会です。!!! (私の本当の考え - Apple を使用しているすべての人々を逮捕してください)、Android では問題ありませんが、問題があります。次の質問を見てください。

問題の説明:
ミニ プログラムの開発中にナビゲーション バーをカスタマイズしましたが、iOS ではページ全体が上下に移動できるため、エクスペリエンスが非常に悪いことがわかりました。

解決策:
"disableScroll": true, //ios はページ全体が上下にスライドすることを禁止します

 {
    "path": "home/index",
    "style": {
     "navigationStyle": "custom",//关闭原生导航栏
     "disableScroll":true,//ios禁止页面整体上下滑动
   }
 },

問題の説明:

下の図に示すように、実際の Android スマートフォンや開発ツールではこれが正常ですが、Big Apple に関しては (Big Apple は使用しません。まだ左右にスワイプできるかどうかはわかりません~~~) )

これはスタイルの問題なので、元のページ スタイル コードを見てみましょう。

解決：

当時はこの問題が何なのか分かりませんでしたが、後で同僚にアドバイスを求めてよく考えてみると、実はこの問題は簡単に解決できます。

初期設定の幅は 100% ですが、パディングは以下に設定されており、ボックスの幅のデフォルトの計算方法はコンテンツボックスです。これについては、次の図で詳しく説明します。

したがって、対応する HTML ページ構造の親要素で、この文をそのスタイルに追加して問題を解決します

6. uni-appでQRコードを共有し、フォトアルバムに保存します

これは難しいことではありません。これまでやったことがなく、非常に新鮮だと思うので、ここで共有します。実装する機能はこんな感じです。ポップアップ形式で表示されます。ウィンドウが表示され、ユーザーはそれを友人に転送するか、フォト アルバムを保存するかを選択できます。その後、アルバムから再投稿します。

1. ページ構造は、ポップアップウィンドウの形式であるため、uni-popup が選択されます。

<uni-popup ref="popup" animation mask-background-color="rgba(0,0,0,0.2)" @change="popChange">
			<view class="popup-container">
				<view class="inner">
					<view class="item" @click="sharePictrue">
						<text class="iconfont icon-fenxiangxiaochengxu" style="margin-right: 40rpx;"></text>
						<text class="text btn">转发给好友</text>
						<!-- <button size="mini" id="sharePictrue" style="border:none;" plain open-type="share" class="text btn">转发给好友</button> -->
						<text class="iconfont icon-xiangyou1" style="float:right"></text>
					</view>
					<view class="underline"></view>
					<view class="item" @click="saveToAlbum">
						<text class="iconfont icon-xiangcexuanze" style="margin-right: 40rpx;"></text>
						<text class="text">保存相册</text>
						<!-- <text class="iconfont icon-xiangyou1" style="float:right"></text> -->
					</view>
					<view class="underline"></view>
					<view class="cancel" @click="close">取消</view>
				</view>
			</view>
		</uni-popup>

2.js部分保存フォトアルバム

アルバムを保存するための前提条件は、この写真があることです (その場合、たとえば、写真を取得するインターフェイスを呼び出すなどして、その前にこの写真を取得する必要があります)。

uni.getFileSystemManager().writeFile ファイルを書き込みます

詳細アドレス: FileSystemManager.writeFile(Object object) | WeChat Open Document

uni.saveImageToPhotosAlbum は画像をシステム アルバムに保存します

3. QRコードを共有する

wx.showShareImageMenu()

sharePictrue() {
				wx.showShareImageMenu({
					path: '../../static/ph_fit_qrcode.png' ||
						this.qrsrc
				})
			},

7. Vue の実行時にエラーが報告される

次の図に示すように、新しいタスクを取得し、Readme ファイルの指示に従ってターミナルでコマンドを実行し、エラーを報告します。

1. エラーの理由:

ノードのバージョンが高すぎる- 当初、デフォルトでインストールしたノードは最新バージョンで、プロジェクトは古いプロジェクトでしたが、確認したところ、ノードのバージョンが高すぎることがエラーの原因でした。エラーメッセージにnode-sassが含まれているため、前にインストールされているnode-sassのバージョンを確認しました。

このバージョンはバージョン 4.14 であることがわかりますので、npm 中国語公式 Web サイトを開きます

解決：

コントロール パネルで前のノードをアンインストールし、対応するノードのバージョンをインストールします。Node.js 中国の Web サイト、ダウンロードする対応するノードのバージョンを見つけて、最後までインストールします。インストールが成功したかどうかは、cmd ウィンドウで確認できます。コマンドを再度実行して、依存関係パッケージをインストールして開始します。

要約する

以上が今日私が共有したい内容です。画面の前の皆さんのお役に立てれば幸いです、さようなら〜