关于带分享功能的底部按钮组件设计思考

[annvov]

---

title: 关于带分享功能的底部按钮组件设计思考
date: 2017-09-27

需求

目录结构

关于底部分享按钮的设计

起初设计

  <div on-click={this.openShare()}>立即邀请 共享黑卡时刻</div>
  <share></share>

// share 组件
{#if isBrowser}
    <browser on-hide="{this.hide()}"></browser>
{#else}
    <wxappshare on-hide="{this.hide()}"></wxappshare>
{/if}

  原本设计思路是点击按钮——>调用share组件的openShare方法this.$refs.share.openShare() ——> 根据isBrowser 调用 browser组件的share方法或者调用wxappshare组件的share方法。这样导致设计的层级很深

改进设计

  后来想到我们本质的需要就是click直接有个share组件，share组件直接会触发openShare方法

  点击 ——> isOpenShare 为true ——> 展示share组件 ——> share组件内部判断浏览环境 ——> 展示browser或者appwxshare

  利用if的true或者false会直接影响组件的生成与销毁，所以我们只需要把我们各环境需要的组件的share方法写在组件的init里面去触发，所以代码就变为

// shareBtn/index.html
<section on-click="{openShare = true}">
    立即邀请  共享黑卡福利
</section>
{#if openShare}
    <share on-hide="{openShare = false}"></share>
{/if}


// --------------------------------------
// widget/share/index.html
{#if isBrowser}
    <browser></browser>
{#else}
    <wxappshare on-hide="{this.hide()}"></wxappshare>
{/if}


// --------------------------------------
// widget/share/index.js
/**
 * @func: 不同环境的分享组件
 */
define([
    'pro/widget/BaseComponent',
    'pro/extend/util',
    'text!./index.html',
    './browser.js',
    './appshare.js'
], function(BaseComponent, _, tpl, browser, wxappshare) {
    var ShareComponent = BaseComponent.extend({
        template: tpl,
        config: function(data) {
            data.isBrowser = !(_.isKaolaApp() || _.isInWeixinApp() || _.isInYixinApp());
        },
        init: function() {
        },
        hide: function() {
            this.$emit('hide');
        }
    })
    .component('browser', browser)
    .component('wxappshare', wxappshare);

    return ShareComponent;
});

// --------------------------------------
// widget/share/appwxshare.js 不需要tpl
/**
 * @func: 分享按钮组件
 */
define([
    'pro/widget/BaseComponent',
    'pro/components/share/onshare' //这个组件里面封装了微信和app分享
], function(BaseComponent, Share) {
    var WxAppShareComponent = BaseComponent.extend({
        config: function(data) {
            this.supr(data);
        },
        init: function() {
            this.onShare();
        },
        onShare: function() {
            this.__appbridge = Share._$$Share._$allocate({
                cbAppShare: this.__cbAppShare._$bind(this),
                cbWxShare: this.__cbWxShare._$bind(this)
            });

            this.__appbridge._$shareBtnClick(window.shareConfig, {
                imgUrl: location.protocol + '//haitao.nos.netease.com/edaa3dc1c3944a378cab10917cb5b3f6.png'
            }, true);

            this.__appbridge._$addEvent('wxMaskHide', function() {
                // 微信里蒙层消失回调
                this.$emit('hide');
            }._$bind(this));
        },
        __cbAppShare: function() {
            this.$emit('hide');
        },
        __cbWxShare: function() {
            this.$emit('hide');
        }
    });

    return WxAppShareComponent;
});


// --------------------------------------
// widget/share/browser.html
<div class="n-share-browser">
    <div class="title">长按复制以下链接分享给好友吧！</div>
    <div class="link">{link||''}</div>
    <div class="b-btn btn-1" on-click={this.comfirm()}>确定</div>
</div>


// widget/share/browser.js
define([
    'text!./browser.html',
    'pro/components/modal/modal'
], function(tpl, Modal){
    var ShareModal = Modal.extend({
        content: tpl,
        config: function(data){
            this.supr(data);
            this.data.winbodyClass = 'winbody browser-share';
        },
        init: function(){
            this.supr();
        },
        comfirm: function(event){
            this.hide();
        }
    });

    return ShareModal;
});

最终效果

微信环境

kaolaApp

浏览器

总结

• 这样设计以后其他页面底部也有这种按钮时，复用性特别高
• 转变原先的思路，归根结底还是用数据去驱动组件