基于微信小程序的找房系統(tǒng)設計與實現(xiàn)

胡金扣 石彥芳 劉麗華 郝艷榮

摘要：近年來，在微信生態(tài)下，觸手可及、用完即走的微信小程序引起廣泛關注。微信小程序出現(xiàn)之前，找房類App和找房類網(wǎng)站層出不窮，但是此類系統(tǒng)都有比較復雜煩瑣的功能，不能快速、簡單地完成找房任務，所以需要簡化流程，方便買賣、租賃房屋。結合這種需求，文章設計了一套基于微信小程序的找房系統(tǒng)，可獲取后臺服務器存儲的數(shù)據(jù)，實時監(jiān)測房源變化，動態(tài)顯示房源信息，只需將核心功能放到微信小程序中，界面直觀簡潔、便于操作，為有需求的用戶提供了快速的找房通道。

關鍵詞：微信小程序；找房系統(tǒng)；系統(tǒng)設計

中圖分類號：TP311? 文獻標志碼：A

0 引言

隨著經(jīng)濟的發(fā)展，人們的生活水平一年比一年提高，對居住環(huán)境也有不同的需求?，F(xiàn)實生活中大部分人工作壓力較大，沒有很多的時間和精力浪費在找房上。隨著移動互聯(lián)網(wǎng)時代的到來，任何與生活有關的事情都可以在手機上得到解決。傳統(tǒng)的找房模式需要屋主、房屋中介、客戶來回跑，還要配合客戶時間，非常煩瑣。為了簡化煩瑣的找房流程，方便買賣、租賃房屋的管理，一種專業(yè)致力于為用戶提供便捷服務，便于溝通聯(lián)系的服務體系軟件——找房系統(tǒng)應運而生。

隨著互聯(lián)網(wǎng)行業(yè)的崛起和智能手機日新月異的發(fā)展，手機App軟件如雨后春筍般涌入大眾的視線，而手機App的頻繁下載與注冊讓用戶不勝其煩，既浪費時間，又占用手機內(nèi)存，時刻關心著手機的內(nèi)存空間是否夠用。對小程序來講，完全不必要擔心內(nèi)存，因為小程序無須安裝下載就可以像瀏覽App界面那樣去任性瀏覽；微信小程序依托于微信，微信帶給小程序的流量也是驚人的，通過線下掃碼、微信搜索、公眾號關聯(lián)、好友推薦、歷史記錄和附近門店六大接入渠道，重構了消費場景，極大地釋放了消費者的潛能，從而帶來更多的客戶；App軟件要考慮不同平臺的兼容性，而微信小程序的出臺正好解決了這一大難題，它對于安卓和蘋果用戶來說幾乎可以達到完全適配融合；微信小程序的出現(xiàn)也為企業(yè)降低了程序的開發(fā)成本，節(jié)約了時間周期［1］。

本文依托微信小程序設計與開發(fā)的找房系統(tǒng)，可以為用戶在更短時間內(nèi)匹配到最合適的房源，節(jié)省時間，提高選房效率，省去了看房轉(zhuǎn)來轉(zhuǎn)去的困擾。

1 平臺架構設計

1.1 架構設計

通過微信小程序完成的找房系統(tǒng)只是針對買房或者租房用戶，還需要管理員通過后臺管理系統(tǒng)進行數(shù)據(jù)的維護，實現(xiàn)增刪改查的操作，所以針對“找房”小程序，需要做兩方面的系統(tǒng)架構，一是前端“找房”小程序，二是后臺管理系統(tǒng)，如圖1所示。前后端系統(tǒng)可以通過使用相同的接口來獲取和設置數(shù)據(jù)。前端用戶可以通過分享的二維碼掃描登錄系統(tǒng)，此時經(jīng)過用戶授權后會自動使用用戶的微信賬戶注冊登錄小程序［2］。

1.2 關鍵技術實現(xiàn)

本系統(tǒng)包含“找房”微信小程序前臺和后臺管理系統(tǒng)，微信小程序前臺涉及的技術為WXML和WXSS、JavaScript，采用原生開發(fā)小程序，小程序是微信在參考Vue、React、Angular等前端框架的基礎上，形成的一種基于微信平臺的輕應用開發(fā)模式。使用的語法都是參照之前的框架，比如數(shù)據(jù)傳遞上，與Vue的方式很相似；使用插件上也是直接引入組件名稱，給組件傳入數(shù)據(jù)源，在組件中觸發(fā)回調(diào)函數(shù)等。小程序中的地圖找房，還應用了小程序的第三方插件騰訊位置服務。

該后臺采用前后分離的形式使用Java+Vue，前端使用技術：HTML5、CSS3、JavaScript、Vue，采用Vue框架，Vue是一套用于構建用戶界面的漸進式框架。前端采用Vue框架的優(yōu)勢體現(xiàn)在Vue組件化開發(fā)，減少代碼量，易于理解；Vue使用路由不會刷新頁面，局部刷新；MVVM開發(fā)模式，雙向數(shù)據(jù)綁定；采用虛擬DOM，可進行服務端渲染。后端使用技術：Spring、ringMvc、Mybatis（SSM）等。數(shù)據(jù)庫采用MySQL數(shù)據(jù)庫，小程序開發(fā)軟件為Visual Studio Code，小程序運行軟件為微信開發(fā)者工具。

2 系統(tǒng)總體設計

由于小程序的核心功能是為用戶提供新房、二手房、租房三種類型的找房服務且要求快速、便捷，根據(jù)需求調(diào)研，設計了房源推薦、篩選找房、個人中心3個功能。各個模塊之間可簡潔明了地展現(xiàn)服務內(nèi)容。

2.1 房源推薦模塊

該模塊主要包括房源信息檢索、熱門房源管理等。其中難點在于檢索區(qū)的定位，檢索區(qū)自動定位需要通過獲取當前小程序所在區(qū)域的經(jīng)緯度來反解城市信息，這里所用到的技術主要是第三方插件騰訊位置服務。解決自動獲取當前城市，首先需要獲取當前的地理位置，涉及小程序API為wx.getLocation，把獲得的經(jīng)緯度信息通過騰訊地圖的接口逆地址解析，使用騰訊地圖接口為reverseGeocoder（），返回的結果中就有city字段。流程如圖2所示。

該模塊中所有顯示的內(nèi)容都依賴于當前城市，根據(jù)城市來顯示對應城市下的熱門房源，由于網(wǎng)絡等原因存在獲取不到當前城市的情況，所以還要設置默認城市，以保證功能的正常實現(xiàn)。獲取當前城市的核心代碼片段如下：

var QQMapWX = require（'../../util/qqmap-wx-jssdk.js'） // 引入jssdk.js

var qqmapsdk;

const app = getApp（）

Page（{

data： {

latitude： null，

longitude： null，

city： "保定"， //設置默認城市

}，

onLoad： function （） {

this.getLocation（）;

}，

getLocation（） {

var that = this

wx.getLocation（{ //通過wx.getLocation獲取當前經(jīng)緯度

type： 'wgs84'，

success： function （res） {

that.setData（{

latitude： res.latitude，

longitude： res.longitude

}）

var demo = new QQMapWX（{

key： '****' // 騰訊位置服務申請的密鑰

}）;

demo.reverseGeocoder（{//使用reverseGeoc oder逆地址解析

location： {

latitude： latitude，

longitude： longitude

}，

success： function （res） {

that.setData（{

city： res.result.city//獲得地址

}）}，}）;}}）}}）

在房源推薦模塊中，可以看到新房的樓盤信息，二手房和租房的前10個熱門房源列表如圖3（a）所示，通過點擊可以進入到房源詳情，查看具體內(nèi)容，如圖3（b）所示。

2.2 篩選找房模塊

篩選找房模塊主要包含3個功能，一是文本框的搜索查找功能，二是條件查找功能，三是顯示房源列表功能。通過文本框模糊查詢，只按照小區(qū)名稱進行模糊查詢，獲取相應查詢內(nèi)容的房源列表；篩選功能是根據(jù)區(qū)域、價格、面積戶型、高級、排序等條件篩選出想要的房源信息，可以獨立使用，也可以和文本框模糊查詢疊加使用，如圖4所示。

篩選找房模塊在篩選過程中，由于篩選條件比較多，而且存在多選的情況，這就涉及疊加的問題，可能在篩選過程中，多次調(diào)用同一個查找接口，唯一的差別就是傳遞的參數(shù)不同，所以這里把調(diào)用接口的代碼進行封裝，每次調(diào)用接口，直接使用封裝函數(shù)［3］。封裝函數(shù)的核心代碼片段如下：

allIds： function （） {

//該函數(shù)實現(xiàn)的是篩選功能，用于獲取符合條件的所有房源id

let url = "";

//根據(jù)this.data.opType是“二手房”還是“租房”來判斷到底調(diào)用哪個接口

var opType = app.globalData.opType;

var _this = this;

var datas = {};

if （opType == "二手房"） {

//調(diào)用該房源的二手房出售的基本信息

url = "/pre/houseInfo/getSecondHouseByMulCondition";

datas［'minTotalPrice'］ = _this.data.house.MinTotalPrice;

datas［'maxTotalPrice'］ = _this.data.house.maxTotalPrice;

datas［'minAvgPrice'］ =_this.data.house.minAvgPrice;

datas［'maxAvgPrice'］ =_this.data.house.maxAvgPrice;

datas［'focusHouseIds'］ =_this.data.house.secondSaveIds;

} else if （opType == "租房"） { //調(diào)用該房源出租的基本信息，此處省略}

datas［'areaIds'］ = _this.data.house.areaIds;

if（districtId==null）{

datas［"districtId"］="";

}

else{ datas［"districtId"］=_this.data.house.districtId; }

datas［'roomType'］ = _this.data.house.styleTypes;

datas［'floorLocation'］ = _this.data.house. floorLocation;

datas［'statusStr'］ = _this.data.house.highLevel;

datas［'minArea'］ = _this.data.house.minArea;

datas［'maxArea'］ = _this.data.house.maxArea;

datas［'sort'］ =_this.data.house. sort;

datas［'cityCode'］ = app.globalData.currentCityId;

datas［'pageNum'］ = _this.data.house.pageNum;

datas［'pageSize'］ = 10;

datas［'housingName'］ = _this.data.house.housingName;

app.postAjax（url， datas，

function （res） {

var total = res.data.result.total;

var abc = res.data.result;

var recommendNewHouse = _this.data.recommendNewHouse;

var opType = app.globalData.opType

recommendNewHouse = _this.houseListShow（abc， opType， recommendNewHouse）;

if （recommendNewHouse.length == 0）{

wx.showToast（{

title： '暫無房源信息'，

}）

}

_this.setData（{

recommendNewHouse： recommendNewHouse，

total： total，

}）?? }，

2.3 個人中心模塊

個人中心模塊內(nèi)容包括登錄功能、關聯(lián)賬戶信息功能［4］。只有登錄以后才能查看我關注的房源信息、聯(lián)系中介。未登錄的情況下只能瀏覽信息，不能進行關注等行為，如果檢測到當用戶未登錄，那么點擊“我的”后顯示未登錄頁面效果圖，在“未登錄”狀態(tài)下，點擊下面任何一個按鈕，都彈出登錄界面。如果檢測到當用戶已登錄，即可進入個人中心界面。具體流程如圖5所示。

個人中心模塊功能簡單，但是涉及多處需要驗證用戶是否登錄，如在篩選找房模塊中涉及通過“我的關注”查找條件來篩選出用戶之前關注過的房源信息、在房源詳情中可以聯(lián)系中介時，也會區(qū)分是否登錄，如果未登錄的話是不能聯(lián)系中介的，這種情況都會判斷用戶是否已登錄，如果未登錄就會跳轉(zhuǎn)到“我的”頁面進行登錄操作，登錄成功后再進行后續(xù)操作。這里，我們把是否登錄放到app.js中進行封裝，這樣在需要判斷時，可以使用全局函數(shù)MyLogin（），核心代碼如下：

myLogin（） {

var _this = this;

wx.login（{

success： res => {

wx.request（{

url： _this.globalData.serverNameNew + "user/login"， //服務器地址

data： { "code"： res.code }，

method： "post"，

header： {'content-type'： 'application/json'}，

success（res） {

if （res.data.result.code == "000000"） {

//將openId保存為公共數(shù)據(jù)（用于當前用戶的身份認證）

_this.globalData.openId = res.data.result.openId;

//將token保存到數(shù)據(jù)緩存（下次打開小程序時無須重新獲取token）

wx.setStorageSync（'openId'， res.data.result.openId）;

_this.setUserInfo（）; //連接 websocket的代碼

} else {

wx.showToast（{

title： '登錄失敗！'，

}） //未獲取用戶的openid失敗

}

}， }） } }）; }，

3 結語

本系統(tǒng)針對用戶越來越輕量化的操作需求，借助于微信小程序不需要安裝、輕便、快捷的特點，開發(fā)了基于微信小程序的找房系統(tǒng)，不僅能夠讓用戶在找房過程中更直觀更方便，免去安裝軟件、網(wǎng)頁操作等煩瑣的流程，同時也讓客戶經(jīng)理有了更多的渠道去和用戶溝通、交流，進而構建良好的互動找房模式，具有重要的推廣意義。

參考文獻

［1］劉儀，張雪冰.大數(shù)據(jù)背景下微信小程序的應用與分析［J］.無線互聯(lián)科技，2021（7）：45-46.

［2］楊晨光.以用戶行為為導向的微信小程序微交互設計與研究［D］.北京：北京郵電大學，2021.

［3］張曉燕.微信“小程序”開發(fā)的系統(tǒng)實現(xiàn)及前景［J］.電子技術與軟件工程，2018（12）：49-50.

［4］程子珍.基于微信小程序的網(wǎng)上購物系統(tǒng)的設計與實現(xiàn)［D］.北京：首都經(jīng)濟貿(mào)易大學，2018.

（編輯 李春燕）

Design and implementation of house-searching system based on WeChat mini program

Hu? Jinkou， Shi? Yanfang， Liu? Lihua， Hao? Yanrong

（Hebei Software Institute， Baoding 071000， China）

Abstract：? In recent years， in the WeChat ecosystem， WeChat applets that are within reach and ready to use have attracted widespread attention. Before the emergence of WeChat apps， apps and websites for finding houses emerged in an endless stream， but such systems have relatively complex and cumbersome functions， and can not quickly and simply complete the task of finding houses， so it is necessary to simplify the process to facilitate the purchase， sale and rental of houses. Combined with this demand， this paper designs a housing search system based on WeChat applet， which can obtain the data stored in the background server， monitor the changes of housing availability in real time， and dynamically display the information of housing availability which just need to put the core functions into WeChat applet， and the interface is intuitive， concise and easy to operate， providing a fast housing search channel for users in need.

Key words： WeChat mini program; house-searching system; system design