国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

YJNldm / 829人閱讀

摘要：往期回顧打怪升級小程序評論回復和發貼功能實戰二填坑手冊小程序生成海報一拆彈時刻小程序生成海報二填坑手冊小程序目錄結構和組件使用心得

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

先來看下實際效果圖，小程序開發中有時會要做一些的功能復雜的組件，比如評論回復和發帖功能等，這次主要講的是關于評論模塊的一些思路和實戰中的經驗，希望能拋磚引玉，給大家一些啟發，一同成長~

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

根據這個demo.gif，本人做了一個簡單的流程圖，幫助大家理解。下面羅列一些開發中需要“打的怪”：
1、組件目錄結構 
├─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輸入的形式，會出現一些兼容問題，比如：

不同手機的虛擬鍵盤高度不同，不好絕對定位和完全適配

彈窗輸入框過小輸入不方便，如果是大的textare時，容易誤觸下面評論的交。

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

2、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"
}


    
    
        
            
                
                
                    {{item.displayName}}
                    {{item.createTime}}
                
                
                    {{item.likeTotal||""}}
                    
                
            
            
                {{item.contentText}}
            
        
        
        
            
                ... 和上面類似
            
        
    
    
    
        評論加載完成

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

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

這里建議很多交互如果不是必須要特別定制，可以才用微信原生的組件，效果和兼容性都有保障，而且方便簡單。

對評論進行回復/舉報 


    ... 內部省略

//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. 按鈕的文字數組，數組長度最大為 6
itemColor string 按鈕的文字顏色
success function 接口調用成功的回調函數
fail function 接口調用失敗的回調函數
complete function 接口調用結束的回調函數（調用成功、失敗都會執行）

使用這個方法，即是主流的做法，也能很好的兼容不同機型，同時給予用戶“習慣性體驗”。

原生評論排序切換 



    
        當前選擇：{{array[index]}}
    

// 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....

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

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

5、發表評論頁 

顯示和控制評論的字數