文章目錄

數據庫課程設計，不知道怎麼的就頭鐵選了小程序來做前端頁面（前端0經驗選手），於是踩了很多坑……不過多看看別人的代碼畫葫蘆也就能學會了，果然在實踐中面向需求學習的效果還是很好的，至少現在的我已經能徒手造想要的樣式的輪子了（誤

寫這篇博客記錄一下過程中的一些想法和學到的東西。沒提到的頁面都在源碼裏。

源碼：https://github.com/irimsky/wechat-houses-rent

預覽

主要功能：找房、約看房、發佈新房、租房、看帖、發貼

先放點預覽圖：

全局設置

// 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"
}

/**app.wxss**/

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

主頁

搜索欄和條件篩選欄

首先要在頁面頂部添加搜索欄和條件篩選欄，樣式借用的是別人的demo：

<!-- 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>

/*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的狀態即可：若勾選“顯示已出租”就不判斷，全部顯示；若沒有勾選，則不顯示狀態爲“已出租”的房屋。

<block wx:for='{{houses}}' wx:key="item">
	<block wx:if="{{item.status=='待租' || showRent==1 }}">
	<!-- showRent=1表示勾選 -->
	<!-- 內容省略 -->
	</block>
</block>

分割線

分割線可以用一個很扁的方塊來代替

.container-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

標籤氣泡

這個是我自己造的第一個輪子（驕傲一下），留到房屋詳細頁面再講

固定位置的按鈕

以房主身份登錄的時候，主頁右下角固定位置會顯示一個圓形加號按鈕，點擊進入登記新房頁面

要使這個按鈕固定在頁面的指定位置，不隨頁面的滾動而移動，則可以把wxss中的postion設置爲：postion: fixed
爲了讓這個按鈕具有立體感，可以用box-shadow在其右下兩個方向上添加陰影
設置text-align: center讓加號水平居中；讓line-height 與按鈕高度相等，使加號垂直居中
border-radius是讓邊框變爲圓角的幅度，可以將其值設爲較大的值從而形成圓形

.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 加載新數據

/**
* 頁面上拉觸底事件的處理函數
*/
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({})
     }
   }
 })
},

房屋詳細頁面

房型標籤氣泡

網上找了很多沒有找到現成的樣式，所以只能自己寫一個。

最初的想法是一個氣泡一個text，然後每個text間用空格隔開，每個text的背景用藍色。
但是這樣的問題是空格的背景也是藍色的，所有的標籤都連起來了。
想到給text標籤添加margin間隔，又出現了新的問題：每行最後一個標籤如果不夠一行，部分文字會自動換行到第二行，標籤就會分成兩部分。
之所以出現這種情況是因爲text元素就是文本，單個文字爲一個單元，所以會換行。我就想到在text外部再框上一個view，這樣就讓單個view爲一個單元，避免了上述情況。

	<view class="tagView">
		<view wx:for="{{type}}" class="brView">
			<text class="tagText">{{item}}</text>
		</view>
	</view>

.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;
}

手搓tabBar

微信小程序的系統只能提供一個tabBar，其他頁面的tabBar只能自己手動寫一個。

.tabbar{
  position: fixed;
  background-color: white;
  width: 100%;
  height: 120.06rpx;
  bottom: 0;
  left: 0;
}

<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>

爲了不讓這個tabBar擋住頁面最底部的東西，有一個技巧：在頁面最底部放一個透明的有體積的view

<view class="transparent"></view>

<view class="longer-line"></view>
<view class="tabbar">
	...
</view>

.transparent{
  width: 100%;
  height: 120rpx;
}

刷新之前打開的頁面

房屋詳細頁面是通過navigate打開的，如果在這個頁面刪除了這個房屋，那麼之前打開的主頁則需要更新。這一操作可以通過getCurrentPages()來實現（這一操作在其他更新操作時也會用到）

function () {
  var pages = getCurrentPages()
  var prevPage = pages[pages.length - 2] // 獲取上一頁
  prevPage.onLoad()
  wx.navigateBack({})
}

發佈新房頁面

選擇圖片

選擇圖片 ——> 存入數組 ——> 渲染頁面 —（數量達到上限）—> 隱藏添加圖片按鈕

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
  })
},

<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>

“我的”頁面

紅點提醒

微信官方提供了wx.ShowTabBarRedDot()方法在tabBar上顯示紅點。
如果要在頁面中顯示紅點需要自己手動寫一個紅點樣式

.redDot{
  background-color: red;
  width: 7px;
  height: 7px;
  border-radius: 10px;
  position: relative;
  left: -180rpx;
  top: -4rpx;
}

單側居左，另一側居右

該頁面每一項按鈕都是左側爲圖標與文字居左，右側爲一個小右箭頭居右在同一個容器內只能有一種對齊方式。
可以在一個容器內放兩個容器，一個左對齊，一個右對齊，各自的width佔滿整個大容器，如圖所示

微信小程序從零開發房屋租賃平臺

文章目錄

預覽

全局設置

主頁

搜索欄和條件篩選欄

篩選已出租

分割線

標籤氣泡

固定位置的按鈕

分段加載

房屋詳細頁面

房型標籤氣泡

手搓tabBar

刷新之前打開的頁面

發佈新房頁面

選擇圖片

“我的”頁面

紅點提醒

單側居左，另一側居右

druid數據源 xml配置

CodeForces 840D Destiny【主席樹】

Python練手項目（1）Pygame製作遊戲

最長遞增子序列（LIS）的三種算法

Python學記筆記（十）：迭代器與生成器

Python學習筆記（八）：類

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

微信小程序 從零開發房屋租賃平臺

文章目錄

預覽

全局設置

主頁

搜索欄 和 條件篩選欄

篩選已出租

分割線

標籤氣泡

固定位置的按鈕

分段加載

房屋詳細頁面

房型標籤氣泡

手搓tabBar

刷新之前打開的頁面

發佈新房頁面

選擇圖片

“我的”頁面

紅點提醒

單側居左，另一側居右

微信小程序從零開發房屋租賃平臺

搜索欄和條件篩選欄