首頁 > 文章 > 微信小程式 > 一個微信小程式版知乎實例分享

一個微信小程式版知乎實例分享

小云云原創: 2018-01-25 13:51:446057瀏覽

本文主要和大家分享從零開始一個微信小程式版知乎，希望能幫助大家開發一個微信版知乎，從中也有更多思路。

展示效果(介面樣式設計與互動來自iOS 4.8.0版本知乎App)：

一個微信小程式版知乎實例分享

動態效果請移到GitHub查看。

一、開始前的準備

申請帳號：根據小程式註冊文檔，填寫資訊和提交相應的資料，就可以擁有自己的小程式帳號。

開發工具：微信開發者工具

資料來源：

Easy Mock: 一個資料模擬神器，可以依照自己需要的格式自己寫回數據，而且所有的數據都是隨機產生的。

Mock.js: Easy Mock引入了Mock.js，但文件中僅提供了部分語法，要想自己的mock資料寫的更精簡，可以在Mock.js中查看更多具體語法。

二、初始化一個小程式

新建一個空資料夾

開啟微信開發者工具，依照「你的第一個小程式」文件中的步驟即可創建一個自己的小程式。

目錄結構

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的程式碼片段的做法，所以我的回答清單中也沒有圖片(ಥ_ಥ)。準備在下次優化專案時嘗試一下。在最外層bindtap綁定的方法中取得所點擊的tab的index值，再根據index的值分別顯示對應的tab-content

<view class="tab-wrapper" bindtap="setActive">
        <view class="tab-item {{isActive == 0 ? &#39;tab-item-active&#39; : &#39;&#39;}}" data-index="0">关注</view>
        <view class="tab-item {{isActive == 1 ? &#39;tab-item-active&#39; : &#39;&#39;}}" data-index="1">推荐</view>
        <view class="tab-item {{isActive == 2 ? &#39;tab-item-active&#39; : &#39;&#39;}}" data-index="2">热榜</view>
        <view class="tab-item-line" animation="{{animationData}}"></view>
</view>
<view class="tab-content {{isActive == 0 ? &#39;show&#39; : &#39;hide&#39;}}">
 // ...
</view>
<view class="tab-content {{isActive == 1 ? &#39;show&#39; : &#39;hide&#39;}}">
 // ...
</view>
<view class="tab-content {{isActive == 2 ? &#39;show&#39; : &#39;hide&#39;}}">
 // ...
</view>

3、上拉載入和下拉刷新

實現想法

上拉加載：emmmmmm......我指的上拉加載是觸底後的加載更多，怕跟大家理解的不一樣o(╯□╰)o。

原生方法：onReachBottom，取得到新資料後concat到原有的資料清單後。列表concat到取得到的新資料後。 )！

##使用wx.setStorage，觸發搜尋時，檢查搜尋歷史清單中是否含有該字段，如果有則忽略，如果沒有則將該字段壓入數組中。

使用wx.getStorage，在顯示搜尋蒙層時，取得到搜尋歷史列表，循環顯示，當搜尋歷史列表長度大於1時，顯示清空搜尋紀錄的按鈕。搜尋紀錄：

單一刪除：每個搜尋紀錄都會綁定刪除事件，取得到改關鍵字的index，從頻道的搜尋紀錄清單中刪除對應index的關鍵字，並透過wx.setStorage重新儲存。組件中，原知乎App中的xxxx人正在討論是嵌在輪播模組內的垂直方向的文字輪播，但是小程式中的swiper輪播組件不支援互相嵌套，因此沒能實現該部分，只好換一種樣式去寫/(ㄒoㄒ)/~~。

6、滾動吸頂

頁面中的標題列在捲動到頂部時，吸頂展示。

實作效果

實作方案

整個頁面使用包裹，並且綁定bindscroll事件，監聽滾動距離。

設定為垂直方向時，需設定的高度。

複製一個相同的標題欄，新增吸頂樣式的類別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] ? &#39;text-overflow&#39; : &#39;&#39;}}">
    {{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;
}

四、总结

通过这次小程序的开发，学到了很多东西，虽然遇到了很多问题，但解决问题的过程让我收获的更多，动手实践才是学习的最好方式。

一個微信小程式版知乎實例分享

相關文章