用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2017-8-3 00:30

首先打开app.json修改如下{ "pages":, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#03bbd5", "navigationBarTitleText": "标题", "navigationBarTextStyle&q

首先打开app.json修改如下

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

  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#03bbd5",
    "navigationBarTitleText": "标题",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor":"#ccc"
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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

代码如下,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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

首先布局下方”发布”,”搜索”部分,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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

然后我们给地图打点,添加定位图标,以及可以回到原点的控件,需要再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
   })
}
})
  },
})


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: Co_zy 来自: csdn

相关阅读