ホームページ  >  記事  >  ウェブフロントエンド  >  ユニアプリの使い方

ユニアプリの使い方

coldplay.xixi
coldplay.xixiオリジナル
2020-12-09 16:29:0111347ブラウズ

uniapp の使用方法: まず、開発者は HBuilderX をダウンロードしてインストールし、次にプロジェクト ディレクトリとページを作成し、ページとタブバーを構成して、最後に実行する必要があります。

ユニアプリの使い方

#このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、thinkpad t480 コンピューター。

推奨 (無料): uni-app 開発チュートリアル

uniapp の使用方法:

1. まず、開発者は HBuilder をダウンロードしてインストールする必要がありますX

1) HBuilderX で、ツールバーのファイルをクリックし、[新規作成]、[プロジェクト] の順にクリックします。

ユニアプリの使い方

2) uni-app を選択し、プロジェクト名 (例: test) を入力し、[作成] をクリックすると、uni-app が正常に作成されます

ユニアプリの使い方

#2. プロジェクト ディレクトリ

ユニアプリの使い方

3. ページの作成

ユニアプリの使い方

4. ページとタブバーの構成

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/homework/homework",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/personal/personal",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
    "color": "#C3B8B4",
    "selectedColor": "#F76605",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "学员",
        "iconPath": "static/indexNormal.png",
        "selectedIconPath": "static/indexActive.png"
      },
      {
        "pagePath": "pages/homework/homework",
        "text": "作业",
        "iconPath": "static/homeworkNormal.png",
        "selectedIconPath": "static/homeworkActive.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "我的",
        "iconPath": "static/personalNormal.png",
        "selectedIconPath": "static/personalActive.png"
      }
    ]
  }
}

#5. 実行

ユニアプリの使い方

6 .レンダリングの操作

ユニアプリの使い方##関連する無料学習の推奨事項:

プログラミング ビデオ

以上がユニアプリの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。