uni-app实现购物商城项目的首页页面
所以我们只需要手动在软件内安装uni-app(vue2)编译器与内置浏览器安装，内置浏览器是运行界面可以查看代码运行后的效果，如有其他插件需要安装可点击。第二步：选择“uni-app类型”，输入‘想取的英文项目名’,选择项目保存路径，点击“创建”按钮即可。第三步：下载解压安装成功后点击文件所在的路径下点击：HBuilderX.exe，即可打开软件。组件代码代码qsx-header.vue文件，在i
文章目录
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"></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;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
3.3 使用接口文档的基础搭建
操作以下步骤后才可以使用接口文档（https://www.showdoc.com.cn/128719739414963/2516997897914014）
第一步：新建一个目录来存放接口脚本
新建目录名为 utils
第二步：新建一个 js 文件
文件名为 https.js 文件
第三步：在 https.js 文件写入以下脚本代码
// export default class Request {
export default function http(param) {
// export default (param) => {
// 请求参数
var url = param.url,
method = param.method || 'get', //默认为GET
header = param.header || {}, //请求头
data = param.data || {}, //向服务器接口发请求时发送的数据
token = param.token || "",
hideLoading = param.hideLoading || false; //隐藏加载动画
//拼接完整请求地址
const baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'
var requestUrl = baseUrl + url;
//请求方式:GET或POST(POST需配置
// header: {'content-type' : "application/x-www-form-urlencoded"},)
if (method) {
method = method.toUpperCase(); //小写改为大写
if (method == "POST") {
header = {
'content-type': "application/x-www-form-urlencoded"
};
} else {
header = {
'content-type': "application/json"
};
}
}
//加载圈
if (!hideLoading) {
uni.showLoading({
title: '加载中...'
});
}
// 返回promise
return new Promise((resolve, reject) => {
// 请求
uni.request({
url: requestUrl,
data: data,
method: method,
header: header,
success: (res) => {
// 判断 请求api 格式是否正确
if (res.statusCode && res.statusCode != 200) {
uni.showToast({
title: "api错误" + res.errMsg,
icon: 'none'
});
return;
}
// code判断:200成功,不等于200错误
if (res.data.meta.status) {
if (res.data.meta.status != '200') {
uni.showToast({
title: "" + res.data.msg,
icon: 'none'
});
return;
}
}
// 将结果抛出
resolve(res.data)
},
//请求失败
fail: (e) => {
uni.showToast({
title: "" + e.data.msg,
icon: 'none'
});
reject(e.data);
},
//请求完成
complete() {
//隐藏加载
if (!hideLoading) {
uni.hideLoading();
}
// resolve();
return;
}
})
})
}
3.3 实现index.vue文件代码
以下的代码需要引入接口文档:https://www.showdoc.com.cn/128719739414963/2516997897914014
3.3.1 实现index.vue文件中的 template 代码
<template>
<view>
<!-- 搜索框 -->
<jsq-header></jsq-header>
<!-- 轮播 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3500" :duration="1000" :circular="true">
<swiper-item v-for="(item, i) in swiperList" :key="i">
<view class="swiper-item">
<image :src="item.image_src"></image>
</view>
</swiper-item>
</swiper>
<!-- 导航 -->
<view class="nav-list">
<view class="nav-item" v-for="(item,i) in navList" :key='i'>
<image :src="item.image_src" class="nav-img"></image>
</view>
</view>
<!-- 楼层 -->
<view class="index-floor">
<view class="floor-group" v-for="(item,index) in floorList" :key='index'>
<view class="floor-title">
<image mode="widthFix" :src="item.floor_title.image_src"></image>
</view>
<view class="floor-list">
<view class="image-box" v-for="(item2,index2) in item.product_list" :key='index2'>
<image mode="scaleToFill" :src="item2.image_src"></image>
</view>
</view>
</view>
</view>
<view class="box">
</view>
</view>
</template>
3.3.2 实现index.vue文件中的 script 代码
<script>
export default {
data() {
//返回方法
return {
swiperList: [],
navList: [],
floorList: []
}
},
//遍历方法
onLoad() {
this.getSwiperList()
this.getNavList()
this.getFloorList()
},
//以下写的是对应方法
methods: {
//轮播
async getSwiperList(){
const res = await this.$Https({
url: '/home/swiperdata'
});
console.log(res);
this.swiperList = res.message;
},
//导航
async getNavList(){
const res = await this.$Https({
url: '/home/catitems'
});
console.log(res);
this.navList = res.message;
},
//楼层F
async getFloorList(){
const res = await this.$Https({
url: '/home/floordata'
});
console.log(res);
this.floorList = res.message;
}
}
}
</script>
3.3.2.1 引用接口
在 script 中的 methods方法域中的 url 应用了接口文件
3.3.3 实现index.vue文件中的 scss 代码
<style lang="scss">
page {
padding-top: 90rpx;
}
swiper {
height: 350rpx;
.swiper-item,
image {
width: 100%;
height: 100%;
}
}
.nav-list {
display: flex;
justify-content: space-around;
margin: 15px 0;
}
.nav-img {
width: 80px;
height: 80px;
}
.index-floor{
width: 750rpx;
.floor-title{
image{
width: 100%;
}
}
.floor-list{
padding:15rpx;
.image-box{
//(750rpx-15rpx-15rpx)/3=720/3=240rpx
width: 240rpx;
height: calc(240rpx * 386 / 232);
float: left;
&:nth-last-child(-n+4){
height: calc(240rpx * 386 / 232 / 2);
border-left: 10rpx solid #ffffff;
}
&:nth-child(2),&:nth-child(3){
border-bottom: 5rpx solid #ffffff;
}
&:nth-child(4),&:nth-child(5){
border-top: 5rpx solid #ffffff;
}
image{
width: 100%;
height: 100%;
}
}
}
}
.box{height: 200rpx;}
</style>
5. 总结
以上代码只是项目中的首页实现代码，其中还有分类页面、购物车页面、我的页面。其中的接口文档是参考了黑马优购的接口，其余的代码我没有详细的介绍只截取了首页的代码。
仅供参考
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)