微信小程序-发送消息框组件

微信小程序组件之发送消息组件框 详情讲解

先看效果:

收起状态:

{BIWFU@VO)Z@QY{NDDD8AV6.png

展开状态:

WEES]3@W@Y@0)MTDM$_$DU7.png



源码:

SendMsg.wxml

<view wx:if="{{isShowImg}}" class="scSendMsgHide" bindtap="clickSendMsg">+</view>
<view class="scSendMsgForm" wx:if="{{isShowSendForm}}">
<textarea class="scSendMsgInput" auto-height="{{true}}" fixed="{{true}}"  show-confirm-bar="{{false}}" bindinput="getInputData" value="{{sendMsgData}}" cursor-spacing="20"></textarea>
<image class="scSendMsgGo" src="{{zfjimg}}" bindtap="sendMsg"></image>
<image class="scSendMsgDown" src="{{closeimg}}" bindtap="clickCloseSendForm"></image>
</view>


SendMsg.js

// sc_blog/components/SendMsg/SendMsg.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
    
    },
    
    /**
     * 组件的初始数据
     */
    data: {
        msgimg:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACRklEQVRYR+2XMU8UURDH/zOL2pAAi43aaI49QyKNiRZU0mgv0UTjF+D2LtFI79ljNLnb4wsYTSDaa4MVhSY2mBBvuUijNrJAco3KvjFvuT13AS+77MEV3it35838Zt7MezOEHi/qsX0cCDBUdS8bjByAcyAMZYIUbAP46is0tovWx7269gGMOmtFRTJHwKlMhvdsFuAnC81u2GPV6K8YgOm410F4EwgQyqRkxVfkZQExWExhmoCgHOgR3PBs622osw0wUlmdIGNgGcCgV7COJDfMmisAmuLvTG6Wxld2/WytEadxh0i90J57M9bjLF7/a6857z7SkRDhu5t27mUMwHQ+PwTxXPRntyHaToqa9eyLT+IALTrlY2qrZL1LYnx4fvW8ltuaGV9PJF9xr7GBpWiU20cQhicNgFlb+6INe4WxCz0CCJIKSZN2uPsR6AP8DxE4XW3kFfvPAbqSJNP/ysgHVsa9H8VcPfx2qCTUtc5yYgmQoOaTL1pX9HsqekccCqCTwdbd3i/DfgR6GYH6+923IH81SXV0vQr0HaENR2u9E0hngJp7H8BTEpnesPOvk3iUVmbUqd8UolcAHngF61m8Iam5twAsHEdLBuC2V7AWYwB6FmDGsm7Hk77vaSOgLy7dniuFyXBGiHW/eiYQkkqgmFAWxXVR6ntaQ1F5Yj5DrPJhW05CpehssK/9bs0G+pwGsxg+YG8TgunoTBA7gugGPSOAT14i7JwFczYQpZqCgW9Qvz6Fs0AsQl32MrW6I5mA0lD8AYYgtTB13VENAAAAAElFTkSuQmCC",
        zfjimg:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAgCAYAAACVU7GwAAADeUlEQVRYR82WTWhcVRTHz3kzmDRDQFwotJskVVdVIthCSkpb+xEMxNZEhygpSpMUS9pZzTsvExDeIjRz733ZJK0ggtCFC8VGcOMiokvBhQtFF6JUuuiiXbSL8hgsd0454U2YzuebzkvTAwOPueec+3vn/N+5F+EZMaXUIQCYY+Zl3G0mY8wIM88BwHkAuElEQ7sGFQTBqLV2DhE/qirMl0Q0+9ShtNZHpU0AMFPbJWae8Tzvq6cGZYx5K2rTB80kw8z7PM+7veNQSqlTUhlEzLbSLzP/43neK+KzY1BBEIyVy+V5AJiK+TF9TkSf7AiU1nocAATmbEyYits0EX2dKJQxZoKZBWaiBczbAPANAPTX+vT29r6Yy+XuJgKllDqLiAIjFWplLwPAFwBwvMFXt62nrqCCIJi01l5AxLF2bQrDsCeTySwzs9vE9xoRXaqsdSx0rfX7AHABAE62gwGAh0T0nDEmy8xbemlkjuNM5fP5jY6hisXitOM4AlNX/iZ7/UlEB4rF4muO4/ze6gWstS8UCoV7saGMMR8ys8DIJI5r3xHRpDEmw8wPWgVVz6e2UEqpc1IZZh6NSxL5aSLy5FlrXY4xC9eJKFe9R52mtNYfR5oZ6RAGEPGy67pXI6BfAeBguxzMfMbzvO8bQimlZhFR2iT3miex94joRgT0GQBcjJMkk8n0LywsPNZiNMbMR5p5M06SRj6IeNh13V8ioDwAmDi5GulJ4rbat7a21lMqlaRK8jsQJ2HFx1o7WCgU/ouA5Jz7toP4Oj1tQ9UmiWaR3HdkSqebbHI/DMOXfN//X9ZXV1ffsNb+1gEQOI4zns/nf6iNaTs8tdZHmHlSABHx1SjBH0T0eiWZ7/vP9/X1bc+ZuGBhGO7xfb/UMVR1gNZ6v8AR0Xr1/0qpfxFxKC6M+DXTU9P2dZJcay0j4F0A2NtJHAA01FMiUBUQrfUwALwTAcpzSyuXy+OLi4t1euoaamVl5Vg6nf7Ldd07NW0eZuZjiCgfilyH62xgYCCdzWZto7W2Qm/1ugKVSqU2EHGTmTettT9WxkN1BSNAOTtPA0BfKz0lUqlUKvVzBYCZr3ueJ8dUQ5MWR4BDtedddUASlapA3QrDcND3fTmEu7LEoBDxhOu6P3VFEwUnBbVMRJ8mAZSUpq4Q0eGkgBKBYubbS0tLfycJ9QjUM1zmk2NXrAAAAABJRU5ErkJggg==",
        closeimg:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEMklEQVRYR8VXUWgcVRQ9903ys9W/SlFQ1EoF/RC0Wq2oFamKohjUfBSNfrVYqRCz82YDgiMo2X2za1BR2v30Q8FaWiuKTRFri9XGKiootFgVhUqxf7qTj2TelRtmZHZ2dmc2DfhgIGTvu/e8d8+971zCEGtmZmaLUmqMiG4DcEn8iYe/5GPmL621+6enp4+UdUtFhrOzs5cuLS1tt9ZuI6INRfbyOzOfVkq9MzIy0p6cnPxz0J6BAIIgeJGZtwO4LHYyB+Cwtfa4UupcGIbn5P+VSmWdtXadUmozgK0A7o3tzxJR23Xdl/qB6AvAGHMUwB3xxrZSql2tVr8pcwPNZvMma60Al0/WMa31nXl7cwEYYySnawHMK6V2lg2cDRADeQvALQDOa62FN12rB4Ax5lcAVxLRh67rPlzmxEU2QRAcZOaHAPymtb4qbd8FwBjzHoDHAcxqrZ8vcjzM78aYVwFMAtirtR5P9v4HICacD+CA1npsGOdlbY0x+wE8QkR+QsxlAFJqi4uLJ4XtSqmNK815EZCYExLn7Ojo6EYp0WUAqdO3tdY7csh0XRRFzy4sLOzyfd8OCtRsNsV2l+M4b1Sr1Z+ytsaYPVIdyS0sA2g0GmeI6Op+p280Gm8S0U5JDxE94bpuJw+EBLfWCo+uZ+bdnuc906cyTjLzL57nrSdjzAMAPhpUq77vq0qlsk/yB+ATpdST1Wr1fNp5OjiAH5VS43k3IHtSPeZBAbAbwI40MfJOFwTBGmZ+H8D9AI44jjMxNTX1h9gOEzyT8j0CYB7Azdba22u12vGC/K611u4FsAXAV47jPMXMI8m1F5088V2v1zcrpb4A8LUAWG48AK7RWp8pYnKr1bo8iiLJ861E9L0AkJyXDR6nYD2An6UxCYB/AKwJw/Bi3/fl78LVarU2yKmZ+YbYeGDOsw5937+oUqn8DaCzWgB+YOZxz/NOFaIHkAUwVArq9foVSilJwaZMCuYdx3ksIeYgIMaYrhQMS0KphLsAnJBKSJOQiI4S0aPZEs2C6SJho9F4jYieA+BqrZv9kEsZAtjHzPcB+NxaO1Gr1X7PKcO5MAzHfN8P+/kyxlSlATPz6yQ6z3GczwDMaa3Fec9KNyIiOiTdcFAjIqIPXNeVppW7jDGHRDVFUXR30opPid7r14qDIDDM7A7TigG8q7XeNqAVn/Y879rSjxEzP93pdGplHiNr7StE9F2eFsx9jP735zjTn+e11pvK1POwNsaYE6IPewRJ4ih5pVZTDya+U7qwSyHnidJEEa+aLkzpwR5l3E+WJ93xgFLq5ZVKtFiCvRDriB5FLLczaDBJFLLYXehg0qWE09wZdjQ7RkSfRlF0OG80cxxnKzPfk5qoVj6aJShTw+mE6MYyzBe9p5R6+4KH02ywWD/KtHRj3ngO4FsAB7XWH5cBKjb/AhOmjkxf+gDcAAAAAElFTkSuQmCC",
        isShowImg:true,
        isShowSendForm:false,
        sendMsgData:""
    },
    
    /**
     * 组件的方法列表
     */
    methods: {
        clickSendMsg:function() {
            this.setData({
            isShowImg:false,
            isShowSendForm:true
            });
        },
        clickCloseSendForm:function(){
            this.setData({
                isShowImg: true,
                isShowSendForm: false
            });
        },
        getInputData:function(e){
            this.setData({
                sendMsgData:e.detail.value
            });
        },
        sendMsg:function() {
            let _this = this;
            _this.triggerEvent("scSendMsgEvent", _this.data.sendMsgData);
                _this.setData({
                sendMsgData:""
            });
        }
    }
})

SendMsg.wxss

.scSendMsgHide{
    position: fixed;
    right: 8px;
    bottom: 52px;
    width: 40px;
    height: 40px;
    background-color: #177FFF;
    border-radius: 20px;
    color: white;
    font-size: 25px;
    text-align: center;
    line-height: 40px;
    box-shadow: 1px 1px 6px rgba(7,118,253, 0.36);
}

.scSendMsgForm{
    position: fixed;
    right: 0px;
    bottom: 48px;
    width: 100%;
    min-height: 55px;
    background-color: #F2F2F2;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.36);
}

.scSendMsgInput{
    border: 2px solid #C6C6C6;
    width: calc(100% - 110px);
    min-height: 35px;
    border-radius: 6px;
    margin-left: 10px;
    margin-top: 7.5px;
    padding-left: 5px;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px;
}

.scSendMsgForm > image{
    width: 30px;
    height: 30px;
    margin-left: 8px;
    margin-top: 10px;
    /* background-color: red; */
    display: inline-block;
    vertical-align: top;
    border-radius: 6px;
}

SendMsg.json

{
    "component": true,
    "usingComponents": {}
}


其中核心知识点解析:
1、let _this = this;这句语句的作用:因为在JS中this是一个特殊的对象,它会跟着执行的环境变换而改变指向对象,所以在我们JS回调方法中想要使用当前的对象上下文就需要将this赋值给另外的当前局部变量这样this发生了改变,在回调函数中仍然可以调用当前对象。当然在回调函数中想不复制直接使用this访问当前对象还有其他方案,比如:1、使用用箭头函数作为回调函数,这样就会绑定在当前作用域对象上。2、使用(function(){}).bind(this);也可以达到相同的效果,但是不能使用apply和call来绑定当前作用域因为这两个函数是立即执行,而bind函数是返回一个绑定当前作用域的函数。


2、_this.triggerEvent("scSendMsgEvent", _this.data.sendMsgData);这里_this.data代表的事当前组件的内部变量对象,所以_this.data.sendMsgData是在取sendMsgData的值。 _this.triggerEvent(组件外部触发事件名,传给逮捕事件的参数);此函数是用于触发一个绑定在组件上的事件,并且传入一个参数到对应的事件中去。在组件中的用法:

在使用组件的页面将组件绑定为 send-msg

"usingComponents": {

    "send-msg":"SendMsg/SendMsg"

}

然后在使用组件的页面调用

<send-msg bindscSendMsgEvent="sendMsg"></send-msg>

其中在微信中使用bind绑定一个事件,之前我们在组件中使用了triggerEvent出发了一个scSendMsgEvent,所以我们这里在组件的触发事件就是bindsxSendMsgEvent,其中bindsxSendMsgEvent的值就是在当前页面中注册的方法sendMsg,

所以我们在当前页面的methods对象中添加sendMsg方法:

methods: {

    sendMsg:function(e){

        let dataStr = e.detail;

    }

}

这里获取组件中传过来的数据就是使用e.detail就行了。


3、小程序的事件触发,当小程序触发一个事件是如果没有手动的传入参数则系统会自动将当前的组件的BaseEvent对象传入到对应的方法中作为参数。例如在函数中获取标签的value时就可以event.detail.value;


以上内容均为自创,如有不正确之处请联系我进行修改,谢谢 -------Scarecrow

阅读数:50
如有疑问请与我联系:点击与我联系