公司H5项目开发-知识点总结

需求号：story79936 -- 橘脉公众号：

要点：

1.  埋点的添加： 

引入trace文件：common/js/fanli/trace/ubt.js，然后在 <a>标签内添加 data-spm

 [code]:

<div class="bottom-sec">
  <div class="activity-btn J_copy_btn" @click="takeActivity" data-clipboard-action="copy" data-clipboard-target="#copyText">
     <a href="javascript:void(0);" data-spm="page_name.h5.pty-bmcjhd~module-hdyg~std-79936" style="color: #fff;">报名参加活动</a>
  </div>
</div>

2.  获取页面URL参数值：

Fanli.Utility.getUrlParam('id')

3. MODULE.add()命名空间

需求号：story83790 -- 砸金蛋：

要点：

1. UBT 埋点的添加：

引入trace文件：common/js/fanli/trace/ubt.js，然后在对应的方法内添加： UBT.track('xxxx')

 2. 返利app内，关闭当前网页：

setTimeout(() => {
    window.location.href = 'ifanli://m.51fanli.com/app/action/closewv'
}, 200)

需求号：story84876 -- 京东中间页：http://shop.fanli.com/h5/jd

要点：

1、 fanli右上角导航：

function initBarIcon() {
            if (Device.Utility.Browser.versions.fanliapp) {
                fl.init();
                fl.ready(function () {
                    fl.customizeNavBar({
                        "title": { "imgUrl": CURRENT_PROTOCOL + "//static2.51fanli.net/shop/h5/images/jdcenter/app-title.png"},
                        "btns": [{
                            "type": 1,
                            "text": "返利规则",
                            "imgUrl": CURRENT_PROTOCOL + "//static2.51fanli.net/shop/h5/images/index/appicon/icon-search.alpha.png",
                            "cb": "appbarSearchCallBack",
                            "news": 0
                        }]
                    });
                });
 
                window.appbarSearchCallBack = function () {
                    UBT.track("page_name.h5.pty-flgz~std-47305");
                    // CSS_JS_TIME
                    
                    setTimeout(function(){
                        if(detailNew){
                            var ifanli =  'ifanli://m.fanli.com/app/show/web?url={0}&wb=2&nonav=1&noback=0'.format(detailNew);
                            Fanli.Utility.bridgeApp(ifanli);
                        } else {
                            window.location.href =  "https://m.fanli.com/shop/detail/id/544";
                        }
                    }, 300)
                }
            }
        }

2、搜索框滚动词条：

"//common/libs/swiper/index.css"

"//common/libs/swiper/index.js"

html:

<div class="swiper-container">
                    <div class="swiper-wrapper">
                        <notempty name="search_word_list">
                            <volist name="search_word_list" id = "each">
                                <div class="swiper-slide" data-id="{$each.id}" data-link="{$each.link}">{$each.word}</div>
                            </volist>
                        </notempty>
                    </div>
                </div>

js:

var sliderLen = $('.swiper-container').children()[0].children.length
    if (!sliderLen) {
        $('.J_search_input').attr('placeholder', '粘贴关键词或商品标题查看返利')
    } else {
        $(".swiper-container").css("opacity", 1)
        $('.J_search_input').removeAttr('placeholder')
    }
    var firstSlideDom = $('.swiper-container').children()[0].children[0]
    var currentSwiperId = firstSlideDom ? firstSlideDom.getAttribute("data-id") : ''; // 当前的滚动词条id
    var currentSwiperKeyWord = firstSlideDom ? firstSlideDom.innerHTML : ''; // 当前的滚动词条
    var currentSwiperLink = firstSlideDom ? firstSlideDom.getAttribute("data-link") : ''; // 当前的滚动词条的link
    var isLoop = (sliderLen > 1) ? true : false
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        spaceBetween: 0, // slide的间距px
        speed: 300, // 速度
        loop: isLoop, // 循环
        autoplayDisableOnInteraction : false,
        autoplay: {
            delay: 3000
        }
    });
    mySwiper.on('slideChangeTransitionStart', function () {
        var txt = $('.swiper-slide-active').html();
        var id = $('.swiper-slide-active').attr("data-id");
        var link = $('.swiper-slide-active').attr("data-link");
        currentSwiperKeyWord = txt;
        currentSwiperId = id;
        currentSwiperLink = link;
 
        UBT.track("page_name.h5.pty-kwbg~id-" + currentSwiperId + "~std-84876")
    });

3、优惠券样式：

"//common/libs/fmu/ui/coupon.css"