uni-app の概要: プロジェクトの作成とネイティブタブバーの構成-uni-app-php.cn

ホームページ

ウェブフロントエンド

uni-app

uni-app の概要: プロジェクトの作成とネイティブタブバーの構成

似水流年ヾ ^_^

Jun 17, 2022 pm 06:23 PM

uni-app

uni-app は、Vue.js を使用してクロスプラットフォームアプリケーションを開発するためのフロントエンドフレームワークです。開発者は、iOS、Android、H5、ミニプログラムなどの複数のプラットフォームにコンパイルできるコードセットを作成します。ネイティブミニプログラム開発と比較して、APP の両端がネイティブで開発され、学習と開発のコストが低く、プラットフォームには豊富なコンポーネントが付属し、実行エクスペリエンスが非常に優れているため、開発者に広く歓迎されています。

開始する前に、開発者は次のツールをダウンロードしてインストールする必要があります: HBuilderX: 公式 IDE ダウンロードアドレス

1. 最初のユニアプリプロジェクトを作成します

ツールバーで [ファイル] -> [新規作成] -> [プロジェクト] をクリックします。

左側でユニアプリプロジェクトを選択し、プロジェクト名 (例: test) を入力し、ファイルパスを選択し、デフォルトを使用します。テンプレートを選択して [作成] をクリックすると、ユニアプリプロジェクトを正常に作成できます。

uni-app の概要: プロジェクトの作成とネイティブタブバーの構成

2. プロジェクトディレクトリの紹介

新しいユニアプリプロジェクトが正常に作成されると、プロジェクトディレクトリに次のファイルが生成されます:

uni-app の概要: プロジェクトの作成とネイティブタブバーの構成

3. プレビューのデバッグ

新しいユニアプリプロジェクトが正常に作成されたら、プロジェクトの右側にあるプレビューボタンをクリックしてツールでプレビューできます。 HBuilderX ツール。レイアウト構造、スタイル、コンソールなどをデバッグおよび表示できます。

uni-app の概要: プロジェクトの作成とネイティブタブバーの構成

4. ネイティブタブバーの作成と構成

ページを開きます.json ファイルを編集し、タイトルを変更し、ページルーティングを追加し、タブバーを追加し、「ホーム」、「カテゴリ」、「ショッピングカート」、「マイ」の 4 つのタブバーを追加します。これに応じて、pages ディレクトリに 4 つのページを作成します。コードは次のとおりです:

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "ShopWind多商户商城"
			}
		}, {
			"path": "pages/user/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}, {
			"path": "pages/cart/index",
			"style": {
				"navigationBarTitleText": "购物车"
			}
		}, {
			"path": "pages/category/index",
			"style": {
				"navigationBarTitleText": "商品分类"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#333333",
		"selectedColor": "#fc2b34",
		"borderStyle": "white",
		"backgroundColor": "#FFFFFF",
		"position": "bottom",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/images/home.png",
				"selectedIconPath": "static/images/home-hover.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/index",
				"iconPath": "static/images/gcategory.png",
				"selectedIconPath": "static/images/gcategory-hover.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/cart/index",
				"iconPath": "static/images/cart.png",
				"selectedIconPath": "static/images/cart-hover.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/index",
				"iconPath": "static/images/my.png",
				"selectedIconPath": "static/images/my-hover.png",
				"text": "我的"
			}
		]
	}
}