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

一.准备

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