uniApp-モールプロジェクト-1プロジェクトビルド

環境はHbuilderをインストールする必要があります

Hbuilderを開いて新しいプロジェクトを作成します

プロジェクト選択Hell0ユニアプリプレゼンテーションテンプレート

プロジェクトのディレクトリ構造

最初にプロジェクトを実行する

もちろん問題ありません

次に、テンプレートに簡単な変更を加えます

1 App.vueの更新検出を取り除きます。実際のオンラインプロジェクトは、需要に応じて変更されます。

2ページディレクトリをクリアします

赤いボックスを削除します

削除できない場合は、プロジェクトを閉じ、プロジェクトディレクトリに移動して削除します

3新しいhome.vueホームページを作成します

新しいページを作成した後、エディターがすぐに更新されない場合があることに注意してください

4pages.jsonプロジェクト構成ファイルを変更します

{
    
    
	"pages": [
		{
    
    
            "path" : "pages/home/home",
            "style" :                                                                                    
            {
    
    
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        }
    ],
	"globalStyle": {
    
    
		"pageOrientation": "portrait",
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "Hello uniapp",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#F8F8F8",
		"backgroundColorTop": "#F4F5F6",
		"backgroundColorBottom": "#F4F5F6"
	}
}

5home.vueファイル

<template>
	<view>
		我是首页
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				
			};
		}
	}
</script>

<style lang="scss">

</style>

もう一度プレビューする

プロジェクトの初期化はここで終了し、ブログ投稿が長すぎて見るのが面倒です

UniApp-モールアイテム-2は後で下部のナビゲーションタブバーで更新されます

uniApp-モールアイテム-2下部ナビゲーションタブバー

プロジェクト構造の説明のための余談

commonは、いくつかのvueミックスイン（ミックスイン）を含むいくつかのツールクラスjsを格納します

コンポーネントは、一部のUIコンポーネントを格納します。ソースは、uni Official、その他のサードパーティ、カスタムです。

hybird H5を混合編集で使用すると、このモールプロジェクトは使用されないことが予想されます。2層のWebビューが設定されます。

pagesはページuiを保存し、簡単に検索できるようにこのディレクトリにajaxネットワークリクエストを配置する場合があります。ajaxはaの先頭にあります。現在、HbuilderはTODOマークを実行できないため、見つけるのに便利すぎます。少し不快で、私はアイデアとvscodeを見逃し始めます。

マニフェスト.jsonは、いくつかの一般的なアプリ構成権限、アイコン、アプリケーション名の署名など​​を実行するために使用されます。

他のドキュメントにはそれが記載されていません。Vueを使用したことがある人はそれをよく知っています。

uniApp-モールアイテム-2下部ナビゲーションタブバー