2022-01-23 微信小程序-萌宠大作战项目(四) 发布页面publish的制作

一.效果

(从首页选项卡点击"发布"跳转到此页)

二.知识点

1.wx.chooseLocation():打开地图选择位置。

作用:可以选择当前位置附近的所有地址
官网位置:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html
效果:

2.radio-group:单向选择器,内部由多个radio组成

https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html

        <radio-group bindchange="handlechange">
            <label>
                <radio class="radio" value="buy" checked="true">
                   <text>求购</text>
                </radio>
                <radio class="radio" value="sell"  >
                   <text>转让</text>
                </radio>
            </label>
        </radio-group>

3.staticData:小程序静态数据

staticData是小程序独有的静态数据,是非双向绑定的 ==>相对于data和this.setData()之间的双向数据绑定而言

4.复习:使用Object.assign()进行对象合并

如果有重复,则覆盖:

5.wx.showToast():显示消息提示框

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
示例:

      wx.showToast({
   //显示消息提示框
        title: '请选择正确的地址',//提示的内容
        icon: 'loading',//图标:success,error,loading,none
        duration: 2000//提示的延迟时间
      })

结果:

6.复习:数组includes()方法

var bool=arr.includes(num);//true或者false
示例:console.log([1,2,3].includes(4));//false

三.前台逻辑

1.整合数据的目的是让数据跟index2.js中的data的结构保持一致

index2.js中的data:

 data: {
   
    markers:[
      {
    
        title:'title',
        id:1,
        latitude:31.40527,
        longitude:121.48941,
        width:40,
        height:40,
        iconPath:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2430830321,3713499049&fm=26&gp=0.jpg'
      },
       
    ]
  },

在publish.js中整合好格式相同的data出来:

    // 整合数据
    const data = Object.assign({
   },this.staticData,{
   
      address:this.data.address
    })
    var img = {
   
      "泰迪":"https://ftp.bmp.ovh/imgs/2021/03/eb38c617c75821ae.jpg",
      "哈士奇":'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2667224596,2219050978&fm=26&gp=0.jpg'
    }
    data.iconPath = img[this.staticData.dogtype]
    data.width='40'
    data.height='40'
    console.log('data',data)

四.后台逻辑

1.数据库

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:/