成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[打怪升級]小程序評論回復和發(fā)貼功能實戰(zhàn)（一）

YJNldm / 842人閱讀

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

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

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

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

根據(jù)這個demo.gif，本人做了一個簡單的流程圖，幫助大家理解。下面羅列一些開發(fā)中需要“打的怪”：
1、組件目錄結(jié)構(gòu) 
├─components      ---小程序自定義組件
│  ├─plugins      --- （重點）可獨立運行的大型模塊，可以打包成plugins
│  │  ├─comment         ---評論模塊
│  │  │  │  index.js
│  │  │  │  index.json
│  │  │  │  index.wxml
│  │  │  │  index.wxss
│  │  │  │  services.js    ---（重點）用來處理和清洗數(shù)據(jù)的service.js，配套模板和插件
         │      
         └─submit    ---評論模塊子模塊：提交評論
                 index.js
                 index.json
                 index.wxml
                 index.wxss

為什么要多帶帶做個評論頁面頁面（submit）？
因為如果是當前頁面最下面input輸入的形式，會出現(xiàn)一些兼容問題，比如：

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

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

注：目錄結(jié)構(gòu)，僅供參考。

2、NODE端API接口返回結(jié)構(gòu)和頁面結(jié)構(gòu) 
//node：API接口返回
{
    "data": {
        "commentTotal": 40,
        "comments": [
            {
                "contentText": "喜歡就關注我",   //評論內(nèi)容
                "createTime": 1560158823647,    //評論時間
                "displayName": "智酷方程式",       //用戶名
                "headPortrait": "https://blz.nosdn.127.net/1/weixin/zxts.jpg",  //用戶頭像
                "id": "46e0fb0066666666",  //評論ID  用于回復和舉報
                "likeTotal": 2,    //點贊數(shù)
                "replyContents": [   //回復評論
                    {
                        "contentText": "@智酷方程式  喜歡就回復我",   //回復評論內(nèi)容
                        "createTime": 1560158986524,   //回復時間
                        "displayName": "神秘的前端開發(fā)",   //回復的用戶名
                        "headPortrait": "https://blz.nosdn.127.net/1/2018cosplay/fourth/tesss.jpg",  //回復的用戶頭像
                        "id": "46e0fb00111111111",   //回復評論的ID
                        "likeTotal": 2,    //回復評論的點贊數(shù)
                        "replyContents": [],   //回復的回復 蓋樓
                        "replyId": "46e0fb001ec222222222",   //回復評論的獨立ID，用于統(tǒng)計
                    },
                    {
                        "contentText": "@智酷方程式： 威武，學習學習",
                        "createTime": 1560407232814,
                        "displayName": "神秘的前端開發(fā)",
                        "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結(jié)構(gòu)。
JSON盡量做成array循環(huán)的結(jié)構(gòu)方便渲染，根據(jù)ID來BAN人和管理。底部加上加載更多的效果，同時，記得做一些兼容，比如默認頭像等。

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

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

對評論進行回復/舉報 


    ... 內(nèi)部省略

//JS部分  微信原生wx.showActionSheet 顯示操作菜單交互
_goToReply(e) {
    //  上面的各種授權(quán)判斷省略...
    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)
        }
    });
}
//當選擇“舉報”的時候，二次調(diào)用 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. 按鈕的文字數(shù)組，數(shù)組長度最大為 6
itemColor string 按鈕的文字顏色
success function 接口調(diào)用成功的回調(diào)函數(shù)
fail function 接口調(diào)用失敗的回調(diào)函數(shù)
complete function 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

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

原生評論排序切換 



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

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

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

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

這個可以用encodeURIComponent的方式處理下參數(shù)中的中文，避免跳轉(zhuǎn)發(fā)布評論頁接收數(shù)據(jù)時出現(xiàn)亂碼。

5、發(fā)表評論頁 

顯示和控制評論的字數(shù)