uniapp エントリーレベル nvue クライミングピット記録の分析

uniapp エントリーレベル nvue クライミングピット記録の分析

序文

uni-app は、DCloud が開発した新世代のクロスエンド フレームワークです。クロスエンドの数が最も多いフレームワークの 1 つと言えます。現在、アプリ (Android/iOS)、H5、ミニプログラム (WeChat ミニプログラム/Alipay ミニプログラム/Baidu ミニプログラム/ByteDance ミニプログラム) への公開をサポートしています。市場に出回っている同様のフレームワークには、Taro (JD.com 製) や Megalo (NetEase 製) などがあります。

weex でサポートされているもののほとんどは nvue でもサポートされているため、ここでは weex の関連コンポーネントや API 呼び出しについては詳しく説明せず、実際の開発プロセスで発生したいくつかの小さな問題についてのみ説明します。

こんにちは世界

最初の nvue ページの作成を開始します。

ディレクトリ構造:

index.nvue コードは次のとおりです。

<テンプレート>
	<div>
        <テキスト>{{テキスト}}</テキスト>
    </div>
</テンプレート>
<スクリプト>
	エクスポートデフォルト{
		データ() {
			戻る {
				テキスト: 'Hello World'
			}
		}
	}
</スクリプト>

このように、実際のマシンで実行すると、次のエラーが発生する可能性があります。

この問題が発生する理由は、uni-app プロジェクトに vue ページが存在する必要があるためです。新しい vue ページを作成して再度実行すれば問題は発生しません。

画像 境界線の半径を設定する

nvue では、画像に border-radius を設定することはできません。長方形のパターンを円に変更したい場合は、画像の周囲に div を囲む必要があります。コードは次のとおりです。

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <画像スタイル="幅: 400px;高さ: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[email protected]"></画像>
</div>

実ピクセルを設定する

Weex 仕様には長さの単位が 1 つだけあります: px。画面全体の幅は 750 px です。長さを設定すると、Weex エンジンは、uni-app の upx と同様に、携帯電話の画面の幅に基づいて実際の長さを動的に計算します。

ただし、実際の開発プロセスでは、このような動的な長さの単位は必要ではない場合があります。この場合、weex 1.x バージョンの長さの単位 wx を使用できます。この単位は実際のピクセル単位です。weex のドキュメントには記載されていませんが、まだ利用可能です。もちろん、weex のアップデートにより、wx はこれをサポートしなくなる可能性があります。

外部CSSをインポート

App.vue で記述された共通スタイルは nvue では有効ではありません。複数の nvue で共通スタイルを使用する場合は、外部 CSS を導入する必要があります。

Weex の制限により、@import "xxx.css" を使用してスタイル ノードに外部 CSS をインポートすることはできません。CSS をインポートするには、次の方法を使用する必要があります。

<style src="@/common/test.css"></style>
<スタイル>
   。テスト {
        色: #E96900;
   }
</スタイル>

<style src="@/common/test.css"></style> ノードにスタイルを記述しても効果がないことに注意してください。

ttfフォントファイルを使用する

nvue または weex では、@font-face を介して CSS でフォ​​ントファイルを直接インポートすることはできません。フォントファイルをインポートするには、JS で DOM モジュールを使用する必要があります。weex のドキュメントを参照してください。

DOMモジュールをweex.requireModule('dom')に追加します。
domModule.addRule('fontFace', {
    'fontFamily': "アイコンフォント2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

vue は nvue を開くときにパラメータを渡します

vue は nvue を開くときに URL の後にパラメータを渡すことができないため、パラメータを渡す唯一の方法はストレージを使用することです。

vueページでnvueを開く

uni.setStorageSync('テスト', 'hello');
uni.navigateTo({
    url:"/pages/nvue/nvue"
})

nvue ページでパラメータを取得します。create で uni-app API を呼び出す場合、正常に呼び出すまでに多少時間がかかります (uni-app フレームワークの最新バージョンではこの問題が修正されており、遅延なく正常に呼び出すことができます)。

<スクリプト>
    エクスポートデフォルト{
        作成された() {
        	console.log("nvue が作成されました!");
            タイムアウトを設定する(() => {
                uni.getStorage({
                	キー: 'テスト',
                    成功: (res) => {
                    	console.log("前のページから渡されたデータを取得します" + res.data)
                    }
                })
            },200)
        }
    }
</スクリプト>

模倣WeChatモーメンツ効果

開発中、WeChat Moments と同じ効果を実現する必要のあるページがあります。全体のリストは上から下に配置され、各リストは 2 つの列に分かれており、左側にユーザ​​ー アバター、右側にメッセージ コンテンツが表示されます。

開発時に最初に思い浮かぶのは、親要素に flex-direction: row; を使用して、アバターとコンテンツをそれぞれ左と右に表示することです。しかし、問題があります。コンテンツ領域の高さはテキストの長さに応じて拡張できません。親要素が上から下の配置を使用している場合、コンテンツ領域の高さはテキストによって拡張できます。

問題が発生するコードは次のとおりです。

<テンプレート>
    <div style="background-color: #ccc;">
        <div class="items">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。コンテンツは上下に配置すると引き伸ばすことができます。 </テキスト>
            </div>
        </div>
        <div class="items" style="flex-direction: row;">
            <div class="headImg"></div>
            <div class="rgtBox" style="flex: 1;">
                <text>コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。コンテンツを左右に配置すると、引き伸ばすことはできません。</text>
            </div>
        </div>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
    }
</スクリプト>
<スタイル>
    .アイテム {
        背景色: #fff;
        下部マージン: 50px;
    }
    .headImg{
        幅: 100ピクセル;
        高さ: 100px;
        背景色: #555;
    }
    .rgtボックス{
        背景色: #fff;
    }
</スタイル>

この問題は Weex のバグであるはずです。左の要素の高さを設定した後、右の要素の高さが設定されていない場合、その最大の高さは左の要素の高さになります。解決策としては、アバターとコンテンツを上下に配置し、コンテンツ領域の margin-left、margin-top、min-height を設定して同様の効果を実現することです。

コードは次のとおりです。

<テンプレート>
    <div style="background-color: #ccc;flex-direction: column;">
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>短いテキスト、短いテキスト</text>
            </div>
        </div>
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>ここには長いテキストがあります、 ...</text>
            </div>
        </div>
    </div>
</テンプレート>

<スクリプト>
    エクスポートデフォルト {}
</スクリプト>
<スタイル>
    。アイテム {
        背景色: #fff;
        下部マージン: 50px;
    }
    .headImg{
        幅: 100ピクセル;
        高さ: 100px;
        背景色: #555;
    }
    .rgtボックス{
        幅: 600ピクセル;
        最小高さ: 100px;
        左マージン: 130px;
        上マージン: -100px; 
        背景色: #fff;
    }
</スタイル>

上記は、uniapp エントリーレベルの nvue の落とし穴の詳細な分析です。uniapp エントリーレベルの nvue の落とし穴の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue uniapp はセグメンター効果を実現します
  • vue+uniappライブ放送プロジェクトに基づいて、uni-appはDouyin / Momoライブ放送ルーム機能を模倣します
  • uniappとvueの違いの詳細な説明

<<:  CentOS8 yum/dnfで国内ソースを設定する方法

>>:  CentOS 8 Zabbix 4.4 インストール ガイド

推薦する

Linux システムのユーザー管理コマンドの概要

ユーザーとグループの管理1. ユーザーとグループの基本概念ユーザーとグループ:システム上のすべてのプ...

ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...

CSS で div 凹角スタイルを実装するサンプル コード

通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...

Docker で hyperf を開発する完全な使用例の詳細な説明

ハイパーフ公式サイトHyperf 公式ドキュメントのインストール1. Dockerの使用docker...

Linux 3.X/4.x/5.x でパゴダ パネルのパスワードを忘れた場合の解決方法

ssh に入り、次のコマンドを入力してパスワードをリセットします (コマンドの末尾の「testpas...

MySQLのあいまいクエリインデックスの失敗の問題を解決するいくつかの方法

% ワイルドカードを使用すると、インデックス失敗の問題が発生することがよくあります。ここでは、lik...

アバターと国旗の統合を実現する1行のCSSコード

今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。毎年この時期になると、WeChat...

AIX マウント NFS の書き込み効率が低い場合の解決策

NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...

HTML リスト ボックス、テキスト フィールド、ファイル フィールドのサンプル コード

ドロップダウンボックス、テキストフィールド、ファイルフィールド 上半分はデモンストレーション効果、下...

React の調整アルゴリズム Diffing アルゴリズム戦略の詳細な説明

目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...

Mac ノードの削除と再インストールのケーススタディ

Macノードの削除と再インストール消去 ノード -v sudo npm アンインストール npm -...

Flex プログラム Firefox で中国語を入力すると文字化けするバグ

Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...

Linux環境にJDKとTomcatをインストールする詳細な手順

目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...

Linux システムで Tomcat のポート 80 を使用する方法

アプリケーションシナリオ多くの場合、Linux サーバーに tomcat や nginx などのソフ...

jsはショッピングサイトの虫眼鏡機能を実現します

この記事では、ショッピングサイトの虫眼鏡機能を実現するためのjsの具体的なコードを紹介します。具体的...