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

首先打开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 = nullvar 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 () {}
})

搜索界面

此部分尚未完成

微信小程序-简单出售商品示例相关推荐

小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...
微信小程序简单好看的表格器
微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序简单的信息表格的提交到数据库(新手篇)(云端数据库)
微信小程序简单的信息表格的提交到数据库(新手专属)(云端数据库) 大家好,我是小陈,一名大一的编码爱好者,,,,,刚刚结束了大一的学习生活,也总结出了一点编码的经验,希望与大家一起分享.我是学习物联网 ...
微信小程序--简单页面跳转
微信小程序--简单页面跳转例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...
【微信小程序系列】微信小程序简单的实现发送订阅信息
[微信小程序系列]微信小程序简单的实现发送订阅信息项目结构两个云函数一个页面获取模板注:详细内容中的参数很重要,一会要在云函数里用代码 app.js // app.js App({onLau ...
Python爬虫系列之爬取某优选微信小程序全国店铺商品数据
Python爬虫系列之爬取某优选微信小程序全国商品数据小程序爬虫接单.app爬虫接单.网页爬虫接单.接口定制.网站开发.小程序开发 > 点击这里联系我们 < 微信请扫描下方二维码代码仅 ...
微信小程序实现条件查询示例
微信小程序实现条件查询示例 index.js //index.js //获取应用实例 const app = getApp() const db = wx.cloud.database(); cons ...
微信小程序简单日历组件
微信小程序简单的日历组件代码:  <view class='cld'><view class="cld-top">< ...

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

微信小程序-简单出售商品示例相关推荐

最新文章

热门文章