[打怪升級]小程序評論回覆和發貼功能實戰（一）

時間 2021-02-13

標籤 html 前端 node react json 小程序 segmentfault 數組瀏覽器微信欄目 HTML 简体版

原文原文鏈接

在學習成長的過程當中，經常會遇到一些本身從未接觸的事物，這就比如是打怪升級，每次打倒一隻怪，都會得到經驗，讓本身進步強大。特別是咱們這些作技術的，逆水行舟不進則退。下面分享下小程序開發中的打怪升級經歷~html

先來看下實際效果圖，小程序開發中有時會要作一些的功能複雜的組件，好比評論回覆和發帖功能等，此次主要講的是關於評論模塊的一些思路和實戰中的經驗，但願能拋磚引玉，給你們一些啓發，一同成長~前端

>>（最下面有實戰demo的地址，能夠直接瀏覽器打開添加至IDE工具中） <<node

根據這個demo.gif，本人作了一個簡單的流程圖，幫助你們理解。下面羅列一些開發中須要「 打的怪」：

一、組件目錄結構

├─components      ---小程序自定義組件
│  ├─plugins      --- （重點）可獨立運行的大型模塊，能夠打包成plugins
│  │  ├─comment         ---評論模塊
│  │  │  │  index.js
│  │  │  │  index.json
│  │  │  │  index.wxml
│  │  │  │  index.wxss
│  │  │  │  services.js    ---（重點）用來處理和清洗數據的service.js，配套模板和插件
         │      
         └─submit    ---評論模塊子模塊：提交評論
                 index.js
                 index.json
                 index.wxml
                 index.wxss

爲何要單獨作個評論頁面頁面（submit）？
由於若是是當前頁面最下面input輸入的形式，會出現一些兼容問題，好比：react

不一樣手機的虛擬鍵盤高度不一樣，很差絕對定位和徹底適配
彈窗輸入框太小輸入不方便，若是是大的textare時，容易誤觸下面評論的交。

注：目錄結構，僅供參考。json

二、NODE端API接口返回結構和頁面結構

//node：API接口返回
{
    "data": {
        "commentTotal": 40,
        "comments": [
            {
                "contentText": "喜歡就關注我",   //評論內容
                "createTime": 1560158823647,    //評論時間
                "displayName": "智酷方程式",       //用戶名
                "headPortrait": "https://blz.nosdn.127.net/1/weixin/zxts.jpg",  //用戶頭像
                "id": "46e0fb0066666666",  //評論ID  用於回覆和舉報
                "likeTotal": 2,    //點贊數
                "replyContents": [   //回覆評論
                    {
                        "contentText": "@智酷方程式  喜歡就回復我",   //回覆評論內容
                        "createTime": 1560158986524,   //回覆時間
                        "displayName": "神祕的前端開發",   //回覆的用戶名
                        "headPortrait": "https://blz.nosdn.127.net/1/2018cosplay/fourth/tesss.jpg",  //回覆的用戶頭像
                        "id": "46e0fb00111111111",   //回覆評論的ID
                        "likeTotal": 2,    //回覆評論的點贊數
                        "replyContents": [],   //回覆的回覆 蓋樓
                        "replyId": "46e0fb001ec222222222",   //回覆評論的獨立ID，用於統計
                    },
                    {
                        "contentText": "@智酷方程式： 威武，學習學習",
                        "createTime": 1560407232814,
                        "displayName": "神祕的前端開發",
                        "headPortrait": "https://blz.nosdn.127.net/1/2018cosplay/fourth/tesss.jpg",
                        "id": "46e0fb00111111111",
                        "likeTotal": 0,
                        "replyContents": [],
                        "replyId": "46e0fb001ec222222222",
                    }
                ],
                "replyId": "",
                "topicId": "46e0fb001ec3333333",
            }
        ],
        "curPage": 1,  //當前頁面
        //經過ID 判斷  當前用戶點讚了 哪些評論
        "likes": [
            "46e0fb00111111111",    
            "46e0fb001ec222222222",
            "46e0fb0066666666",
        ],
        "nextPage": null, //下一頁
        "pageSize": 20,  //一頁總共多少評論
        "total": 7,   //總共多少頁面
    },
    "msg": "success",
    "status": "success"
}

<!-- HTML 部分 -->
<block wx:if="{{commentList.length>0}}">
    <!-- 評論模塊 -->
    <block wx:for="{{commentList}}" wx:for-item="item" wx:for-index="index" wx:key="idx">
        <view class="commentItem" catchtap="_goToReply" data-contentid="{{item.id}}" data-replyid="{{item.id}}"
            data-battle-tag="{{item.displayName}}">
            <view class="titleWrap">
                <image class="logo" src="{{item.headPortrait||'默認圖'}}"></image>
                <view class="authorWrap">
                    <view class="author">{{item.displayName}}</view>
                    <view class="time">{{item.createTime}}</view>
                </view>
                <view class="starWrap" catchtap="_clickLike" data-index="{{index}}" data-like="{{item.like}}"
                    data-contentid="{{item.id}}" data-topicid="{{item.topicId}}">
                    <text class="count">{{item.likeTotal||""}}</text>
                    <view class="workSprite icon {{item.like?'starIconHasClick':'starIcon'}}"></view>
                </view>
            </view>
            <view class="text">
                {{item.contentText}}
            </view>
        </view>
        <!-- 評論的評論 -->
        <block wx:for="{{item.replyContents}}" wx:for-item="itemReply" wx:for-index="indexReply" wx:key="idxReply">
            <view class="commentItem commentItemReply" catchtap="_goToReply" data-contentid="{{itemReply.id}}"
                data-replyid="{{item.id}}" data-battle-tag="{{itemReply.displayName}}">
                ... 和上面相似
            </view>
        </block>
    </block>
    <!-- 加載更多loading -->
    <block wx:if="{{isOver}}">
        <view class="more">評論加載完成</view>
    </block>
</block>

經過node提供一個API接口，經過用戶的openId來判斷是否點贊，這裏提供一個參考的JSON結構。
JSON儘可能作成array循環的結構方便渲染，根據ID來BAN人和管理。底部加上加載更多的效果，同時，記得作一些兼容，好比默認頭像等。小程序

三、評論中的一些微信原生交互

這裏建議不少交互若是不是必需要特別定製，能夠才用微信原生的組件，效果和兼容性都有保障，並且方便簡單。segmentfault

對評論進行回覆/舉報

<!-- HTML部分 經過綁定事件：_goToReply 進行交互-->
<view class="commentItem" catchtap="_goToReply" data-contentid="{{item.id}}" data-replyid="{{item.id}}"
    data-battle-tag="{{item.displayName}}">
    ... 內部省略
</view>

//JS部分  微信原生wx.showActionSheet 顯示操做菜單交互
_goToReply(e) {
    //  上面的各類受權判斷省略...
    let self = this;
    wx.showActionSheet({
        itemList: ['回覆', '舉報'],
        success: function (res) {
            if (!res.cancel) {
                console.log(res.tapIndex);
                //前往評論
                if (res.tapIndex == 0) {
                    //判斷是不是 評論的評論
                    self._goToComment(replyid);
                }
                //舉報按鈕
                if (res.tapIndex == 1) {
                    //彈出框
                    self.setComplain(contentid);
                }
            } else { //取消選擇
                
            }
        },
        fail(res) {
            console.log(res.errMsg)
        }
    });
}
//當選擇「舉報」的時候，二次調用 wx.showActionSheet 方法
setComplain(contentid){
    let complainJson = ["敏感信息", "色情淫穢", "垃圾廣告", "語言辱罵", "其它"];
    wx.showActionSheet({
        itemList: complainJson,
        success: async res => {
            if (!res.cancel) {
                //選擇好後，提交舉報
                try {
                    let complainResult = await request.postComplainReport(complainJson[index], openid, contentid);
                    if (complainResult.msg == "success") {  //提交成功後反饋

                    } else {

                    }
                } catch (e) {
                    console.log(e)
                }
            }
        }
    });
}

顯示操做菜單 wx.showActionSheet 方法說明數組

屬性	類型	說明
itemList	Array.<string>	按鈕的文字數組，數組長度最大爲 6
itemColor	string	按鈕的文字顏色
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

使用這個方法，便是主流的作法，也能很好的兼容不一樣機型，同時給予用戶「習慣性體驗」。瀏覽器

原生評論排序切換

<!-- picker組件  html部分-->
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
        當前選擇：{{array[index]}}
    </view>
</picker>

// js部分
Page({
    data:{
        //查看評論類型切換
        array: ["最佳", "最新", "只看本身"],
        //選擇數組中的第幾個顯示
        index:0
    },
    bindPickerChange(e) {
        console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
        this.setData({
            index: e.detail.value
        })
    }
})

picker組件是一個從底部彈起的滾動選擇器，這裏咱們用它來切換不一樣評論的排序。每次切換均可以經過 bindchange得到對應的變化，經過 e.detail.value獲取用戶選擇的索引值。
官方文檔：
https://developers.weixin.qq....微信

四、傳參跳轉寫評論頁

let uriData = {
    logo: "xxx.jpg",
    type: "commentReply",
    title: "文章：小程序評論，動態發帖開發指北\n 做者：智酷方程式",
    openId:"xxxxxxxxxxx",
    replyId:"aaaaaa"   //用戶回覆的是哪一個評論的ID
};
wx.navigateTo({ url: `/components/plugins/comment/submit/index?uriData=${encodeURIComponent(JSON.stringify(uriData))}` });

這個能夠用encodeURIComponent的方式處理下參數中的中文，避免跳轉發布評論頁接收數據時出現亂碼。

五、發表評論頁

顯示和控制評論的字數

<!-- html部分  關於textarea 的配置 -->
<view class='feedback-cont'>
    <textarea auto-focus="true" value="{{replyName}}" maxlength="200" bindinput="textareaCtrl"
        placeholder-style="color:#999;" placeholder="留下評論，共同窗習，一塊兒進步" />
    <view class='fontNum'>{{content.length}}/200</view>
</view>
<view class='feedback-btn' bindtap='commentSubmit'>提交</view>

// js部分
Page({
    data: {
        //初始化評論內容，若是是回覆則經過傳參變成 @xxxx的形式
        content: "@xxxx",
    },
    textareaCtrl: function (e) {
        if (e.detail.value) {
            this.setData({
                content: e.detail.value
            })
        } else {
            this.setData({
                content: ""
            })
        }
    }
})

textarea 在小程序中改動不大，這個標籤原有的一些屬性均可以繼續使用，經過配置maxlength來控制字數，同時，設置auto-focus="true"可讓用戶進到這個發表評論頁面時自動彈出虛擬鍵盤和光標定位在輸入的區域。

固然，也能夠將發表評論和評論展現區域作在一塊兒，這個就要考慮到要麼經過「小程序API」獲取鍵盤高度，要麼將「發佈評論」置頂區域顯示，也是能夠作的，只是相對考慮的點會多些。當時開發評論組件的時候，考慮開發時間短和用戶體驗，權衡後，最終決定以上方案，但願能給到你們一些參考和借鑑，在其餘組件開發中舉一反三。

[代碼片斷]評論回覆組件實戰demo

demo的微信路徑：https://developers.weixin.qq....

demo的ID：oHs5cMma7N9W

若是你裝了IDE工具，能夠直接訪問上面的demo路徑

經過代碼片斷將demo的ID輸入進去也可添加：

總結，「組件化思想」對於不管作小程序、react/VUE仍是其餘項目來講，減小重複開發，提升複用性都是一個很是重要的點。評論功能其實只要理清楚總體思路，作起來難度並不大，經過一些原生組件，能夠大大提升開發效率，同時保證良好的兼容性。
後面一期還將分享下功能點較多的發帖組件開發。

往期回顧：
[[[打怪升級]小程序評論回覆和發貼功能實戰（二）](https://segmentfault.com/a/11...
[[填坑手冊]小程序Canvas生成海報（一）](https://segmentfault.com/a/11...
[[拆彈時刻]小程序Canvas生成海報（二）](https://segmentfault.com/a/11...
[[填坑手冊]小程序目錄結構和component組件使用心得](https://segmentfault.com/a/11...