宠物服务平台小程序V1.0
一、背景
随着宠物爱好者群体不断壮大,催生了
多样化的宠物服务需求。传统的宠物服务往
往分散在多个平台或线下门店,给宠物主人
带来了不便。因此,开发了集宠物饲养知识
分享、用品销售、社交互动、健康管理以及
服务预约等功能于一体的宠物服务平台,成
为解决这一问题的关键。(未经允许,不可挪作他用)
二、技术选型
1、开发语言:
Html5+Vue+Java+springboot+mysql
+nginx
2、开发工具
Idea+微信开发小工具+postman
三、功能点
1、通过获取设备的实时经纬度在地图中
显示并以小图标进行表示;(未经允许,不可挪作他
用)
mapid=maplongitude={{longitude}}latitude={{latitude}}
scale=14show-locationclass=map
controls={{controls}}bindcontroltap=controltab/map
onShow(){
获取起始位置坐标代码示例:
this.getLocation();
},
getLocation(){
wx.getLocation({
type:gcj02,
success:this.handleGetLocationSucc.bind(this)
})
},
handleGetLocationSucc(res){
this.setData({
longitude:res.longitude,
latitude:res.latitude
})
},
2、回到当前位置功能
在地图中浏览之后,想回到自己的起始位
置,通过点击左下的图标即可回到起始位
置;
controltab(){
this.mapCtx.moveToLocation();
},
3、分享功能
分享功能示例代码:
onShareAppMessage(res){
return{
title:萌宠饲养平台,
path:/pages/index/index
}
}
4、发布功能
4.1、页面布局代码:
!--logs.wxml--
view
viewclass=row
labelclass=title我的地址/label
viewclass=info点击选择,记得勾选哦~/view
/view
viewclass=row
labelclass=title类型/label
viewclass=info
radio-group
label
radiovalue=1checked=true/求助
radiovalue=2checked=false/商品
/label
/radio-group
/view
/view
viewclass=row
labelclass=title说明/label
viewclass=info
inputclass=info-inputplaceholder=填写您的具体要求/
/view
/view
viewclass=row
labelclass=title联系方式/label
viewclass=info
inputclass=info-inputplaceholder=填写您的联系地址/
/view
/view
view
buttonclass=submit-btn发布按钮/button
/view
/view
4.1.2、样式代码:
page{
background:#eee;
}
.row{
overflow:hidden;
line-height:100rpx;
border-bottom:2rpxsolid#ccc;
background:#fff;
color:#777;
}
.submit-btn{
margin:20rpx16rpx0rpx16rpx;
background:#ff9700;
border-radius:12rpx;
line-height:80rpx;
color:white;
}
.title{
padding-left:20rpx;
width:180rpx;
float:left;
color:#777;
}
.info-i