亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

YJNldm / 896人閱讀

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

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

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

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

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

為什么要多帶帶做個(gè)評(píng)論頁(yè)面頁(yè)面（submit）？
因?yàn)槿绻钱?dāng)前頁(yè)面最下面input輸入的形式，會(huì)出現(xiàn)一些兼容問(wèn)題，比如：

不同手機(jī)的虛擬鍵盤(pán)高度不同，不好絕對(duì)定位和完全適配

彈窗輸入框過(guò)小輸入不方便，如果是大的textare時(shí)，容易誤觸下面評(píng)論的交。

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

2、NODE端API接口返回結(jié)構(gòu)和頁(yè)面結(jié)構(gòu) 
//node：API接口返回
{
    "data": {
        "commentTotal": 40,
        "comments": [
            {
                "contentText": "喜歡就關(guān)注我",   //評(píng)論內(nèi)容
                "createTime": 1560158823647,    //評(píng)論時(shí)間
                "displayName": "智酷方程式",       //用戶(hù)名
                "headPortrait": "https://blz.nosdn.127.net/1/weixin/zxts.jpg",  //用戶(hù)頭像
                "id": "46e0fb0066666666",  //評(píng)論ID  用于回復(fù)和舉報(bào)
                "likeTotal": 2,    //點(diǎn)贊數(shù)
                "replyContents": [   //回復(fù)評(píng)論
                    {
                        "contentText": "@智酷方程式  喜歡就回復(fù)我",   //回復(fù)評(píng)論內(nèi)容
                        "createTime": 1560158986524,   //回復(fù)時(shí)間
                        "displayName": "神秘的前端開(kāi)發(fā)",   //回復(fù)的用戶(hù)名
                        "headPortrait": "https://blz.nosdn.127.net/1/2018cosplay/fourth/tesss.jpg",  //回復(fù)的用戶(hù)頭像
                        "id": "46e0fb00111111111",   //回復(fù)評(píng)論的ID
                        "likeTotal": 2,    //回復(fù)評(píng)論的點(diǎn)贊數(shù)
                        "replyContents": [],   //回復(fù)的回復(fù) 蓋樓
                        "replyId": "46e0fb001ec222222222",   //回復(fù)評(píng)論的獨(dú)立ID，用于統(tǒng)計(jì)
                    },
                    {
                        "contentText": "@智酷方程式： 威武，學(xué)習(xí)學(xué)習(xí)",
                        "createTime": 1560407232814,
                        "displayName": "神秘的前端開(kāi)發(fā)",
                        "headPortrait": "https://blz.nosdn.127.net/1/2018cosplay/fourth/tesss.jpg",
                        "id": "46e0fb00111111111",
                        "likeTotal": 0,
                        "replyContents": [],
                        "replyId": "46e0fb001ec222222222",
                    }
                ],
                "replyId": "",
                "topicId": "46e0fb001ec3333333",
            }
        ],
        "curPage": 1,  //當(dāng)前頁(yè)面
        //通過(guò)ID 判斷  當(dāng)前用戶(hù)點(diǎn)贊了 哪些評(píng)論
        "likes": [
            "46e0fb00111111111",    
            "46e0fb001ec222222222",
            "46e0fb0066666666",
        ],
        "nextPage": null, //下一頁(yè)
        "pageSize": 20,  //一頁(yè)總共多少評(píng)論
        "total": 7,   //總共多少頁(yè)面
    },
    "msg": "success",
    "status": "success"
}


    
    
        
            
                
                
                    {{item.displayName}}
                    {{item.createTime}}
                
                
                    {{item.likeTotal||""}}
                    
                
            
            
                {{item.contentText}}
            
        
        
        
            
                ... 和上面類(lèi)似
            
        
    
    
    
        評(píng)論加載完成

通過(guò)node提供一個(gè)API接口，通過(guò)用戶(hù)的openId來(lái)判斷是否點(diǎn)贊，這里提供一個(gè)參考的JSON結(jié)構(gòu)。
JSON盡量做成array循環(huán)的結(jié)構(gòu)方便渲染，根據(jù)ID來(lái)BAN人和管理。底部加上加載更多的效果，同時(shí)，記得做一些兼容，比如默認(rèn)頭像等。

3、評(píng)論中的一些微信原生交互

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

對(duì)評(píng)論進(jìn)行回復(fù)/舉報(bào) 


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

//JS部分  微信原生wx.showActionSheet 顯示操作菜單交互
_goToReply(e) {
    //  上面的各種授權(quán)判斷省略...
    let self = this;
    wx.showActionSheet({
        itemList: ["回復(fù)", "舉報(bào)"],
        success: function (res) {
            if (!res.cancel) {
                console.log(res.tapIndex);
                //前往評(píng)論
                if (res.tapIndex == 0) {
                    //判斷是否是 評(píng)論的評(píng)論
                    self._goToComment(replyid);
                }
                //舉報(bào)按鈕
                if (res.tapIndex == 1) {
                    //彈出框
                    self.setComplain(contentid);
                }
            } else { //取消選擇
                
            }
        },
        fail(res) {
            console.log(res.errMsg)
        }
    });
}
//當(dāng)選擇“舉報(bào)”的時(shí)候，二次調(diào)用 wx.showActionSheet 方法
setComplain(contentid){
    let complainJson = ["敏感信息", "色情淫穢", "垃圾廣告", "語(yǔ)言辱罵", "其它"];
    wx.showActionSheet({
        itemList: complainJson,
        success: async res => {
            if (!res.cancel) {
                //選擇好后，提交舉報(bào)
                try {
                    let complainResult = await request.postComplainReport(complainJson[index], openid, contentid);
                    if (complainResult.msg == "success") {  //提交成功后反饋

                    } else {

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

顯示操作菜單 wx.showActionSheet 方法說(shuō)明

屬性 類(lèi)型 說(shuō)明
itemList Array. 按鈕的文字?jǐn)?shù)組，數(shù)組長(zhǎng)度最大為 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)用成功、失敗都會(huì)執(zhí)行）

使用這個(gè)方法，即是主流的做法，也能很好的兼容不同機(jī)型，同時(shí)給予用戶(hù)“習(xí)慣性體驗(yàn)”。

原生評(píng)論排序切換 



    
        當(dāng)前選擇：{{array[index]}}
    

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

picker組件是一個(gè)從底部彈起的滾動(dòng)選擇器，這里我們用它來(lái)切換不同評(píng)論的排序。每次切換都可以通過(guò) bindchange獲得對(duì)應(yīng)的變化，通過(guò) e.detail.value獲取用戶(hù)選擇的索引值。
官方文檔：
https://developers.weixin.qq....

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

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

5、發(fā)表評(píng)論頁(yè) 

顯示和控制評(píng)論的字?jǐn)?shù)