微信小程序-简单出售商品示例

首先打开app.json修改如下

{
  "pages":[
    "pages/index/index",
    "pages/search/search",
    "pages/publish/publish"

  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#03bbd5",
    "navigationBarTitleText": "标题",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor":"#ccc"
  }
}

布局第一个界面,如图所示

代码如下,index.wxml

<view>
    <view class="mapArea">
    <map 
    id="map" 
    longitude="{{longitude}}" 
    latitude="{{latitude}}" 
    scale="10" 
    controls="{{controls}}" 
    bindcontroltap="handleControlTap" 
    markers="{{markers}}" 
    bindmarkertap="markertap" 
    polyline="{{polyline}}" 
    bindregionchange="regionchange" 
    show-location 
    style="width: 100%; height: 100%;">

    </map>
    </view>

    <!-- <button bindtap="bindViewTap">tap</button> -->
    <view class="nav">
        <view class="publish"><navigator url="../publish/publish">发布</navigator></view>
        <view class="search">搜索</view>
    </view>
</view>

首先布局下方”发布”,”搜索”部分,index.wxss文件如下

.nav
{ 
  height: 42px;
  width: 100%;
  position: absolute;
  /* top: 100%; */
  bottom: 0px;
  display: flex;
  color: #fff;
}
.mapArea{
  /* height: 500px; */
  bottom: 42px;  
  width: 100%;
  top: 0px;
  left: 0px;
  right: 0px;
  position: absolute;
  /* background-color: black; */
}
.publish,.search{
  text-align: center;
  line-height: 42px;
  height: 42px;
  flex: 1; /*占用1/2,当改成2时,则占用2/3*/

}
/* 以下的内容可以整合到上方.publish,.search{}中 */
.publish
{
  background-color: #ff9700;
  /* width: 50%; */ 
  /* float: left;  当下方方块多了的时候就不好用了*/
}
.search
{
  text-align: center;
  line-height: 42px;
  /* width: 50%; */
  background-color: #03bbd5;
  height: 42px;
  /* float: right; */
  flex: 1;
}

然后我们给地图打点,添加定位图标,以及可以回到原点的控件,需要再index.js中
打点是采用ajax向后端获取数据,然后循环写入markers数组中,
定位图标,回到原点的控件这个需要获取屏幕的高度和宽度

Page({
  onReady:function(){
    this.mapContext = wx.createMapContext('map')
  },

  data: {
    markers: [],

    latitude:'',
    longitude:'',

    controls: [{
      id: 1,
      iconPath: 'center.png',
      position: {
        left: 10,
        top: wx.getSystemInfoSync().windowHeight-100,
        width: 30,
        height: 30
      },
      clickable: true
    },
    {
     id: 2,
      iconPath: 'pin.png',
      position: {
        left: wx.getSystemInfoSync().windowWidth/2-10,
        top: (wx.getSystemInfoSync().windowHeight-42)/2 - 30,
        width: 22,
        height: 31
      },
      clickable: true
      }
    ]
  },

  handleControlTap: function (e) {
    console.log(e.controlId)
    if (e.controlId ==1) {
      this.mapContext.moveToLocation()
    }
  },

  onLoad: function() {
    var that = this;  

    wx.getLocation({
      type:'gcj02',
      success:function(res){
        that.setData({
          longitude:res.longitude,
          latitude:res.latitude
        })
      }
    })


    var obj = null
    var markerss = [];

    wx.request({
  url: 'https://felixlu.duapp.com/index.php/trade/get_list', //仅为示例，并非真实的接口地址
  method:'GET',
  header: {
      'content-type': 'application/x-www-form-urlencoded' //告诉提交给后台的文件类型
  },
  success: function(res) {
    for (var i =0;i<res.data.data.length;i++){

     if(res.data.data[i].type == 'buy'){
    obj = {
      iconPath: "buy.png",
      id: res.data.data[i].id,
      latitude:res.data.data[i].latitude,
      longitude:res.data.data[i].longitude,
      width: 20,
      height: 20
    }
    markerss.push(obj)
  }else{
     obj = {
      iconPath: "test1.png",
      id: res.data.data[i].id,
      latitude:res.data.data[i].latitude,
      longitude:res.data.data[i].longitude,
      width: 20,
      height: 20
    }
    markerss.push(obj)

  }
  }
     that.setData({
     markers:markerss
   })
}
})
  },
})

第二个界面,如图

我们新建publish文件夹

<view class="wrap">
    <view class="form-area">
    <view class="label">我的地址</view>
    <view class="text" bindtap="handleChooseTap">{{addr}}</view>
    </view>

    <view class="form-area">
    <view class="label">类型</view>
    <view class="text">
    <radio-group bindchange="handleChangeType" class="radio-group" >
      <label class="radio">
      <!-- 点击后获取e.detail.value值buy -->
        <radio value="buy" />求购
      </label>
       <label class="radio">
        <radio value="sell"/>转让
      </label>
    </radio-group>
</view>
    </view>

    <view class="form-area">
    <view class="label">说明</view>
    <view class="text">
        <input bindinput="handleInputMessage" placeholder="请输入说明" />
    </view> 
    </view>

    <view class="form-area">
    <view class="label">联系方式</view>
    <view class="text">
    <view class="text">
        <input bindinput="handleInputContact"placeholder="请输入联系方式" />
    </view> 
    </view> 
    </view>

    <view class="button">
    <button class="btn" type="primary"
        bindtap="handleInputSubmit"> 发布信息 </button>
    </view>
</view>

publish.wxss

.form-area{
    height: 100rpx;
    width: 100%;
    border-bottom: 1px #ccc solid;/*如果是border则是双线,上下两个边框*/
    display: flex;
    font-size: 18px;
    color: #666;
    background-color: #FAF5F5;
}
.label,.text{
    line-height: 100rpx;
}
.label{
    padding-left: 10px; 
    width: 100px;

}
.text{
    flex: 1;

}

input
{   /* width: 300px;
    margin: 10px; */
    /* background: #ff9700; */
    /* text-align: center;
    line-height: 46px; */
    margin-top: 11px;
}
.btn{
    margin: 10px;
    text-align: center;
    line-height: 46px;
    color: ;
    font-size: ;

}

这个界面有几个关键操作,
1.利用微信给的组件选择位置后,第一行需要显示出来
2.发布商品后,需要再地图上打点
publish.js代码如下

// pages/publish/publish.js
Page({
  data: {
    addr:'点击选择,要勾选哦'
   },
   staticData:{
    type:'',
    message:'',
    contact:'',
    latitude:'',
    longitude:''
   },
  handleChooseTap: function(){
    var that = this;
    wx.chooseLocation({
    success: function(res){
      // console.log(that.data.address);返回点击选择,要勾选哦
      that.setData({
        addr: res.address  //替换addr
      })
      that.staticData.latitude = res.latitude;
      that.staticData.longitude = res.longitude;
    }
  })
 },
 handleChangeType: function(e){
  // console.log(e)
  this.staticData.type = e.detail.value
 },
 handleInputMessage: function(e){
  // console.log(e)
  this.staticData.message = e.detail.value
 },
 handleInputContact:function(e){
  this.staticData.contact = e.detail.value

 },
// 绑定按钮
   handleInputSubmit: function(){
    //这就是ajax
    // console.log(0)
    wx.request({
  url: 'https://felixlu.duapp.com/index.php/trade/add_item', //仅为示例，并非真实的接口地址
  method:'POST',
  data: {
     address: this.data.addr,
     latitude:this.staticData.latitude,
     longitude: this.staticData.longitude,
     message: this.staticData.message,
     contact: this.staticData.contact,
     type: this.staticData.type
  },
  header: {
      'content-type': 'application/x-www-form-urlencoded' //告诉提交给后台的文件类型
  },
  success: function(res) {
    // console.log(res.data)
    if (res.data.ret) {
      // console.log('success');
      wx.showToast({
        title: '发布成功',
        icon: 'success',
        duration: 2000
})
    }else{
      condole.log('fail');
    }
  }
})
    wx.navigateTo({
      url: '../index/index'
})
   },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {


  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

搜索界面

此部分尚未完成