uniApp - 商城项目 - 1 项目搭建

环境需要安装 Hbuilder

打开Hbuilder 新建项目

项目选择 Hell0 uni-app 演示模板

项目目录结构

先跑一篇项目

显然是没有什么问题的

然后对模板做简单修改

1 把 App.vue 的更新检测干掉 实际上线项目根据需求更改

2 清空pages目录

删掉红框部分

如果删不了就先关掉项目 进入到项目目录里面去删除

3 新建 home.vue 首页

注意 新建页面之后 有时候 编辑器更新不是很快

4 修改 pages.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"
	}
}

5 home.vue 文件

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

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

<style lang="scss">

</style>

再次预览

项目初始化搭建到这里就结束了 博文篇幅过长看着也烦

随后会更新 uniApp - 商城项目 - 2 底部导航 tabbar

uniApp - 商城项目 - 2 底部导航 tabbar

题外话 针对项目结构的说明

common 存放一些工具类 js 包括一些 vue 的 mixins（混入）

components 存放一些 ui组件 来源 uni官方 、其他第三方、自定义

hybird H5 混编 用到时会说明 预计本商城项目不会用到 套了两层web-view

pages 存放页面ui 可能会把 ajax 网络请求放在此目录下 便于寻找 而且 ajax 是a开头 找起来简直太方便了 因为Hbuilder 目前是不能做 TODO标记的 有点小难受开始怀念 idea 和 vscode了

manifest.json 则是用来进行app的一些常规配置 权限 图标 应用名 签名等等

其他文件就不描述了 用过vue的都自来熟了

uniApp - 商城项目 - 2 底部导航 tabbar