以前工作沒直接進行過小程式的開發，最近閒了下來就趕緊學習一下。因為從零開始，所以沒有使用任何框架及UI庫，記錄一下本次開發中踩過的坑吧~
展示效果(介面樣式設計與互動來自iOS 4.8.0版本知乎App)：
動態效果請移步到GitHub檢視。
一、開始前的準備
二、初始化一個小程式
- 新建一個空資料夾
- 開啟微信開發者工具，按照“你的第一個小程式”文件中的步驟即可建立一個自己的小程式。
- 目錄結構
weChatApp
|___client
| |___assets // 儲存圖片
| |___pages // 頁面
| | |___index // 首頁
| | |___index.wxml // 頁面結構檔案
| | |___index.wxss // 樣式表檔案
| | |___index.js // js檔案
| |___utils // 全域性公共函式
| |___app.js // 系統的方法處理檔案
| |___app.json // 系統全域性配置檔案
| |___app.wxss // 全域性的樣式表
| |___config.json // 域名等配置檔案
|___project.config.json
|___README
複製程式碼- 小程式配置檔案
app.json內容
{
// 頁面路由
"pages": [
"pages/index/index", // 首頁
"pages/findMore/findMore", // 想法頁（開始起名為發現頁面，後來沒改/(ㄒoㄒ)/~~）
"pages/userCenter/userCenter", // 更多（同上，原來起名為個人中心o(╯□╰)o）
"pages/market/market", // 市場
"pages/searchResult/searchResult",// 搜尋結果頁
"pages/message/message", // 訊息列表頁
"pages/titleDetail/titleDetail", // 點選標題進入的問題詳情頁
"pages/contentDetail/contentDetail"// 點選內容進入的回答詳情頁
],
// 視窗
"window": {
"backgroundColor": "#FFF", // 視窗的背景色
"backgroundTextStyle": "dark", // 下拉背景字型、loading 圖的樣式，僅支援 dark/light
"navigationBarBackgroundColor": "#FFF",// 頂部tab背景顏色
"navigationBarTitleText": "知小乎", //頂部顯示標題
"navigationBarTextStyle": "black", // 導航欄標題顏色，僅支援 black/white
"enablePullDownRefresh": true // 是否開啟下拉重新整理
},
// tab導航條
"tabBar": {
"backgroundColor": "#fff", // 背景顏色
"color": "#999", // 預設文字顏色
"selectedColor": "#1E8AE8", // 選中時文字顏色
"borderStyle": "white", // tabbar上邊框的顏色， 僅支援 black/white
/**
* tab列表，最少2個，最多5個
* selectedIconPath: 選中時圖片
* iconPath: 預設圖片
* pagePath: 對應頁面路由
* text: 對應文案
**/
"list": [{
"selectedIconPath": "assets/home-light.png",
"iconPath": "assets/home.png",
"pagePath": "pages/index/index",
"text": "首頁"
}, {
"selectedIconPath": "assets/find-light.png",
"iconPath": "assets/find.png",
"pagePath": "pages/findMore/findMore",
"text": "想法"
},
{
"selectedIconPath": "assets/market-light.png",
"iconPath": "assets/market.png",
"pagePath": "pages/market/market",
"text": "市場"
},
{
"selectedIconPath": "assets/msg-light.png",
"iconPath": "assets/msg.png",
"pagePath": "pages/message/message",
"text": "訊息"
}, {
"selectedIconPath": "assets/more-light.png",
"iconPath": "assets/more.png",
"pagePath": "pages/userCenter/userCenter",
"text": "更多"
}]
}
}
複製程式碼- 配置介面域名: 因使用的是Easy Mock模擬介面資料，因此可以在小程式管理後臺-開發設定-伺服器域名中將
request合法域名配置為https://www.easy-mock.com。
三、開發中的遇到的問題及解決方案
1、小程式渲染HTML片段
看了網頁版知乎，介面返回的回答資料是一段HTML的程式碼片段，所以答案中可以在任意位置都插入圖片。
對，沒錯，就是下面醬紫的(╯°□°）╯︵┻━┻
經過反覆嘗試，發現原生寫法不支援渲染一段HTML程式碼片段，因此放棄了返回HTML的程式碼片段的做法，所以我的回答列表中也沒有圖片(ಥ_ಥ)。
但在調研中發現了一個自定義元件：wxParse-微信小程式富文字解析元件，還沒嘗試使用，準備在下次優化專案時嘗試一下。
2、首頁的頂部tab切換
實現思路
每個可點選的tab分別繫結
data-index，在最外層bindtap繫結的方法中獲取所點選的tab的index值，再根據index的值分別顯示對應的tab-content
<view class="tab-wrapper" bindtap="setActive">
<view class="tab-item {{isActive == 0 ? 'tab-item-active' : ''}}" data-index="0">關注</view>
<view class="tab-item {{isActive == 1 ? 'tab-item-active' : ''}}" data-index="1">推薦</view>
<view class="tab-item {{isActive == 2 ? 'tab-item-active' : ''}}" data-index="2">熱榜</view>
<view class="tab-item-line" animation="{{animationData}}"></view>
</view>
<view class="tab-content {{isActive == 0 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isActive == 1 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isActive == 2 ? 'show' : 'hide'}}">
// ...
</view>
複製程式碼3、上拉載入和下拉重新整理
實現思路
上拉載入：emmmmmm......我指的上拉載入是觸底後的載入更多，怕跟大家理解的不一樣o(╯□╰)o。
- 原生方法：onReachBottom，獲取到新資料後
concat到原有的資料列表後。
下拉重新整理：
- 原生方法：onPullDownRefresh，將原有的資料列表
concat到獲取到的新資料後。
要注意的是，每次對陣列進行操作後，都要使用setData對原陣列重新賦值，否則資料不會更新的啊( ⊙ o ⊙ )！
4、搜尋歷史的儲存
實現思路
wx.setStorage、wx.getStorage和wx.removeStorage
- 儲存搜尋歷史：
- 使用wx.setStorage，觸發搜尋時，檢查搜尋歷史列表中是否含有該欄位，如果有則忽略，如果沒有則將該欄位壓入陣列中。
- 顯示搜尋歷史：
- 使用wx.getStorage，在顯示搜尋蒙層時，獲取到搜尋歷史列表，迴圈顯示，當搜尋歷史列表長度大於1時，顯示清空搜尋歷史的按鈕。
- 刪除搜尋歷史：
- 單一刪除：每個搜尋歷史都繫結刪除事件，獲取到改關鍵詞的index，從渠道的搜尋歷史列表中刪除對應index的關鍵詞，並通過wx.setStorage重新儲存。
- 全部刪除：使用wx.removeStorage，直接移除搜尋歷史對應的關鍵字。
5、swiper輪播元件
在想法頁的輪播元件中，原知乎App中的xxxx人正在討論是嵌在輪播模組內的垂直方向的文字輪播，但是小程式中的swiper輪播元件不支援互相巢狀，因此沒能實現該部分，只好換一種樣式去寫/(ㄒoㄒ)/~~。
6、滾動吸頂
頁面中的標題欄在滾動到頂部時，吸頂展示。
實現效果
實現方案
- 整個頁面使用
<scroll-view></scroll-view>包裹，並且繫結bindscroll事件，監聽滾動距離。 - 設定
<scroll-view>為垂直方向時，需設定<scroll-view>的高度。 - 複製一個相同的標題欄，新增吸頂樣式的類
fixed。 - 使用
wx:if判斷當前頁面滾動距離是否達到要求，如果達到所需距離，則渲染這個吸頂的標題欄。
<view class="find-hot-header fixed" wx:if="{{scrollTop >= 430}}">
<view class="find-hot-title">最近熱門</view>
</view>
<view class="find-hot-header">
<view class="find-hot-title">最近熱門</view>
</view>
複製程式碼7、展開和收起全文
展示效果
文字部分預設新增class，超出兩行文字顯示省略號。
.text-overflow{
height: 85rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
複製程式碼點選展開全文和收起全文時對showIndex[index]的值取反，對應新增或移除該class。
<view class="find-hot-content {{!showIndex[index] ? 'text-overflow' : ''}}">
{{item.content}}
</view>
<view wx:if="{{!showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">展開全文</view>
<view wx:if="{{showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">收起全文</view>
複製程式碼8、更改switch樣式
switch類名如下，一定要加上父類，不然全域性的都會被改掉_(:з」∠)_。
父類 .wx-switch-input{
display: inline-block;
position: absolute;
top: 20rpx;
right: 20rpx;
width: 84rpx;
height: 44rpx;
}
父類 .wx-switch-input::before{
width: 80rpx;
height: 40rpx;
}
父類 .wx-switch-input::after{
width: 40rpx;
height: 40rpx;
}
複製程式碼四、總結
通過這次小程式的開發，學到了很多東西，雖然遇到了很多問題，但解決問題的過程讓我收穫的更多，動手實踐才是學習的最好方式。
另外，此次專案中仍有許多功能不夠完善，一些細節還可以繼續優化，長路漫漫啊(๑•̀ㅂ•́)و✧。
如果文章中有錯誤和不足歡迎批評指正。
專案地址：GitHub
(づ｡◕‿‿◕｡)づ★ 想要個star