vue モバイル プロジェクトは uniapp に移行され、アプレットと互換性があります。

1. view domタグの置き換え

以下のタグの置換ではcss内のセレクターも置換する必要があるので注意が必要です。

1. div、p、h1~5などのブロックレベルの要素をviewタグに置き換えます。

なお、h1～5のフォントサイズはページサイズに合わせて調整する必要があります。

2.span や label などのすべてのインライン要素をテキスト タグに置き換えます。

注: テキストのフォント サイズについては、セレクターでテキスト タグを選択してフォント サイズを変更する必要があります。
これは、テキストタグ自体にデフォルトのフォントサイズが 12px の属性があるためです。

3. img はイメージタグを置き換えます

イメージを閉じる必要があります。閉じないと、実行時にエラーが報告されます。

二、リクエストリクエスト

リクエストを次からaxios置き換える必要がありますuni.request

3. ルーティングジャンプ

1. ルーティング設定

から構成をrouter変更しますpages.json

2. ルーティングジャンプ

router.pushとマークされているものからuni.navigateTo、その他router.goも交換が必要です。

3.ルート傍受

ルート インターセプトの場合、ui コンポーネントでルート インターセプトを使用できます。たとえば、uviewルート ジャンプuni.$u.routeメソッドでルート インターセプトを構成できます。
現時点では、ルーティングジャンプは次のようにする必要があります。全部更换成改方法

4. ブラウザのキャッシュデータ

小さなプログラムはありませんlocalStorage、sessionStorage和cookies。キャッシュを保存する必要がある場合は、それを使用するだけですuni.setStorage、uni.setStorageSync。

5. コンポーネントの交換

1. UIコンポーネント全体の置き換え（最大の作業負荷）

プロジェクト内の ui コンポーネントは uniapp と互換性がない可能性があります。たとえば、vue モバイル ターミナルでよく使用されるコンポーネントはvantUIuniapp と互換性がありません。
現時点では、たとえば uniapp 公式 Web サイトのプラグイン マーケットにアクセスして、互換性のある ui コンポーネントを見つけて、uni-ui、uviewui コンポーネントを置き換えることができます。通常、これには、次の
ようないくつかのタグが含まれており、新しく置き換えられた ui コンポーネントに対応するタグに置き換える必要があります。
input，textarea，checkbox，radio，button，img

2. npm install コンポーネントの互換性と置き換え

1. まず第一に: uniapp プロジェクトは npm install なしで使用できます。これを使用する場合は、コンポーネントのサイズを維持するようにしてください。小さなプログラムを公開して管理プラットフォームに送信する場合、パッケージ化されたコード不要过大全体が を主包超えることはできないからです2M。コンポーネントが大きすぎると、vendor.jsファイルも大きくなりすぎます。

2. 一部のコンポーネントには、状況に応じて使用する dom 操作が含まれています。これは、不建议使用的アプレットと互換性を持たせたい場合は、アプレット内にあるためです没有dom操作的。
この場合:
(1) uniapp プラグイン マーケットで対応するコンポーネントを見つけて交換します。
(2) 自分で作成するか、アプレットには独自の dom 操作 API があり、uni.createSelectorQuery公式 Web サイトにアクセスしてこの API を検索して確認できます。

6、コンポーネントスタイルの変更

1. コンポーネントにクラス スタイルを追加しないことをお勧めします。

場合によっては h5 まで実行するのが正常ですが、
アプレットまで実行すると食われてしまい、直接消えてしまいます。

2. 特定のページでは、コンポーネントの内部スタイルを変更する必要があります。(重要)

H5 ::v-deep を使用してコンポーネントに侵入し、スタイルに影響を与えます。
しかし、これは小さなプログラムには十分ではなく、メソッドと同じレベルに追加する必要があります。

options: {
    
    
	styleIsolation: "shared"
}

^^

7. データ取得の問題

1. Vuexデータ取得の問題

H5 上のデータは、データのリアルタイム レンダリングのために状態またはゲッター内のデータを使用できます。
ただし小程序不行、常に古いデータであるため、リアルタイムでレンダリングできません。
アプレットは、ページ内の計算された属性を使用して、DOM 上の vuex データのレンダリングを実装する必要があります。次に例を示します。

computed: {
    
    
	username() {
    
    
		return this.$store.getters.user.username;
	}
}

2. アプレットの Vue.protype でのプロパティのレンダリングの問題

H5ではmain.jsでVue.prototype.を使ってプロパティを定義する場合、この時にビューでこのプロパティを使用すると、プロパティが変更されるとビューも変更されます。
ただし在小程序上却不行、データは常に古いため、リアルタイムで変更することはできません。
解決策:
(1) Vue.prototype プロパティを設定せず、変換されたプロパティを Vuex に置きます。
(2) 使用されるメソッドの形式。例:

Vue.prototype.getData = () => {
    
    
	return Vue.prototype.data;
}

メソッドの形式では、メソッドが実行されるたびにデータが再取得されます。
ただし也有情况不建议使用、このページに留まって Vue.prototype.data を変更しても、ビューは更新されません。
这种方法仅仅适用于，获取一次性的数据。例: プロジェクトに参加するときにユーザー情報を取得します。

8. 本体パッケージが大きすぎる

1.主包小型プログラムパッケージのサイズがそれより大きい場合、2Mアップロードして公開することができません。

(1)通常、コードを書く場合、各フォルダー内のファイルは他のフォルダー内のファイルと依存関係を持つことがあります。このとき、次の点に注意する必要があり
ます主包、分包无法引用其他分包中的文件。(2) 下請け数に上限はありません。(3) 各サブパッケージのサイズは を超えることはできません。(4) タブバー ページ コンポーネントはメイン パッケージに含まれている必要があります。(5)複数のサブパッケージの内容が相互に依存している場合、それらの複数のサブパッケージを 1 つのサブパッケージに統合するため。これにより、サブパッケージがサブパッケージを参照できないという問題を回避できます。主包、分包可以引用主包中的文件

2M

技巧：

2. 冗長なコードを削除する

# 9. dom 演算命令は使用できません ミニプログラムは dom 演算をサポートしていません。
# 10. 画像の移行 タブバーのアイコンを除き、他のすべての画像はサーバーに移行され、リンクを通じてアクセスされます。
# 11、DOM 操作は、DOM 操作をサポートしていないアプレットを使用しません。