# 泡泡家宠物店小程序

**Repository Path**: ht-huyage/Experience-Hall

## Basic Information

- **Project Name**: 泡泡家宠物店小程序
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-08-30
- **Last Updated**: 2023-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 泡泡家宠物店小程序
 
#### 项目名称：泡泡家宠物店

##### 名称来源：
泡泡家宠物店是一家宠物体验馆，本次课程设计是为其设计一个同城线上购置宠物用品的小程序。

##### 框架图
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20210707193311.png"/>

##### 流程图
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20210707193257.png"/>


#### 问题表述
现如今养萌宠的铲屎官越来越多，其中包括有许多忙碌的上班族和家离泡泡家宠物店线下店较远的铲屎官，购买萌宠的消耗品就成了他们苦恼已久的问题，所以我们想要制作一个泡泡家宠物店的线上同城配送小程序，为本地的铲屎官们提供消耗品定时定点送上门的服务。同城配送可预约时间也可以选择立即送达。

##### 用户画像
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%9B%BE%E7%89%873.png"/>


##### 用户使用场景
1、a女士家的猫粮没有了，可是还有许多工作没做，于是打开泡泡家宠物店小程序，下单了猫粮和猫砂，等待送货上门
2、b男士家的狗粮快没有了，于是在上班的他打开泡泡家宠物店，下单了狗粮，并备注了晚上八点后配送。

##### 任务
用户：泡泡家宠物店小程序主要用户为工作繁忙的铲屎官<br>
任务:希望成为绝大多数同城工作繁忙的铲屎官的一个新的购买宠物用品的渠道，解决宠物用品临时短缺的问题<br>

##### 痛点
用户的痛点是无法抽出时间到线下店购买，同时希望可以购买的之前一直信赖的产品。

##### 价值主张画布
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%9B%BE%E7%89%874.png"/><br>

##### 原型设计
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E6%9C%AA%E6%A0%87%E9%A2%98-1.png"/><br>
##### 高保真效果图
<img src="https://gitee.com/niehongyu/markdown1/blob/master/5.jpg"/><br>
##### 用户旅程地图
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%9B%BE%E7%89%876.png"/><br><br>

##### 版本信息
版本号：1.0 <br>
修订日期：2021/6/15 <br>
修订人：郑钰妮 聂洪钰<br>
修改内容：建立了期末项目，tabBar底部标签栏，以及在pages中添加了 "pages/detail/detail", "pages/index/index", "pages/mine/mine","pages/search/search"，"pages/car/car"等文件和添加相应的样式 <br>
	
版本号：1.1<br>
修订日期：2021/6/16 <br>
修订人：郑钰妮 聂洪钰 <br>
修改内容：创建云端函数，并添加了有关good_all，typelist，swiper的数据<br>

版本号：1.2<br>
修订日期：2021/6/18<br>
修订人：郑钰妮 聂洪钰<br>
修改内容：给所有页面添加点击事件并跳转到相应的页面，寻找相应的图片，并上传到七牛云中创建链接。<br>

版本号：1.3<br>
修订日期：2021/6/20<br>
修订人：郑钰妮 聂洪钰 <br>
修改内容：对mine页面进行布局，修改样式。<br>

版本号：1.4<br>
修订日期：2021/6/22<br>
修订人：郑钰妮 聂洪钰 <br>
修改内容：对discover页面进行布局，并引用天气API，修改样式。<br>

版本号：1.5<br>
修订日期：2021/6/25<br>
修订人：郑钰妮 聂洪钰<br>
修改内容：对各个页面的js进行编写，实现不同效果<br>

版本号：1.6<br>
修订日期：2021/7/2 <br>
修订人：郑钰妮 聂洪钰<br>
修改内容：对整个app中的样式进行按照统一风格修改，以及文字样式大小进行了相应的调整。 <br><br>

#### 解决方案表述
一、定主题 2021年6月15日-6月17日，我们组讨论决定制作“电商”方面的项目开发，因为电商的小程序可以应用多种开发技术，并且有一定的市场需求。对于养宠物的铲屎官们，宠物用品是生活中必不可少的物品。但是也有不少铲屎官还有一个身份，就是996的上班族，当宠物用品用完之后无法及时到线下商店购买，因此我们决定做同城配送电商类的小程序开发项目，根据用户需求分析并开发。 <br>
二、制作低保真模型 2021年6月18日-6月21日，我们通过对已上线的电商相关APP及小程序、UI设计稿进行参考和归纳，借鉴其优势，结合自身产品的特点进行修改和创新，制作出泡泡家宠物店的低保真模型，根据低保真模型开发。<br>
三、写代码 2021年6月15日-7月2日，我们根据自身所学知识以及网上共享的小程序案例写代码，尽量实现低保真模型拥有的功能，开发出了泡泡家宠物店同城配送电商小程序。<br>
四、完善 2021年6月28日-7月2日，综合整体项目所有资料和技术实现能力，将项目进行进一步修改和完善。 <br><br>
小程序开发的基础知识：<br>
本项目主要使用了<br>
1.微信小程序开发的组件，包括使用其中“视图容器”中的scroll-view、swiper、swiper-item、block、view;“基础内容”中的icon、text、image;表单组件中的button、radio;“导航”中的navigator<br>
2.API<br>
3.云开发，其中用了云数据库<br><br>
#### 编程功能的基本描述
 编程功能的基本描述，此项目具体实践的思路及方法：<br>
1、定主题，选择能最大程度运用微信小程序开发知识的开发主题——电商<br>
2、确定开发方向，确定制作泡泡家宠物店的电商小程序，可供用户在线购买和同城配送<br>
3、制作低保真模型，通过借鉴其他电商APP和小程序界面设计样式，在xiaopiu及 Adobe ai上制作低保真模型。 <br>
4、写代码，在微信开发者工具上进行项目制作，借鉴微信开放文档等代码共享平台的内容，开发自己的小程序。<br>
5、优化项目，解决bug。<br><br>
#### 云端项目部署的基本描述
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%9B%BE%E7%89%877.png"/><br>
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%9B%BE%E7%89%878.png"/><br>
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%9B%BE%E7%89%879.png"/><br>
<img src="https://gitee.com/niehongyu/markdown1/raw/master/%E5%9B%BE%E7%89%8710.png"/><br><br>

#### 学习/实践心得总结及感谢
在本学期的课程中学习到了如何开发小程序，并且通过作业不断练习，在合作的期末项目中进一步体会到一个程序的开发是需要从一个创意想法，到服务设计、UI设计，再到小程序编程，这些都是必经过程，在这个过程中我和组员也遇到了一些解决不了的问题，但通过多次修改，最终也实现了泡泡家宠物店这一同城配送小程序。我们一边学习，一边探索，一边创造，这个过程虽然有些辛苦，却使我们收获了许多应用技能和处理事件的方法。<br>
感谢以下网站开发人员为我们提供的关键代码、数据、项目，在此我们附上相关URL<br>
markdown语法：https://markdown.com.cn/basic-syntax/images.html<br>
天气API：https://dev.qweather.com/docs/api/<br>
获取用户信息：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html<br>