小程式生活類休閒類專案實戰（使用美團資料）
阿新 • • 發佈：2018-12-23
小程式專案實戰@[TOC]
小程式專案實戰（使用美團資料）
這是生活小程式專案的實戰，只供學習和參考，不做任何商業用途
先上圖
不做互動邏輯也可以鍛鍊自己介面的美化，佈局，提高自己的flex佈局
- index頁面
首頁主要是輪播圖，九宮格，tabbar頁面組成，每個宮格，和tabbar都可以連結到對應的頁面
- list頁面
list頁面是由九格宮點選連結進來到對應的頁面，主要由搜尋框，圖文結合和載入條資料組成
- 接下來就是detail頁面
detail主要是由list頁面的每個item連結進來，由輪播圖和評論組成
專案前需要的工具準備
總體專案的配置
- 介面
當然，我們要使用介面需要在微信開發者工具先設定：詳情–不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書
- https://locally.uieee.com
- 首頁(index)輪播圖的介面：https://locally.uieee.com/slides
- 首頁(index)九宮格: https://locally.uieee.com/categories
- 次頁(list)導航欄標題(NavigationBarTitle)介面：https://locally.uieee.com/categories/:id
例子：https://locally.uieee.com/categories/1 - 次頁容器內容介面：/categories/:id/shops?_page=&_limit=
例子：https://locally.uieee.com/categories/1/shops?_page=1&_limit=20 - 次頁input搜尋框介面：https://locally.uieee.com/categories/1/shops?_page&_limit&q=
例子：https://locally.uieee.com/categories/1/shops?_page=0&_limit=20&q=‘新’ - 詳情頁(detail)介面
例子：https://locally.uieee.com/shops/:id
- 全域性的配置
- app.js配置介面（便於程式碼的維護）
App({
config:{
apiBase: 'https://locally.uieee.com'
}
})
- 傳送請求的封裝(fetch.js),使用時匯入即可
小程式是沒有跨域的概念，也沒有ajax非同步請求
const app = getApp()
module.exports = (url,data,method = 'GET',header={})=>{
return new Promise((resolve,reject)=>{
wx.request({
url: app.config.apiBase + url,
data,
method,
header,
dataType:'json',
success: resolve,
fail: reject
})
})
}
- 微信開發者工具的編譯模式可以設定普通編譯（進入頁面時是我們app.json裡面pages的第一個路徑），也可以設定我們直接想要進去的頁面的編譯方式，這樣使得我們在做介面的時候提高我們的效率，有些需要傳引數設定引數即可，當然也可以在pages設定進去的第一個頁面，但是不建議，沒多大用處
各個介面的實現
- tabbar
在app.json全域性配置tabbar即可 - index.js
- 輪播圖使用swiper即可，注意點：image身上有個mode屬性，易錯點:圖片的裁剪縮放是基於自己的寬高，不是基於父元素
- 九宮格連結：使用navigator，注意點：在url連結需要使用?id={{item.id}}將id傳過去
- list.js
- 注意點：input輸入框中間的icon和搜尋字樣需要做定位處理,導航欄標題需要根據介面來獲取標題的內容
- 頁面內容：獲取資料，採用flex佈局，渲染頁面，注意點：但是頁面的文字會出現向右對齊，此時只需要給text設定給寬度即可
- 頁面底部載入：只需要控制向下拉時：當資料未載入展示loading內容，載入後隱藏，使用wx:if即可注意點：當資料已經全部載入到頁面了，應該下拉時要隱藏loading內容，頁面載入的總條數為res.header[‘X-Total-Count’]
- detail.js
- 輪播圖：面板指示點設定indicator-dots為true
- 預覽圖片（即點選圖片放大），使用API：wx.previewImage({})
我們需要在圖片設定data-src來繫結它的圖片地址
<image src="{{item}}" class="slide-image" bindtap='wholeImageHandle' data-src='{{item}}'/>
js程式碼的實現
wholeImageHandle(e){
console.log(e.target)
wx.previewImage({
current: e.target.dataset.src, // 當前顯示圖片的http連結
urls: this.data.shops.images// 需要預覽的圖片http連結列表
})
}
3. 最後評論資訊需要注意如果文字沒有對齊，設定對齊即可
完善其它tabbar的連結介面
其它tab介面可根據自己的想法或則參考其它app/小程式介面去完成即可
需要改進的地方
- 頁面載入時，下拉重新整理時，應該需要使用載入的介面，載入完資料後隱藏渲染介面
- 載入的時候應該使用icon配合文字動畫一起使用
- 暫時未想到