UniApp小项目：黑马商城

声明：这个项目来自黑马，写这篇博客是为了记录一下自己学习这个项目的过程

项目所有内容链接
提取码：eubz

项目视频在线教程

完成Tabbar的配置

tabbar文档

1、创建购物车、会员、资讯、主页的页面
2、创建tabbar

首页轮播图

搭建本地接口
视频教程

配置好之后，每次查看项目都需要开启服务，
通过cmd进入heima_shop_server目录中，运行node ./src/app.js

在浏览器里输入http://localhost:8082/api/getlunbo ，如果可以获取到数据那么就成功了

注：
1、我这里是安装了一个插件，对数据进行了格式化
2、成功后cmd不要关闭，关闭后服务器会停止

获取轮播数据

在声明函数onload里发送请求，获取数据
使用uni.request(OBJECT)发起请求
api文档

1、如果请求失败应该给与一个交互反馈，使用uni.showToast(OBJECT)，api文档
2、对数据请求方法进行封装，使其具有普通性
api.js

const BASE_URL = "http://localhost:8082"

export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET', //为了兼容必须是大写
			data: options.data || {},
			success: (res) => {
				if (res.data.status !== 0) {
					return uni.showToast({
						title: "数据请求失败！"
					})
				}
				resolve(res)
			},
			fail: (err) => {
				uni.showToast({
					title: "请求接口失败！"
				})
				reject(err)
			}
		})
	})
}

为了能够在整个项目中使用，在main.js中引入，并挂载到vue原型中

import {myRequest} from './utils/api.js'

Vue.prototype.$myRequest = myRequest  

使用：

methods: {
	//获取轮播图的数据
	async getSwipers() {
		const res = await this.$myRequest({
			url: '/api/getlunbo'
		});
		console.log(res);
	}
}

渲染轮播数据
使用swiper组件进行渲染
这里关于图片的宽度，采用rpx设置，如果要占满整屏就是750rpx
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
具体怎么用不太懂

导航区域

引入字体文件和样式文件，并在app.vue中引入使其成为全局样式

设计图标和文字

商品推荐标题

推荐商品列表：

• 实现基本的布局
• 渲染数据

实现导航的点击跳转：

• 我的超市
  • 将数据提取到一个对象数组中，通过循环渲染，是为了实现编程式跳转

{
   icon: 'iconfont icon-ziyuan',
   title: '我的超市',
   path: '/pages/goods/goods'
},

我的超市

这里的页面与推荐热门商品功能一致，因此将热门商品封装成一个组件，实现复用

• 组件内部通过props属性实现父子传参
• export default { props:['goodsList'] };

获取商品数据

onReachBottom
使用该函数，监听页面是否滑到底部，若滑倒底部则加载下一页的数据
要点： 请求下一页数据时，之前的数据要保留，不能够替换

onReachBottom() {
	console.log("触底,pageindex：",this.pageindex)
	this.pageindex++;
	this.getHotGoods()
}
,
methods: {
	//获取热门商品列表
	async getHotGoods() {
		const res = await this.$myRequest({
			url: '/api/getgoods?pageindex=' + this.pageindex
		});
		//console.log(res);
		this.goodsList = [...this.goodsList,...res.data.message];
	}
},

改进：pageindex不应该一种加1，当数据加载完后，pageindex停止加1，并给出数据已经获取完的提示

onReachBottom() {
	if (this.goodsList.length < this.pageindex * 10) return (this.flog = true);
	//console.log('触底,pageindex：', this.pageindex);
	this.pageindex++;
	this.getHotGoods();
},

开启下拉刷新
下拉刷新后再次显示第一页数据，情况数组，将pageindex设置为1.再重新获取数据，重新获取数据时加一个延迟效果
当获取数据成功后，取消下拉刷新的效果

//获取热门商品列表
async getHotGoods(callback) {
	const res = await this.$myRequest({
		url: '/api/getgoods?pageindex=' + this.pageindex
	});
	//console.log(res);
	this.goodsList = [...this.goodsList, ...res.data.message];
	callback && callback()
}

onLoad() {
	this.getHotGoods();
},
onReachBottom() {
	if (this.goodsList.length < this.pageindex * 10) return (this.flog = true);
	//console.log('触底,pageindex：', this.pageindex);
	this.pageindex++;
	this.getHotGoods();
},
onPullDownRefresh() {
	this.pageindex = 1;
	this.goodsList = [];
	this.flog = false;
	setTimeout(() => {
		this.getHotGoods(()=>{
			uni.stopPullDownRefresh()
		});
	}, 1000);
},

联系我们

联系我们图片
联系我们和基本信息，电话点击要可以拨打
地图，这里使用地图组件
拨打电话：设备拨打电话

社区图片

结构：左侧是滚动菜单，右侧是对应的内容
左侧菜单使用scroll-view
注：

• 这里如果要站一整屏，需要先给page设置
• 左侧滚动区域要想正常滚动，要设置固定高度，不然整个页面都会滚动

获取左侧分类数据

选择高亮效果：

• 通过比较索引是否相等，相等设置高亮效果，.索引默认为0
• 添加点击事件，通过点击来修改默认索引

获取右侧数据
当点击左侧分类项时，除了修改对应的高亮，还要获取右侧对应的数据

设置右侧内容区域，也要可以滑动
优化：

• 第一次进入时因该也获取数据，而不是点击时才获取数据
• 如果对应内容没有数据则展示暂无数据
• 实现图片预览效果，点击图片可以实现预览（使用api图片中的图片预览函数）

学习视频

因为没有数据这个不做

资讯

实现页面的基本布局

获取数据然后渲染

将资讯数据封装成一个组件

定义过滤器来格式化时间，过滤器定义为全局方便以后使用

点击资讯可以进入资讯详情页面（难点）
利用父子组件传参，除了调用父组件的函数，还要将id传过去

资讯详情页面：

• 实现基本结构
• 根据id获取相应的数据
• 渲染数据
• 获取url中的id是通过onLoad函数
• 内容部分中含有html标签，可以通过富文本进行解析；也可以使用v-html进行解析

商品详情页

在index.vue中定义商品详情页跳转的函数

同样使用父子组件传参，来调用方法

在index.vue中的goGoodsDetail函数接收id，将其拼接到详情页的url中

注：在商品列表页也要注册相应的函数来获取id

在商品详情页的onLoad方法中获取id，并根据id请求对应的商品详情信息

实现商品详情页顶部轮播图：

• 获取数据
• 渲染数据

实现商品价格和名称：

• 实现基本结构
• 渲染数据

注：商品信息是一段HTML，要使用uni的富文本或v-html解析；要修改图片的样式，在商品详情页如果不行，就在app.vue中设置

商品页的商品导航菜单，这里使用uni的商品导航组件

打包与发布

小程序打包发布
要在manifest.json进行微信小程序的相关配置

在微信公众平台进行注册申请：传送门

哎，以前的账号被冻结了，找回了不容易啊

登录你的账号后点击开发，然后在点击开发设置，复制你的小程序id，填写到之前那个微信小程序配置的位置

填写完成后，重新编译小程序，就可以上传了

注意：
1、上传时要修改你的接口地址（如果你的接口地址在本地，就是以localhsot开头），使用你的服务器域名

2、打包上传时，你的字体文件等不会上传，要使用线上的相关文件
例如：

要把地址修改为线上地址，然后再重新编译小程序，再次提交

3、在微信小程序官方平台你就可以看见自己上传的小程序了

h5打包

要在manifest.json进行H5的相关配置

填完配置后，选择发行菜单，选择h5

安卓打包
跟前面一样，先进行相关配置

这些内容都需要配置，发行时选择原生app。打包完成后会返回一个下载地址
可以将链接生成一个二维码
在线二维码生成