一.准备

1.技术栈

核心技术栈

前端 微信小程序 wxss wxml js 以及自带的ui组件 还有外部npm包的ui组件

后端 mongodb express

2.用到的数据库

mongodb+srv://qwer1234:qwer1234@cluster0.1pttw.mongodb.net/aaa?retryWrites=true&w=majority
mongodb+srv://qwer1234:qwer1234@cluster0.1pttw.mongodb.net/test
mongodb+srv://qianfeng2012:654321AAAA@cluster0.ugafb.mongodb.net/qianfeng2012?retryWrites=true&w=majority
//  mongodb 可视化工具  官方罗盘使用的
mongodb+srv://qianfeng2012:654321AAAA@cluster0.ugafb.mongodb.net/test

3.项目思路和最终效果

项目思路

现在很多人都很喜欢宠物，但是都市生活很忙，很多无论商家还是个人转让 狗都没什么平台，然后小程序专门针对这一块业务！！

最终效果

二.配置文件,组件介绍和图片上传

0.配置app.json文件和app.wxss

(在项目里json文件不允许注释)

  "window": {"navigationBarBackgroundColor": "#426ab3",//背景色"navigationBarTextStyle": "white",//标题字体颜色"navigationBarTitleText": "宠物大作战",//标题文本"backgroundTextStyle": "light"//下拉框颜色},"permission": {"scope.userLocation": {//展示位置信息"desc": "你的位置信息将用于小程序位置接口的效果展示"}

app.wxss

page {height: 100%;
}

1.map组件学习

官网文档::https://developers.weixin.qq.com/miniprogram/dev/component/map.html
用到的map的属性:

scale:缩放级别(数字越小,视角越高)
markers:标记点,
show-location:显示带有方向的当前定位点

map#marker属性:标记点用于在地图上显示标记的位置

https://developers.weixin.qq.com/miniprogram/dev/component/map.html#marker

2.视图容器cover-image:覆盖在原生组件之上的图片视图

官网手册位置:https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

3.把需要用到的小图标上传到https://www.imgurl.org/vip/manage/upload

得到在线地址为:
需求分析.png:https://s3.bmp.ovh/imgs/2022/11/04/fde18c8d29f563a4.png
坐标,png:https://s3.bmp.ovh/imgs/2022/11/04/97fe92f1925e9f91.png

三.首页pages/index2/的制作

index2.wxml:使用map组件

<!-- scale:缩放级别,markers:标记点,show-location:显示带有方向的当前定位点 -->
<!-- 地图map区域 -->
<view class="map-wrap"><view class="map"><mapmarkers="{{markers}}"id='map2' class="map1" scale="15"show-location="{{true}}" ><cover-image bindtap="coverimgtap" class="coverimg" src="../../resource/坐标.png"></cover-image></map>
</view>
<!-- 底部选项卡区域 -->
<view class="nav"><view bindtap="fabu" class="fabu">发布</view><view  bindtap="sousuo" class="sousuo">搜索</view>
</view>
</view>

index2.js:设置marker的属性值

Page({/*** 页面的初始数据*/data: {markers:[{ title:'title',id:1,//经纬度latitude:xxxxx,longitude:xxxxx,width:40,height:40,                   //标记点用一个icon图标来表示(一只小狗)iconPath:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2430830321,3713499049&fm=26&gp=0.jpg'},    ]},/*******以下代码是后续内容,先不管*******/coverimgtap(){//坐标.png绑定的点击事件this.map.moveToLocation()},fabu(){console.log('fabu')// 跳转发布页面wx.navigateTo({url: '/pages/publish/publish',})},sousuo(){wx.navigateTo({url: '/pages/search/search',})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.getLocation({type:'wgs84',success(res){console.log('res wgs84',res)//  获取当前设备 的经纬度const latitude = res.latitudeconst longitude = res.longitude}})//  这个是 获取这个map2地图的上下文功能this.map = wx.createMapContext('map2' )this.map.moveToLocation()},/*** 生命周期函数--监听页面显示*/onShow: function () {var this2 = this wx.request({url: 'http://127.0.0.1:3003/petall',method:'POST',header:{"Content-Type":"application/json"},success:function(res){console.log('success')var arr = res.data console.log(res)for(var i = 0;i<arr.length;i++) {arr[i].id = i}this2.setData({markers:arr})}})}
})

index2.wxss

.map-wrap{height: 100%;display: flex;flex-direction: column;
}
.map {flex: 1;
}
#map2{width: 100%;height: 93vh;/* height: 100%; */
}
.coverimg {width: 100rpx;height: 100rpx;position: absolute;bottom: 50rpx;left: 30rpx;
}
.nav {height: 85rpx;background-color: pink;display: flex;}
.nav view {flex: 1;justify-content: center;
}
.fabu {background-color: aqua;line-height: 7vh;height: 7vh;color: aliceblue;align-items: center;text-align: center;
}
.sousuo {background-color: pink;align-items: center;line-height: 7vh;height: 7vh;color: aliceblue;text-align: center;
}

效果

2022-01-19 微信小程序-萌宠大作战项目(一) 项目思路和效果,map组件的介绍和使用,视图容器cover-image,首页的制作相关推荐

1. 推荐2022年有微信小程序毕业设计需求的70多个作品

   小程序是前端,下面几套是PHP后台,适合新手和零基础的,定制请联系QQ (01)微信小程序商城       [演示视频]       [源码+基础课套餐] (02)电影院订票选座小程序       [ ...

2. 01 【微信小程序起步】

   01 [微信小程序起步] 1.小程序简介 小程序与普通网页开发的区别 运行环境不同 网页运行在浏览器中 小程序运行在微信环境中 API不同 由于运行环境不同,所以小程序中无法调用DOM和BOM的API ...

3. 微信小程序期末大作业-天使童装商城

   微信小程序期末大作业-天使童装商城,导入即可使用,有轮播图,底部导航,各种童装标签,有首页,分类,优惠券,购物车,个人中心五个导航,适合初学者学习使用,如下图所示:(资源链接在末尾) 资源下载链接:h ...

4. 微信小程序期末大作业 记单词小程序 适合初学者学习使用

   微信小程序期末大作业 记单词小程序 小程序如下图所示:(下载链接在文末) 点我下载资源 https://download.csdn.net/download/weixin_43474701/59677 ...

5. 网易云易盾推出面向微信小程序的大数据反作弊产品

   近日,国内领先的业务风控服务网易云易盾对外推出面向微信小程序的大数据反作弊产品,源于网易20年的核心业务风控技术与全面稳健的策略模型,有机整合了设备指纹.IP画像.规则引擎等八大能力,可广泛应用电商营 ...

6. 微信小程序对接大华摄像头

   文章目录 微信小程序对接大华摄像头 1.在app.json中声明 2. 使用插件 3.使用自定义组件: 微信小程序对接大华摄像头 文档地址:https://open.imoulife.com/book ...

7. 微信小程序实现大转盘抽奖----踩坑之路

   微信小程序实现大转盘抽奖----踩坑之路 需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘 思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...

8. 微信小程序期末大作业-蔬菜商城

   微信小程序期末大作业-蔬菜商城 在这个小程序可以 购买各种蔬菜,有四个底部导航栏,轮播图,动态文字,首页,订单,个人中心,分类,购物车五个导航,时候初学者学习使用,如下图所示: 资源下载链接:http ...

9. 微信小程序期末大作业-精品优购商城

   微信小程序期末大作业-精品优购商城 导入即可运行,有轮播图,各种商品标签,底部导航栏,包含首页,分类,购物车,个人中心四个导航:如下图:(资源链接在末尾) 资源下载链接:https://downloa ...

最新文章

1. iPhone清理喇叭灰尘_手机喇叭孔灰尘清理
2. MyEclipse-7.5.0版注册码破解及激活操作
3. HashMap原理总结
4. 【David Silver强化学习公开课】-7：Policy Gradient
5. MySQL关闭查询缓存（QC）的两种方法
6. 是男人就过 8 题--Pony.AI 题 - A String Game
7. python习题_新手练习：Python练习题目
8. android学习笔记---58_拖拉功能与多点触摸，实现图片的拖拉和缩放功能
9. 相机姿态估计（五）--DLS
10. 移动Ad Hoc网络路由协议汇总
11. 火车头采集器用法说明
12. html分页自动加载数据,硕正控件默认会自动加载数据
13. Scratch打气球游戏 电子学会图形化编程scratch等级考试三级真题答案2019-9
14. Mac使用Python接入东方财富量化接口Choice，调试与获取数据
15. matlab多重积分如何使用方法,MATLAB在《高等数学》中的应用_多重积分
16. 人工神经网络的算法原理,神经网络算法的原理是
17. python用百度云接口实现身份证识别
18. Winform MDI窗体子窗体显示区域大小
19. 使用三丰云主机搭建青龙面板保姆级教程
20. 从老板进位“一超”、方太列席“多强”，看厨电市场的竞争关键

热门文章

1. lcd4linux 树莓派,树莓派B+运行kali并使用微雪3.5寸LCD电阻屏显示
2. SQL笔记（一）SQL语法、SELECT语句、DISTINCT语句、LIMIT、LIMIT和OFFSET组合使用、WHERE 子句
3. perl mysql dbi 安装_Perl中DBI、DBD::mysql模块的安装
4. 消防电源监控系统在春晓161#地块人防工程的设计与应用
5. 产品经理基础知识入门
6. ipic软件使用介绍
7. TMS320F28x的定时器
8. 一个C语言的基本教程—指针篇
9. linux查看Windows的ip命令,在windows系统和linux系统中查询IP地址命令的不同
10. 关于connection holder is null的个人解决方案实践