Loading... 数据库课程设计,不知道怎么的就头铁选了小程序来做前端页面(前端0经验选手),于是踩了很多坑……不过多看看别人的代码画葫芦也就能学会了,果然在实践中面向需求学习的效果还是很好的,至少现在的我已经能徒手造想要的样式的轮子了(误 `<div class="tip inlineBlock info"> 写这篇博客记录一下过程中的一些想法和学到的东西。没提到的页面都在源码里。 **源码**:[https://github.com/irimsky/wechat-houses-rent](https://github.com/irimsky/wechat-houses-rent) </div>` <br> <br> # 预览 **主要功能**:找房、约看房、发布新房、租房、看帖、发贴 先放点预览图: <div class='album_block'> [album type="photos"] ![](https://img-blog.csdnimg.cn/20200515192319135.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=500&vhei=1072) ![](https://img-blog.csdnimg.cn/2020051519231998.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=500&vhei=1072) ![](https://img-blog.csdnimg.cn/2020051519231948.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=500&vhei=1072) ![](https://img-blog.csdnimg.cn/202005151923197.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=500&vhei=1072) ![](https://img-blog.csdnimg.cn/20200515192318615.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=500&vhei=1072) ![](https://img-blog.csdnimg.cn/20200515192318321.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=469&vhei=781) [/album] </div> <br> # 全局设置 ```json // app.json { "pages": [ "pages/home/home", "pages/Login/Login", ... //此处省略 ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", //顶部navigationBar设置 "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "Irimsky", "navigationBarTextStyle": "black" }, "tabBar": { //底部tabBar设置 "selectedColor": "#d81e06", "borderStyle": "white", "list": [ { "pagePath": "pages/home/home", "text": "找房", "iconPath": "images/tab/me_unselect.png", "selectedIconPath": "images/tab/me_select.png" }, { "pagePath": "pages/post/post", "text": "看贴", "iconPath": "images/tab/home_unselect.png", "selectedIconPath": "images/tab/home_select.png" }, { "pagePath": "pages/me/me", "text": "我的", "iconPath": "images/tab/me_unselect2.png", "selectedIconPath": "images/tab/me_select3.png" } ] }, "sitemapLocation": "sitemap.json" } ``` ```css /**app.wxss**/ .container { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } ``` # 主页 ![](https://img-blog.csdnimg.cn/20200515120309686.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=500&vhei=1072) ## 搜索栏 和 条件筛选栏 首先要在页面顶部添加**搜索栏**和**条件筛选栏**,样式借用的是别人的demo: ```html <!-- wxml 搜索栏和筛选栏 --> <view> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <!-- 搜索框 --> <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" placeholder="请输入房屋名称或房型关键词" bindinput="searchInput" /> </view> </view> <!-- 搜索按钮,调用搜索查询方法 --> <view class="weui-search-bar__cancel-btn" bindtap='searchClick'>搜索</view> </view> </view> ``` ```css /*wxss 搜索栏和筛选栏 */ .weui-search-bar { position: relative; padding: 8px 10px; display: -webkit-box; display: -webkit-flex; display: flex; box-sizing: border-box; background-color: #EFEFF4; border-top: 1rpx solid #D7D6DC; border-bottom: 1rpx solid #D7D6DC; } .weui-elect-bar { position: relative; padding: 6px 6px; height: 30px; display: flex; flex-direction: row; align-items: center; box-sizing: border-box; background-color: #EFEFF4; border-top: 1rpx solid #D7D6DC; border-bottom: 1rpx solid #D7D6DC; } .weui-icon-search_in-box { position: absolute; left: 10px; top: 7px; } .weui-search-bar__form { position: relative; -webkit-box-flex: 1; -webkit-flex: auto; flex: auto; border-radius: 5px; background: #FFFFFF; border: 1rpx solid #E6E6EA; } .weui-search-bar__box { position: relative; padding-left: 30px; padding-right: 30px; width: 100%; box-sizing: border-box; z-index: 1; } .weui-search-bar__input { height: 28px; line-height: 28px; font-size: 14px; } .weui-search-bar__cancel-btn { margin-left: 10px; line-height: 28px; color: #09BB07; white-space: nowrap; } .elect-bar-inner { width: 50%; align-items: center; display: flex; flex-direction: row; } ``` ## 筛选已出租 筛选条件中的“显示已出租”可以不必再向后台服务器发送一次请求,只需要在wx:if中判断当前item的状态即可:若勾选“显示已出租”就不判断,全部显示;若没有勾选,则不显示 状态为“已出租”的房屋。 ```html <block wx:for='{{houses}}' wx:key="item"> <block wx:if="{{item.status=='待租' || showRent==1 }}"> <!-- showRent=1表示勾选 --> <!-- 内容省略 --> </block> </block> ``` <br> ## 分割线 分割线可以用一个**很扁的方块**来代替 ```css .container-line { width: 100%; height: 1px; background-color: #ccc; } ``` ## 标签气泡 ![](https://img-blog.csdnimg.cn/20200514181913906.png#pic_center#vwid=274&vhei=62) 这个是我自己造的第一个轮子(骄傲一下),留到房屋详细页面再讲 <br> ## 固定位置的按钮 以房主身份登录的时候,主页右下角固定位置会显示一个圆形加号按钮,点击进入登记新房页面 ![](https://img-blog.csdnimg.cn/20200514190748142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#pic_center#vwid=1078&vhei=412) - 要使这个按钮固定在页面的指定位置,不随页面的滚动而移动,则可以把wxss中的postion设置为:`postion: fixed` - 为了让这个按钮具有立体感,可以用`box-shadow`在其右下两个方向上添加阴影 - 设置`text-align: center`让加号水平居中;让`line-height` 与 按钮高度相等,使加号垂直居中 - `border-radius`是让边框变为圆角的幅度,可以将其值设为较大的值从而形成圆形 ```css .add-button { position: fixed; left: 83%; top: 91%; border: 0 solid #ffffff; text-align: center; width: 75rpx; height: 75rpx; line-height: 75rpx; padding: 0px; font-size: 23px; border-radius: 250rpx; box-shadow: 1rpx 1rpx 2rpx 2rpx rgba(28, 4, 51, 0.371); } ``` ## 分段加载 数据库中有1w+的房屋数据,如果一次性加载出来会需要很长时间,所以要分段加载,一次只加载20个。当拖动页面到底部的时候继续加载。 ```js // js 加载新数据 /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { var temp = that.data.houses // 获取后面二十条 wx.showLoading({ title: '加载中', }) var url = ... wx.request({ url: url, success(res) { if (res.data.length == 0) { // 没有新数据 wx.showToast({ title: '没有更多数据了', }) } else { var arr = res.data // 处理细节省略 } var hs = temp.concat(arr) // 将获取的新数据拼接到原列表上 that.setData({ // 更新渲染页面 houses: hs, itemcnt: that.data.itemcnt + 20 }) wx.hideLoading({}) } } }) }, ``` <br> <br> # 房屋详细页面 ![](https://img-blog.csdnimg.cn/20200515120251844.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=500&vhei=1072) ## 房型标签气泡 ![](https://img-blog.csdnimg.cn/20200515130743882.png#vwid=437&vhei=94) 网上找了很多没有找到现成的样式,所以只能自己写一个。 - 最初的想法是 一个气泡一个text,然后每个text间用空格隔开,每个text的背景用蓝色。 但是这样的问题是空格的背景也是蓝色的,所有的标签都连起来了。 - 想到给text标签添加margin间隔,又出现了新的问题:每行最后一个标签如果不够一行,部分文字会自动换行到第二行,标签就会分成两部分。 - 之所以出现这种情况是因为text元素就是文本,单个文字为一个单元,所以会换行。我就想到在text外部再框上一个view,这样就让单个view为一个单元,避免了上述情况。 ```html <view class="tagView"> <view wx:for="{{type}}" class="brView"> <text class="tagText">{{item}}</text> </view> </view> ``` ```css .brView{ margin-top: 10px; } .tagText{ width: auto; height: 50rpx; background-color: #f0f4f8; color: #6682ae; font-size: 13px; padding: 4px 10px; margin: 8px 10px 0px 0px; border-radius: 5px; } .tagView{ display: flex; flex-direction: row; flex-wrap: wrap; width:92%; margin-bottom: 30px; } ``` <br> ## 手搓tabBar ![](https://img-blog.csdnimg.cn/20200515171618240.png#vwid=472&vhei=100) 微信小程序的系统只能提供一个tabBar,其他页面的tabBar只能自己手动写一个。 ```css .tabbar{ position: fixed; background-color: white; width: 100%; height: 120.06rpx; bottom: 0; left: 0; } ``` ```html <view class="longer-line"></view> <view class="tabbar"> <view wx:if="{{user_phone==hphone && user_ident=='host'}}" class="btnView"> ... </view> <view wx:else class="btnView"> ... </view> </view> ``` <br> <br> - 为了不让这个tabBar挡住页面最底部的东西,有一个技巧:**在页面最底部放一个透明的有体积的view** ```html <view class="transparent"></view> <view class="longer-line"></view> <view class="tabbar"> ... </view> ``` ```css .transparent{ width: 100%; height: 120rpx; } ``` ## 刷新之前打开的页面 房屋详细页面是通过navigate打开的,如果在这个页面删除了这个房屋,那么之前打开的主页则需要更新。这一操作可以通过`getCurrentPages()`来实现(这一操作在其他更新操作时也会用到) ```js function () { var pages = getCurrentPages() var prevPage = pages[pages.length - 2] // 获取上一页 prevPage.onLoad() wx.navigateBack({}) } ``` <br> <br> <br> # 发布新房页面 ![](https://img-blog.csdnimg.cn/20200515181548671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=469&vhei=781) ## 选择图片 ![](https://img-blog.csdnimg.cn/20200515181709387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=476&vhei=427) 选择图片 ——> 存入数组 ——> 渲染页面 —(数量达到上限)—> 隐藏添加图片按钮 ```js UploadImg: function () { var imgs = that.data.imgs wx.chooseImage({ count: 6 - imgs.length, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { let imgSrc = res.tempFilePaths imgs = imgs.concat(imgSrc) that.setData({ img_count: imgs.length, imgs: imgs }) } }) console.log(that.data.imgs) }, RemoveImg: function (event) { var position = event.currentTarget.dataset.index; this.data.imgs.splice(position, 1); // 渲染图片 this.setData({ imgs: this.data.imgs, img_count: this.data.img_count - 1 }) }, ``` ```html <block> <scroll-view class="image-group" scroll-x="true"> <view wx:for='{{imgs}}' wx:for-index='idx' wx:key="item"> <image src='{{item}}' class="img_upload" mode="aspectFill"> </image> <icon type='clear' bindtap='RemoveImg' data-index="{{idx}}" class="pos"></icon> </view> <image wx:if="{{img_count!=6}}" class="add_icon" mode="aspectFill" src="../../images/post-house/add-icon1.png" bindtap="UploadImg"></image> </scroll-view> </block> ``` <br> <br> ## 上传图片到阿里云OSS 微信小程序上传阿里云OSS: [参考博客](https://blog.csdn.net/qq_23375733/article/details/81417296) <br> <br> # “我的”页面 ![](https://img-blog.csdnimg.cn/20200515215709142.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=500&vhei=1072) ## 红点提醒 1. 微信官方提供了`wx.ShowTabBarRedDot()`方法在tabBar上显示红点。 2. 如果要在页面中显示红点需要自己手动写一个红点样式 ```css .redDot{ background-color: red; width: 7px; height: 7px; border-radius: 10px; position: relative; left: -180rpx; top: -4rpx; } ``` ![](https://img-blog.csdnimg.cn/2020051522494278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=471&vhei=302) <br> ## 单侧居左,另一侧居右 该页面每一项按钮都是左侧为图标与文字居左,右侧为一个小右箭头居右在同一个容器内只能有一种对齐方式。 可以在一个容器内放两个容器,一个左对齐,一个右对齐,各自的`width`占满整个大容器,如图所示 ![](https://img-blog.csdnimg.cn/2020051523202011.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lyaW1za3k=,size_16,color_FFFFFF,t_70#vwid=470&vhei=286) 最后修改:2021 年 08 月 01 日 09 : 35 PM © 允许规范转载
2 条评论
有没有后端的diam哈
没有了。而且当时为了完成课设的要求,用的还是sql server,服务器环境都是windows,所以体验感极差,不如自学搭一个简单的