欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-05 10:36:35
...

环境需要安装 Hbuilder

打开Hbuilder 新建项目

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

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

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

项目目录结构

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

先跑一篇项目

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

显然是没有什么问题的

然后对模板做简单修改

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

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

2 清空pages目录

uniApp - 商城项目 - 1 项目搭建
删掉红框部分

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

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

3 新建 home.vue 首页

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

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

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

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 - 商城项目 - 1 项目搭建
uniApp - 商城项目 - 1 项目搭建

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

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

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

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

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

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