uni-app实现购物商城项目的首页页面

1. 下载 HBuilder X官网下载地址与安装

第一步： HBuilderX官网下载地址: https://www.dcloud.io/hbuilderx.html
第二步：点击 Download for Windows 下载

第三步：下载解压安装成功后点击文件所在的路径下点击：HBuilderX.exe，即可打开软件

1.1 插件安装

第一步：打开软件后找到头部的状态栏，选择工具按钮再点击插件安装按钮

第二步：由于软件的更新一代比一代强，软件下载后已经自动安装scss/sass编译

所以我们只需要手动在软件内安装uni-app(vue2)编译器与内置浏览器安装，内置浏览器是运行界面可以查看代码运行后的效果，如有其他插件需要安装可点击前往插件市场安装，在搜索栏搜索所需要安装的插件即可

2.创建一个项目

第一步：启动HBuilderX，创建uni-app。点击菜单栏里面的“文件”→“新建”→“项目”命令

第二步：选择“uni-app类型”，输入‘想取的英文项目名’,选择项目保存路径，点击“创建”按钮即可

创建成功后右下角会显示“项目【某某】创建成功”

3.首页页面

3.1 效果图

3.2 实现组件代码

其中的视图文件代码中的**jsq-header** 需要在项目文件中新建一个组件文件夹名为**components**来存放组件文件

3.2.2.1 创建组件components文件

第一步：首先鼠标右击自己新建的项目名，点击新建，点击目录

第二步：点击目录后会显示一个白色空的输入区域，随后输入components回车即可

第三步：新建成功后，开始新建一个组件页面
，鼠标右键点击新建组件。

第四步：在请输入组件名称内输入jsq-heade

输入jsq-heade后勾选创建同名目录以便方便查看组件，然后点击创建即可。

创建成功后的显示：

3.2.2.2：输入jsq-heade文件代码内容

第一步：其实这个jsq-heade文件是效果图中的搜索框

第二步：输入jsq-heade文件的基础搜索栏代码

视图代码：template

<template>
	<view>
		<view class="header">
			<navigator class="sousuo">
				<text class="iconfont">&#xe693;</text>
				<text>搜索</text>
			</navigator>
		</view>
	</view>
</template>

脚本代码：script

<script>
	export default {
   
		name: "jsq-header",
		data() {
   
			return {
   
				SwiperList:[]
			}
		}
	}
</script>

样式代码：style

<style lang="scss">

	.header {
   
		width: 750rpx;
		height: 90rpx;
		background-color: var(--red);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: var(--window-top);
		z-index: 10;

		.sousuo {
   
			background-color: #fff;
			width: 720rpx;
			height: 60rpx;
			border-radius: 10px;