zoukankan      html  css  js  c++  java
  • 【营销App】—— react/ant design mobile项目爬坑

    一、H5制作 - 图片文本的动画效果

    bug:打开一个模板,添加图片,添加动画效果,若先选定动画效果,再调节动画时间和延迟时间,则动画和延迟时间没有改变;若先调节动画时间和延迟时间在选定动画效果,则动画和延迟时间可以实现。

    期望:先选定动画效果,再调节动画时间和延迟时间,动画和延迟时间也能实现。


    问题原因:原代码中的动画数据保存时机设置在选择动画类型的时候

                        只能先选时间再选动画,如果先选动画再选时间,后选的时间就保存不了了

    解决方法:①将slider组件的onChange方法关掉,只保留onAfterChange方法,只在值改变完成后更新组件

                        ②时间值改变之后,先保存当前的时间值存入before-xxx中,然后再改变state中对应的时间值

                        ③componentDidUpdate方法中监测当state中now存在,且两个时间值的前后state不同时保存数据

    二、v网平台 - 背景音乐自动播放

    bug: 音乐设置,开启启用背景音乐、背景音乐自动播放,选择“Intro”作为背景音乐,回到v网平台,没有自动播放音乐,需要点击暂停播放音乐再播放音乐,才能听到背景音乐。

    期望:音乐设置,开启启用背景音乐、背景音乐自动播放,选择音乐后,回到v网平台,能自动播放音乐


    问题原因:①原代码只考虑了同时设置自动播放、选择音乐使用时,可正常请求接口改变数据

                         ②已选择了音乐使用,单独设置自动播放时,没有请求接口改变数据

    解决方法:添加useBgm、defaultAuto两个状态

                        存入新选择使用的音乐uri、打开设置界面前默认设置的是否自动播放

                        在组件更新时,判断“自动播放”状态有改变,且有“使用”的音乐时请求接口,存入“自动播放”状态

    if(this.props.autoPlay != defaultAuto && (vwebBgm || useBgm))
    

    三、参与的活动 - 活动详情页返回逻辑  

    bug:个人中心参与的活动,点击缩略图进入活动详情页,再点击左上角的返回按钮,返回的页面是活动推广列表页面

    期望:回到参与的活动列表页面 


    App.js添加ViewActBack状态的传入

    <ViewActivity change={this.changeRouter.bind(this)} 
                          activity_id={this.state.activity_id}
                          handleImageUpload={this.handleImageUpload.bind(this)} 
                          ViewActBack={this.state.ViewActBack}/>
    myActivity文件夹下listItem.js点击缩略图跳转传state多传一个ViewActBack
    onClick={() => {this.props.isjoin && this.props.change('ViewActivity', {activity_id:data.promotionId, ViewActBack: 'myJoinAct'})}}
    viewActivity.js中back方法添加判断条件
    back() {
        if(this.props.ViewActBack == 'myJoinAct'){
           this.props.change('MyJoinAct',{activity_id:null, ViewActBack: null});
        }else{
           this.props.change('ActivityList',{activity_id:null});
        }
    }
    

      

    四、我的订单 - 已有快递单号的待收货和已完成订单,快递单号旁需要一个复制按钮,点击复制快递单号



    解决方法:添加按钮 使用clipboard组件库

    import ClipboardJS from "clipboard"; 
    
    initCopy = (trNum) => {
         this.clipboard = new 
         ClipboardJS(document.getElementsByClassName('MyOrderDetail_copy')[0], {
               text: function(trigger) {
                      // console.log(trigger, url, 'url')
                     return trNum;
               }
         });
    
        this.clipboard.on('success', function(e) {
               // console.info('Action:', e.action);
               // console.info('Text:', e.text);
               // console.info('Trigger:', e.trigger);
    
               Toast.info('复制成功', 1);
        });
    
        this.clipboard.on('error', function(e) {
               Toast.info('复制失败,请手动进行复制', 1);
               // console.error('Action:', e.action);
               // console.error('Trigger:', e.trigger);
        });
    }
    

    五、我的粉丝 - 点击粉丝总数和粉丝分类 没有请求

    问题原因:点击之后只执行了跳转页面,在刚进入页面时,没有执行调用接口获取粉丝数据的方法

    解决方法:myFansList.js中

    componentDidMount(){
        this.fansList()
    }  

    衍生问题:右上角选择粉丝类型展示数据中,点击“全部”没有数据

    问题原因:选择组件获取到的数据为字符串,需要转为数字类型,再执行方法调用接口

    selectValue:Number(v)
    

    六、我的订单 - 待收货状态但后台未填写快递单号时,物流信息显示“待揽件”


    <p style={{fontSize:"12px",color:'#999999'}}>{data.status == 1 && !data.trNum ? '待揽件' : `快递单号: ${data.trNum}`}</p>

     

    七、设置 - 允许他人复制我的平台

    bug:关闭允许他人复制我平台后,再次回到设置页面查看,按钮显示开启。

    期望:关闭 允许他人复制我的平台的时候,设置页面显示按钮关闭;开启 允许他人复制我的平台的时候,设置页面显示按钮打开。


    问题原因:①原代码请求接口时把RAP上的BODY粘贴到了代码中,导致请求不到正确数据

                        ②缺少获取当前设置的“是否允许他人复制”的状态相关代码

    解决方法:修改并增加以上

     
    八、H5制作 - 增加页面限定在10张,超过10提示“页面数量已达上限”                  

    解决方法:增加页数限定 

    if(leng > 9){
      Toast.info('页面数量已达上限', 1);
      return
    }else{
      //原增加页面代码
    

    九、v网编辑 - 项目、文章制作这些所有 需要点击提交的  

    bug:网络差的时候 添加产品时多次点击提交 会同时发布好几个产品 


    解决方法:五个编辑部分,所有的提交或发布submit方法中,执行调用接口提交数据前,添加flag阻止重复点击重复调用 

    let isClick = true;     // 放在submit函数前
    
    // submit函数中:
    setTimeout(() => {
       isClick = true;
    }, 1000);     //一秒内不能重复点击
    

    十、音乐设置 - 点击使用,使用成功,使用按钮应变灰色,文字改为已使用 

    bug:现在是点击使用没有什么反应,用户可能不知道已经成功使用了该音乐 


    问题原因:没有写点击“使用”按钮除设置音乐以外的代码

    解决方法:①增加“已使用”的按钮css,

                        ②重写点击“使用”按钮的触发方法,更改到父组件位置

                        ③添加userIndex、userType状态获取、传入、判断当前选中项的使用状态

                        ④调用两个接口,获取V网背景音乐与H5模板设置的音乐,添加vwebBgm、editH5Bgm

                        ⑤判断当前为已使用状态时,点击按钮不走接口,直接return,实现按钮禁用

    十一、平台编辑 - 更多资讯处,缺少浏览量的显示  

    期望:安卓截图 

     


     解决方法: 修改样式与安卓统一,平台展示与平台编辑处样式统一,都添加了浏览量显示

                         原平台处中添加eventViews并填入页面

    this.files.push({
           url: setFileHost() + this.events[i].pic.icon[0].uri,
           id:  this.events[i].id|| 0,
           title:  this.events[i].title,
           eventViews:  this.events[i].eventViews||0,
           optCreateTime:  this.events[i].optCreateTime
    });
    

      

    十二、文章制作 - 文章管理页面 

    bug:  ①已发布、审核中、未通过、草稿这四个分类旁需要统计该分类下的文章总数;

             ②文章标题显示两行,超过两行用省略号;

    期望:安卓截图


    问题原因:原代码没有的新需求,需要和安卓统一

    解决方法:①进入页面和搜索时,调用接口获得4类文章的数量存入数组,判断listTotal.length为4时数字变化

                        ②限制宽度、高度,文字超出宽度换行,文字超出两行时显示省略号,判断字节数设置不同top

     注释:目前【文字超出两行时显示省略号】功能只有谷歌webkit内核支持 

        display: -webkit-box;
        /* autoprefixer: off */  
        -webkit-box-orient: vertical;  
        /* autoprefixer: on */  
        -webkit-line-clamp: 2; //可以显示的行数
    

    十三、活动 - 活动详情页

    bug:当购买用户数量为2时,只显示了一个购买用户


    问题原因: ① antd mobile组件的<Carousel>走马灯UI组件,内容必须是大于一个的。

                         ② 原代码通过两层循环得到代码片段<Fragment>中的<div>元素,

                              由于最外层buyer是通过构造特定数据结构得到的二维数组,

                              经过两层循环,得到的代码片段里固定为两个购买者的<div>元素。

                         ③ 原代码处理buyer时,缺少对data.buyer数组元素只有两个时的判断处理,

                              此时<Carousel>组件包裹的只有一个固定的两个购买用户的div,

                              对比不同情况发现,此时<Carousel>组件中原有的div->ul->li->轮播元素中的li层缺失,

                           (div class="slider-frame"  ->  ul class="slide-list" -> li class="slider-slide")

                              没有了滑动元素,因此走马灯滑动失效,(设置显示dot也会只有一个)

    解决方法: 

    if (data.buyers.length == 2) {
        buyers = [data.buyers, [data.buyers[1], data.buyers[0]]];
    }else{
    


    注:转载请注明出处

  • 相关阅读:
    定位小结
    定位知识点
    css属性书写顺序
    清除浮动及清除浮动的方法
    margin合并和塌陷问题
    css特性-层叠性,继承性,优先级
    css属性简写
    css布局之双飞翼布局
    css布局之圣杯布局
    css布局之等高布局
  • 原文地址:https://www.cnblogs.com/ljq66/p/11951275.html
Copyright © 2011-2022 走看看