基本信息
文件名称:宠物饲养平台小程序.pdf
文件大小:344.42 KB
总页数:11 页
更新时间:2025-10-26
总字数:约6.61千字
文档摘要

宠物服务平台小程序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