序文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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: CentOS8 yum/dnfで国内ソースを設定する方法
>>: CentOS 8 Zabbix 4.4 インストール ガイド
ユーザーとグループの管理1. ユーザーとグループの基本概念ユーザーとグループ:システム上のすべてのプ...
ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...
通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...
ハイパーフ公式サイトHyperf 公式ドキュメントのインストール1. Dockerの使用docker...
ssh に入り、次のコマンドを入力してパスワードをリセットします (コマンドの末尾の「testpas...
% ワイルドカードを使用すると、インデックス失敗の問題が発生することがよくあります。ここでは、lik...
今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。毎年この時期になると、WeChat...
NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...
ドロップダウンボックス、テキストフィールド、ファイルフィールド 上半分はデモンストレーション効果、下...
目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...
Macノードの削除と再インストール消去 ノード -v sudo npm アンインストール npm -...
Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...
目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...
アプリケーションシナリオ多くの場合、Linux サーバーに tomcat や nginx などのソフ...
この記事では、ショッピングサイトの虫眼鏡機能を実現するためのjsの具体的なコードを紹介します。具体的...