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://qianfeng2012:654321AAAA@cluster0.ugafb.mongodb.net/test

2.后端的expressserver文件

文件位置:https://download.youkuaiyun.com/download/rowlet/86907823
VSCode中打开小程序项目文件夹下的token

3.在momgoDBcompress中连接上述数据库

五.代码

完整代码

pages/publish/publish.wxml

<!-- 一.未发布或发布未成功时显示: -->
<view wx:if="{{!success}}">
<!-- 1.我的地址 -->
  <view class="row">
    <label class="title" bindtap="handleAddressClick">我的地址</label>
    <view class="info" bindtap="handleAddressClick">
      {{address}}
    </view>
  </view>
  <!-- 2.求购or转让: -->
  <view class="row">
     <label class="title">类型</label>
     <view class="info">
        <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>
     </view>
  </view>
  <!-- 3.具体需求 -->
  <view class="row">
      <label class='title'>说明</label>
      <view class="info">
          <input class="info-input" bindinput="handleInputMsg" type="text" placeholder="请填写具体需求"/>
      </view>
  </view>
  <!-- 4.联系方式 -->
  <view class="row">
      <label class='title'>联系方式</label>
      <view class="info">
          <input class="info-input" bindinput="handleInputNum" type="text" placeholder="请填写正确电话号码"/>
      </view>
  </view>
  <!-- 5.犬类型 -->
  <view class="row">
      <label class='title'>犬类型</label>
      <view class="info">
          <input class="info-input" bindinput="dogtype" type="text" placeholder="请填写正确犬类学名"/>
      </view>
   <!-- 6.点击发布-->
  </view>
  <view bindtap="handlesubmit" class="submit-button">点击发布</view>
</view>

<!-- 二.发布成功后显示: -->
<view wx:if="{{success}}">
   <view class="congratulation"> 
        <icon type="success" size="25px" class="success-icon"></icon>
   </view>
   <button class="backhome-btn" bindtap="handleback">返回首页</button>
</view>

pages/publish/publish.js

结构:

,其中,点击发布时,开始校验:


代码

Page({
  //页面的初始数据
  data: {
    success:false,//默认未发布或发布未成功
    address:'请选择地址',//将用户选定的地址赋值给address
  },
  // 小程序独有的静态数据 非双向绑定 
  staticData:{
     latitude:'',
     longitude:'',
     type:'buy',
     message:'',
     contact:'',
     dogtype:''
  },
 //点击"我的地址"或者后面的文本框时触发
  handleAddressClick(){
    console.log('我来到了 选择地址API ')
    wx.chooseLocation({//此处要使用自己的开发者appid,个人定义的api...
       success:(res)=>{
          console.log('选择地址成功res',res)//打印出来后发现其name属性是存放地址名称的属性
          let {latitude,longitude} = res//把res.latitude和res.longitude解构赋值给两个变量
          this.setData({
            address:res.name//将用户选定的地址赋值给address
          })
          Object.assign(this.staticData,{
            latitude:latitude,
            longitude:longitude
          })
          console.log('staticdata',this.staticData)  
       }
    })
  },
  //点击切换求购/转让时触发
  handlechange(eve){
     console.log(eve)
     this.staticData.type = eve.detail.value   
  },
  //填写具体需求时触发 
  handleInputMsg(e){
    console.log(e)
    this.staticData.message = e.detail.value
  },
  // 填写手机号时触发 
  handleInputNum(e) {
    this.staticData.contact = e.detail.value
  },
  // 填写正确犬类型时触发 
  dogtype(e) {
    this.staticData.dogtype = e.detail.value
  },

  // 6.点击发布:开始校验我的地址,具体需求,联系方式,犬类型  
  handlesubmit(){
     console.log('点击发布 ')
    //  1.校验我的地址 必须填写 
     if(!this.data.address || this.data.address == '请选择地址') {
      wx.showToast({
        title: '请选择正确的地址',
        icon: 'loading',
        duration: 2000
      })
      return 
     }

    //  3.校验具体需求 必须填写
    if(!this.staticData.message) {
      wx.showToast({
        title: '请写下你的需求',
        icon: 'loading',
        duration: 2000
      })
      return
    }

    // 4.校验联系方式
      if(!this.staticData.contact) {
        wx.showToast({
          title: '请写下phonenumber',
          icon: 'loading',
          duration: 2000
        })
        return
      }

      // 5.校验犬类型
      var dogsRightType = ['泰迪','哈士奇','金毛']
     var dogresult = dogsRightType.includes(this.staticData.dogtype)
     console.log('dogresult',dogresult)
     if(!this.staticData.dogtype) {
      wx.showToast({
        title: '请填写犬类型',
        icon: 'loading',
        duration: 2000
      })
      return 
     }
    //  填写错误会进来
     if(!dogresult) {
      wx.showToast({
        title: '请填正确狗类型',
        icon: 'loading',
        duration: 2000
      })
      return 
     }

    //  以下就是校验过后的正确情况了
    console.log('输入正确了')
    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)

    // 数据整合好了 需要存储到数据库 
    // 学习使用 小程序版本的axios 
    var this2 = this 
    wx.request({
      url: 'http://127.0.0.1:3003/addpet',
      method:'POST',
      header:{
        "Content-Type":"application/json"
      },
      data:{
        pet:data
      },
      success:function(res){
         console.log('res 添加宠物需求信息',res)
         this2.setData({
           success:true
         })
      },
      fail:function(){
        console.log('请求失败了')
      },
      // 无论成功失败 都会来到这里
      // 接口调用结束的回调函数（调用成功、失败都会执行）
      complete:function(){
        console.log('complete')
      }
    })
  },
  // 返回首页
  handleback() {
      wx.reLaunch ({
        url: '/pages/index2/index2',
      })
  }
});

pages/publish/publish.wxss

page {
  background: #eee;
}
.row {
  overflow: hidden;
  line-height: 50px;
  border-bottom: 1px  solid #ccc;
  background: #fff;
  color: #777;
}
.submit-button {
  margin: 10px 8px 0 8px;
  background: #ff9700;
  line-height: 38px;
  border-radius: 6px;
  text-align: center;
  color: #fff;
}
.title {
  padding-left: 10px;
  width: 90px;
  float: left;
}
.info-input {
  height: 50px;
}
.success {
  background: #fff;
  padding: 20px;
}
.congratulation {
  text-align: center;
  line-height: 100px;
  font-size: 16px;
}
.success-icon {
  position: relative;
  top: 6px;
  margin-right: 10px;
}
.backhome-btn {
  margin: 0 10px;
}

结果

发布前:

发布后