uniApp-Mall Project-1 Project Build

The environment needs to install Hbuilder

Open Hbuilder to create a new project

Project selection Hell0 uni-app presentation template

Project directory structure

Run a project first

Obviously there is no problem

Then make simple changes to the template

1 Get rid of the update detection of App.vue. The actual online project is changed according to demand

2 Clear the pages directory

Delete the red box

If you can’t delete it, close the project and go to the project directory to delete

3 Create a new home.vue home page

Note that sometimes the editor is not updated very quickly after creating a new page

4 Modify the pages.json project configuration file

{
    
    
	"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"
	}
}

5 home.vue file

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

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

<style lang="scss">

</style>

Preview again

The project initialization ends here and the blog post is too long and it is annoying to look at

UniApp-Mall item-2 The bottom navigation tabbar will be updated later

uniApp-Mall item-2 Bottom navigation tabbar

Digression for the description of the project structure

common stores some tool class js including some vue mixins (mixed in)

components store some UI components source uni official, other third parties, custom

When hybird H5 is used in mixed editing, it will indicate that it is expected that this mall project will not be used. A two-layer web-view is set.

pages store page ui may put ajax network requests in this directory for easy searching, and ajax is at the beginning of a, it is simply too convenient to find because Hbuilder can not do TODO mark at present, it is a little uncomfortable and I start to miss idea and vscode.

manifest.json is used to perform some general app configuration permissions, icon, application name signature, etc.

Other documents do not describe it. Those who have used Vue are familiar with it.

uniApp-Mall item-2 Bottom navigation tabbar