[アプレット] uni-appを使用してアプレット環境のフレームワークを構築する

開発ディレクトリは次のとおりです。

    
┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─static             
├─main.js       
├─App.vue          
├─manifest.json  //文件是应用的配置文件，用于指定应用的名称、图标、权限等
└─pages.json    //文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

の属性	タイプ	必要です	説明文	プラットフォーム互換
globalStyle	対象	いいえ	デフォルトページのウィンドウパフォーマンスを設定する
ページ	オブジェクト配列	はい	ページパスとウィンドウパフォーマンスを設定する
タブ	対象	いいえ	下のタブのパフォーマンスを設定する
調子	対象	いいえ	起動モードの構成
サブパッケージ	オブジェクト配列	いいえ	外注ローディング構成
preloadRule	対象	いいえ	下請契約のダウンロード前のルール	WeChat Miniプログラム
労働者	ストリング	いいえ	`Worker` コード配置ディレクトリ	WeChat Miniプログラム

globalStyle

　　アプリケーションのステータスバー、ナビゲーションバー、タイトル、ウィンドウの背景色などを設定するために使用されます。

　　注目

- 画像へのリンクは、Alipayアプレットを使用するtitleImage場合に使用するhttps必要があります。効果を確認するには、実際のマシンでデバッグする必要があります。Alipay開発者ツールには影響しません。
- globalStyle設定の設定titleImageも上書きされます- pages> style設定のテキストタイトル
- navigationBarTextStyleはiOS13では乱雑になる可能性があります。この問題は将来のバージョンで修正される予定です

ページ

uni-app ページノードは、アプリケーションが構成されるページを構成します。ページノードは配列を受け取ります。配列内の各項目はオブジェクトであり、そのプロパティ値は次のとおりです。

の属性	タイプ	デフォルト値	説明文
道	ストリング		構成ページのパス
スタイル	対象		ページウィンドウのパフォーマンスを構成します。構成アイテムについては、以下のpageStyleを参照してください

チップ：

ページノードの最初の項目は、アプリケーションエントリページ（つまり、ホームページ）です。
アプリケーションの新規/縮小ページはすべて、ページ配列を変更する必要があります
ファイル名にサフィックスを付ける必要はありません。フレームワークはパスの下のページリソースを自動的に検索します

タブ

アプリケーションがマルチタブアプリケーションの場合、tabBar構成項目を使用して、タブバーのパフォーマンスと、タブが切り替えられたときに表示される対応するページを指定できます。

チップ

上に配置するとアイコンが表示されない
tabBarのリストは配列であり、構成できるタブは2つから5つまでで、タブは配列の順にソートされます。
タブバースイッチは、最初に読み込まれたときに時間内にレンダリングされない場合があります。各タブバーページのonLoadライフサイクルで待機中のスノーフレークを最初にポップアップできます（hello uni-appはこのメソッドを使用します）
トン一度の後、再びタブバーのページを切り替え、メモリ内に残り、それが唯一のonShow各ページをトリガする、とのonLoadトリガされません表示するページabbar。
上部のタブバーは現在、WeChatアプレットでのみサポートされています。トップタブを使用する必要がある場合は、タブバーのトップ設定を使用するのではなく、トップタブを自分で作成することをお勧めしますhello uni-app-> template-> top tabを参照できます。

タブバーに関するFAQ

タブバーのjs apiはinterface-interface- tabbarを参照してください。これにより、動的な表示と非表示（ポップアップレイヤーがタブバーをカバーできないなど）、コンテンツの変更（国際化など）、アイテムと角度、その他の機能を実現できます。hello uni-appの例もあります。
タブバー項目のクリックイベントについては、ページライフサイクルのonTabItemTapをご覧ください。
コードはタブバーページにジャンプし、apiはuni.switchTabのみを使用でき、uni.navigateTo、uni.redirectToは使用できません。ナビゲーターコンポーネントを使用してジャンプする場合は、open-type = "switchTab"を設定する必要があります
タブバーは、H5側のdivによってシミュレートされ、フロントエンド画面ウィンドウの一部です。下部の配置方法を使用する場合は--window-bottom、タブバーの上に10ピクセル吊るされたボタンなどのcss変数を使用する必要があります。bottom: calc(var(--window-bottom) + 10px)
タブバーのデフォルトの高さは、プラットフォームによって異なります。もっと見る
参考のため、中央に+記号が付いたタブバーテンプレートの例。終わりを越えることができますが、+記号は発生しません。
中央にタブバーが必要な場合は、タブバーをカスタマイズできます。colorUIなどの例がプラグインマーケットにあります。ただし、フロントエンドタブバーのパフォーマンスはネイティブタブバーほど良くないことに注意してください。マルチページ方式の場合、切り替え時に下部タブバーが遷移アニメーションを点滅させます。シングルページ方式の場合、複雑なページコンテンツでパフォーマンスの問題が発生します。プラグインマーケット検索タブバーの多くの同様の例があります。
アプリ側でnvueを使用してタブバーをカスタマイズする場合、パフォーマンスエクスペリエンスの問題はありません。
純粋なnvueプロジェクト（マニフェストのレンダラーはネイティブ）、現在pages.jsonのタブバーを使用しているため、パフォーマンスに影響します。フロントページを使用して単一ページのタブバーを実装することをお勧めします。このバグは後で解決されます。
Androidアプリのポップアップキーボードでタブバーがポップアップする問題。HBuilderX 2.2にアップグレードすると、存在しなくなります。
ホームページには1つのネイティブタブバーしかありません。セカンダリページのタブの場合、フロントエンドはそれ自体を実装します。
最初にログインしてからタブページを入力する必要がある場合は、ランディングページをホームページとして設定する必要はありません。ホームページは引き続きタブバーページです。新しいユニアプリプロジェクトを作成するときにHBuilderXログインテンプレートを参照できます。
フロントエンドのポップアップマスクレイヤーはタブバーの問題をブロックできず、クロスエンド処理メソッドの間、タブバーは動的に非表示になります。アプリ側では、ポップアップとマスクにplus.nativeObj.viewまたはsubNVueを使用できます。ネイティブアイコン共有メニューの例の下部を参照してください
WeChatミニプログラムシミュレータバージョン1.02.1904090にはバグがあり、シミュレータページのパーセンテージをズームした後、複数回クリックするとタブバーがフリーズします。実機は無害ですのでご使用の際はご注意ください。もっと見る

manifest.json このファイルは、アプリケーションの構成ファイルであり、アプリケーションの名前、アイコン、および権限を指定するために使用されます。

package.json

package.jsonファイルにuni-app拡張ノードを追加すること　　により、カスタム条件付きコンパイルプラットフォーム（Dingdingアプレット、WeChatサービス番号など）を実装できます。

Package.json拡張構成の使用法（コメントを削除することを忘れないようにコードをコピーしてください！）：

{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": ""  //基准平台 
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }

}

チップ：

UNI_PLATFORMサポートにのみ記入しuni-app、現在、以下の列挙に限定デフォルトリファレンス・プラットフォームでサポートされて、 app-plus値を：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、、mp-qq
BROWSER のみUNI_PLATFORMであるh5現在、以下の列挙に制限され、有効Chromeな値：Firefox、IE、Edge、Safari、、HBuilderX
package.jsonファイルにコメントを含めることはできません。そうでない場合、拡張構成は無効です。
vue-cli最新バージョンに更新する必要があります。HBuilderXをAlpha 2.1.6+バージョンにアップグレードする必要があります

[アプレット] uni-appを使用してアプレット環境のフレームワークを構築する

タブバーに関するFAQ

おすすめ