刪除工程依賴

rm -f /node_modules

1.適配

rem與px互換

1rem等于html根元素設(shè)定的font-size的px值倔幼，假如我們?cè)赾ss里面設(shè)定下面的css油狂。

html{font-size:14px}

那么后面的CSS里面的rem值則是以這個(gè)14來(lái)?yè)Q算秀仲，例如設(shè)定一個(gè)div寬度為3rem,高度為2.5rem.則它換算成px為width:42px.height:35px践图，同理朝聋，假如一個(gè)設(shè)計(jì)稿為寬度42px,高度為35px，則換成成rem汰扭，則是42/14=3rem稠肘，35/14=2.5rem。

如果css里面沒有設(shè)定html的font-size萝毛，則默認(rèn)瀏覽器以1rem=16px來(lái)?yè)Q算项阴。

現(xiàn)在使用

常規(guī)適配

rem實(shí)現(xiàn)移動(dòng)端自適應(yīng)

2.定位和樣式問題

1.子元素相對(duì)父元素居中,相對(duì)定位

<style>
.album-img {
    position: relative;
    display: flex;
    justify - content: center;
}
.diary-control {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify - content: center;
}
</style>

2.設(shè)置字體垂直居中

line-height: 100%;

3.圓角設(shè)置

設(shè)置寬度一般，圓形

border-radious: 100%;

3.div 嵌套 img 標(biāo)簽笆包，底部有白底

1.是圖片的底就得重新做圖
2.是樣式的底的話就把樣式的背景色去掉
3.子標(biāo)簽沒有顏色环揽，其他標(biāo)簽有顏色也會(huì)覆蓋.

4.div子標(biāo)簽水平排布

<style>
.userHeader {
    display:flex;
    img {
    margin - left:1.63 rem;
    background - color:lightgray;
    width:3.63 rem;
    height:3.63 rem;
    border - radius:1.82 rem;
}
.label {
    margin - top:1.06 rem;
    margin - left:1.63 rem;
    color:#FFFFFF;
    flex:1;
    text - align:center;
    justify - content:center;
}
}</style>

5.React添加百度統(tǒng)計(jì)代碼

• 頁(yè)面埋點(diǎn)
• 點(diǎn)擊事件埋點(diǎn)

語(yǔ)法

_hmt.push(['_trackEvent', category, action, opt_label, opt_value]);

舉例

_hmt.push(['_trackEvent', 'music', 'play', 'Hey Jude']);

category    必選  String  要監(jiān)控的目標(biāo)的類型名稱 不填、填"-"的事件會(huì)被拋棄
action  必選  String  用戶跟網(wǎng)頁(yè)進(jìn)行交互的動(dòng)作名稱  不填庵佣、填"-"的事件會(huì)被拋棄
opt_label   可選  String  事件的一些額外信息   不填歉胶、填"-"代表此項(xiàng)為空
opt_value   可選  Number  跟事件相關(guān)的數(shù)值

實(shí)現(xiàn)代碼

componentDidMount() {
      this.baiduStatistics();
      this.handlePageCounts();
  }

 /**
 * 百度統(tǒng)計(jì)初始化
 */
export function baiduStatistics() {
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://#/hm.js?18fd37d414145c525285e6cf0f11dada";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
}
  
  //頁(yè)面訪問量
  handlePageCounts() {
    setTimeout(function(){
      window._hmt.push(['_trackEvent', "pageName", "頁(yè)面訪問", "訪問量",1]);
    },500)
  }

/**
 * 發(fā)送事件分析
 * @param pageName  頁(yè)面名稱
 * @param action    動(dòng)作
 * @param flag      標(biāo)簽/id
 */
export function baiduStatisticsBehaviour(pageName, action, flag) {
  if(typeof window._hmt == 'undefined') return;
  window._hmt.push(['_trackEvent', pageName, action, flag,1]);
}
//使用：
baiduStatisticsBehaviour('XXX落地頁(yè)','行為描述','標(biāo)記名稱')
//注意，不同的域名巴粪，他的token值是不一樣的,需要區(qū)分,頁(yè)面訪問展示很快通今，點(diǎn)擊事件需要兩個(gè)小時(shí)以后才可以展示在百度后臺(tái)數(shù)據(jù)上

參考文檔

6.React加載帶<br/>的字符串

let data = "1.在語(yǔ)音日記中可以記錄生活、故事肛根、詩(shī)詞辫塌、繞口令、笑話派哲、外語(yǔ)璃氢、朗誦等。<br/><br/> 2.每人每天最多記錄兩條日記狮辽，包括已刪除的日記一也。<br/><br/>3.日記時(shí)長(zhǎng)限制在10秒至3分鐘。"
<div className="activityDetail">
    <div className="detail" dangerouslySetInnerHTML={{ __html: data}}>
    </div>
</div>

7.去掉微信簽名-方便調(diào)試

componentDidMount() {
    let sign = getQueryString('sign') || Cookies.get('sign')
    //if (sign) {
      this.requestList()
      this.initPlay()
      advert({
        operate: 'diarymission',
        label: 'open_diary_page',
      }).then((res) => {})
    //}
  }

8.圖片添加自旋轉(zhuǎn)動(dòng)畫

<style>
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

9.react使用引入svg的icon喉脖；svg圖形制作

https://blog.csdn.net/weixin_34319817/article/details/86017954

10.數(shù)據(jù)驅(qū)動(dòng)UI椰苟，根據(jù)返回?cái)?shù)據(jù)創(chuàng)建多個(gè)標(biāo)簽

//用戶頭像For
import UserHeader from '../../components/groupbuy/UserHeader'
//定義數(shù)據(jù)源
persons: [
          "周家大小姐",
           "陳家大小姐",
          "王家大小姐",
        ]

<div className="buyNumbers">
    <div className="nums">
      {
        persons.map((person) => {
          console.log("person"+person);
          return (
            // 對(duì)map 循環(huán)出來(lái)的每個(gè)屬性插入標(biāo)簽元素
            <UserHeader  name={person}   />
          )
        })
      }
    </div>
    <div className="desc">{"等N人已購(gòu)買"}</div>
</div>

11.React 單頁(yè)應(yīng)用中，使用less寫樣式树叽，公共樣式文件重復(fù)載入(樣式名沖突導(dǎo)致界面引用錯(cuò)亂)

解決辦法

react中css設(shè)置作用域
Less 中的作用域與編程語(yǔ)言中的作用域概念非常相似舆蝴。首先會(huì)在局部查找變量和混合，如果沒找到，編譯器就會(huì)在父作用域中查找洁仗，依次類推

//定義scope
@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#mynamespace { 
    .home {} 
    .user {} 
}
這樣我們就定義了一個(gè)名為 mynamespace 的命名空間层皱，如果我們要復(fù)用 user 這個(gè)選擇器的時(shí)候，
我們只需要在需要混入這個(gè)選擇器的地方這樣使用就可以了赠潦。#mynamespace > .user叫胖。

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;

    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

第二種

在標(biāo)簽名后?-container
例如

<style>
.special-container{
  padding: 0 1rem;
  .banner{
    height: 100%;
    width: 100%;
    margin-top: 1rem;
    box-shadow: 0 .125rem .625rem 0 rgba(0,0,0,0.10);
    border-radius: .375rem;
    img{
      width: 100%;
      height: 8.4375rem;
      border-radius: .375rem;
    }
  }
  }
</style>

12.測(cè)試開發(fā)之switch-case語(yǔ)法

1.props定義屬性:pageState

constructor(props) {
    super(props);
    this.state = {
        pageState: "0",        
    }
  }

2.render 修改

<div>
    {( ()=>{
        switch(this.state.pageState){
          case "0":return <img src={gift1}/>; break;
          case "1":return <img src={gift2}/>; break;
          case "2":return <img src={gift3}/>; break;
          default:return null;
        }
    }
    )()}
</div>

3.使用:修改pageState數(shù)值,點(diǎn)擊保存即可

13.獲取Url拼接的參數(shù)

// 獲得URL參數(shù)
const query_params = new 
//問號(hào)之前的內(nèi)容
URLSearchParams(this.props.location.search);
console.log("參數(shù)"+query_params);
let state = query_params .get('pageState');
console.log("pageState:"+state);
this.setState({
  pageState: state,
});

14.URL跳轉(zhuǎn)

封裝跳轉(zhuǎn)方法

export function urlJump(params) {
  window.location.href = window.location.protocol + '//' + window.location.host  + params
}

使用

invite = (id) => {
    urlJump("/fission/invite/" + id)
  }

15.方法名傳參數(shù)(bind)

類的方法默認(rèn)是不會(huì)綁定 this 的。如果你忘記綁定 this.handleClick 并把它傳入 onClick, 當(dāng)你調(diào)用這個(gè)函數(shù)的時(shí)候 this 的值會(huì)是 undefined
//e.preventDefault()取消事件的默認(rèn)動(dòng)作

例如她奥，如果 type 屬性是 "submit"瓮增，在事件傳播的任意階段可以調(diào)用任意的事件句柄，通過調(diào)用該方法哩俭，可以阻止提交表單绷跑。

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件對(duì)象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通過 bind() 方法傳遞參數(shù)。 */}
                <a  onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

16.KeyFrame動(dòng)畫案例-(標(biāo)簽抖動(dòng)效果)

代碼

<div className="getFreeBtn">
    <div class="btn" onClick={this.handleDownload.bind(this,'1','getFree','getFree_downloadBtn')}></div>
</div>

less樣式

.getFreeBtn {
  background:url('../../images/diary/diary_unlock_getFreeBtnBg.png') no-repeat;background-size:100%;
  width: 21.44rem;
  height: 8.1rem;
  line-height:0; 
  display: flex;
  position: relative;
  .btn{
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
    width: 21.44rem; height: 2.88rem; display: block; background: url('../../images/diary/diary_unlock_getFreeBtn.png') no-repeat;background-size:100% ;
    animation: bounce 1.2s cubic-bezier(0.67, 0.04, 0.32, 0.96) infinite forwards;
    }
}
@keyframes bounce {
  0% {
   transform: scale(1);
  }
  30% {
   transform: scale(0.8);
  }
  40% {
   transform: scale(1);
  }
  50% {
   transform: scale(0.9);
  }
  65% {
   transform: scale(1);
  }
  100% {
   transform: scale(1);
  }
 }

效果圖

KeyFrame動(dòng)畫案例.gif

17.React設(shè)置文字溢出凡资，多余顯示省略號(hào)

單行文本

<style>
  .text {
        display: inline-block;
        white-space: nowrap; //強(qiáng)制不換行
        overflow: hidden;//超出隱藏
        text-overflow:ellipsis;// [??l?ps?s] 顯示“……”
  }
</style>

多行文本

<div className="orderDesc">               
<p style={{"WebkitBoxOrient": "vertical"}}>{"多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出"}</p>
</div>

//CSS
.orderDesc {
    margin-left: 1.3rem;
    margin-right: 0.56rem;
    margin-top: 0.38rem;
    margin-bottom: 0;
    width: 11.75rem;
    height: 3.75rem;
    // background: yellow;
    p{
        
        font-size: 0.88rem;
        line-height: 1.25rem;
        text-align: left;
        color: #515151;
        display: -webkit-box;
        -webkit-box-orient: vertical;//react項(xiàng)目中發(fā)現(xiàn)并不能實(shí)現(xiàn) style={{"WebkitBoxOrient": "vertical"}}
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}

文本溢出第三種處理：flex

.v-item {
  display: flex;
  justify-content: space-between;
  p {
    margin-left: 0.5rem;
    width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
  }   
  .time{
    display: flex;
    justify-content: flex-end;
    margin-right: 0.5rem;
    width: 20%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    // background: yellow;
  }
}

18.監(jiān)聽滾動(dòng)事件改變標(biāo)簽的樣式

componentDidMount() {
    //1.添加滑動(dòng)監(jiān)聽
    window.addEventListener('scroll', this.handleScroll);
}
  /**
   * 滾動(dòng)事務(wù)
   * @private
   */
  handleScroll=(event)=>{
    //滾動(dòng)條高度
    let ctx=this;
    //可視區(qū)域高度
    let clientHeight = document.documentElement.clientHeight; 
    //滾動(dòng)條滾動(dòng)高度
    let scrollTop  = document.documentElement.scrollTop;  
    //滾動(dòng)內(nèi)容高度
    let scrollHeight =document.documentElement.scrollHeight; 
    // 距離頁(yè)面底部的高度
    const height = scrollHeight - scrollTop - clientHeight;
    console.log("clientHeight:"+clientHeight+"scrollTop:"+scrollTop+"scrollHeight"+scrollHeight+"height:"+height);
    
    if (scrollTop<100) {
      this.setState({
        isScroll: false
      })
    }else {
      this.setState({
        isScroll: true
      })
    }
}

使用

{/* 定義props isScroll 根據(jù)偏移量 設(shè)置不同的ClassName */}
<div className= {isScroll ? "fixed-joinGroup" : "group-joinGroup"} onClick={this.handleJoinGroupNow}>
    <div className="title">
        {"一鍵參團(tuán)"}
    </div>
</div>
{/* CSS樣式設(shè)置 */}
 .group-joinGroup {
     width: 100%; display: flex; justify-content: center;
      .title {
        padding-top: 0.69rem;
        padding-bottom: 0.69rem;
        width: 20rem;
        background-color: #FF1634;
        border-radius:1.38rem; line-height: 100%;
          font-size: 1rem;
          color: #ffffff;
          margin-bottom: 10px;
      }
    }
.fixed-joinGroup {
  .title {
    padding-top: 0.69rem;
    padding-bottom: 0.69rem;
    position: fixed;
    left: 0px;
    right: 0px;
    margin-left:auto;
    margin-right:auto;
    bottom: 1rem;
    width: 20rem;
    background-color: #FF1634;
    border-radius:1.38rem; line-height: 100%;
      font-size: 1rem;
      color: #ffffff;
  }
}

效果圖：

React JS 監(jiān)聽滑動(dòng)事件

19.Flex 布局相關(guān)

display: flex;//想使用Flex布局砸捏，必須使用這個(gè)屬性
justify-content: flex-end; 

1.設(shè)置單個(gè)子元素靠右

父元素設(shè)置了 flex 布局
display: flex;
align-items: center;
如何讓某個(gè)子元素靠右呢

方法一

flex: 1;
text-align: right;

方法二

margin-left: auto;

2.設(shè)置絕對(duì)居中

<div id="newInstall-body">
   <div className="title-views"></div>
</div>
//CSS
#newInstall-body{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .title-views {
        display: flex;
        margin-top: 1.13rem;
        margin-left: 0.63rem;
        margin-right: 0.63rem;
        margin-bottom: 0;
        //寬度不設(shè)置，默認(rèn)繼承父元素
        height: 4.25rem;
        background-color: red;
    }
}

3.設(shè)置圖片100%顯示

#newGuide-body{
    background: url(../../images/promotion/promotion_newInstall_bg.png) no-repeat;
    background-size:100% 100%;  
    width: 100%;
    height: 100%;
    }

4.設(shè)置標(biāo)簽內(nèi)內(nèi)容居右顯示

 .action-btn {
    display: flex;
    justify-content: flex-end;
    margin-right: 0.63rem;
    .un-shipped {
        width:5.63rem;
        height: 1.63rem;
    }    
    .shipped {
        width:5.63rem;
        background:rgba(255,220,53,1);
    }
 }

20.react中獲取input輸入框內(nèi)容的兩種方法

1.通過event對(duì)象信息的方式

<input onChange={(e)=>this.inputChange(e)}/>
<button onClick={()=>this.getInputValue} >獲取input的值</button>

inputChange(e){
    alert(e.target.value)
    this.setState({
        username:e.target.value
    })
}
getInputValue(){
    alert(this.state.username)
}

2.使用ref的方式

<div className="receiver-name">
        <input ref="name" onChange={()=>this.inputChange()} className="form-control" id="receiverName" name="receiverName" placeholder="請(qǐng)輸入收貨姓名" />
</div> 

<div className="receiver-phone">
        <input ref="phone" onChange={()=>this.inputChange()} className="form-control" id="receiverPhone" name="receiverPhone" placeholder="請(qǐng)輸入收貨電話" />
</div>  
<button onClick={()=>this.getInputValue()} >獲取input的值</button>

//數(shù)據(jù)賦值
inputChange(){
    //獲取dom節(jié)點(diǎn)元素
    //1.添加ref屬性
    //2.使用this.refs.receiverName獲取dom節(jié)點(diǎn)
    let name = this.refs.name.value;
    let phone = this.refs.phone.value;
    let address = this.refs.address.value;
    console.log(name,phone,address);
    this.setState({
        receiverName:name,
        receiverPhone:phone,
        receiverAddress: address,
    })
}

handleSubmit(){
   let message = "姓名："+this.state.receiverName+"\n"+"手機(jī)號(hào)："+this.state.receiverPhone+"\n"+"地址："+this.state.receiverAddress
   console.log("message:"+message);
    this.onOk();
}

21.復(fù)制操作

1.表單簡(jiǎn)單復(fù)制操作-(只支持瀏覽器)

<p>點(diǎn)擊復(fù)制后在右邊textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="測(cè)試文本"/>
<input type="button" id="btn" value="復(fù)制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        var inputText = document.getElementById('inputText');
        var currentFocus = document.activeElement;
        inputText.focus();
        inputText.setSelectionRange(0, inputText.value.length);
        document.execCommand('copy', true);
        currentFocus.focus();
    });
</script>

2.通用復(fù)制操作-copy-to-clipboard

安裝插件

npm install --save copy-to-clipboard

使用幫助

#引入插件
import copy from 'copy-to-clipboard';

if(copy("http://baidu.com")){
       console.log("復(fù)制成功");
}else{
       console.log("復(fù)制失敗")
}

3.react-copy-to-clipboard

安裝插件

npm install --save react-copy-to-clipboard

使用幫助

#引入插件
#this.onCopy  復(fù)制之后執(zhí)行的方法
import CopyToClipboard from 'react-copy-to-clipboard';
<CopyToClipboard text="http://baidu.com"
       onCopy={this.onCopy}>
       <span>Copy to clipboard with span</span>
</CopyToClipboard>

22.React 多個(gè)Audio 實(shí)例控制只播放當(dāng)前的隙赁，暫停其他Audio實(shí)例

關(guān)鍵代碼

// 暫停函數(shù)
pauseAllAudio = () =>  {
  var audios = document.getElementsByTagName("audio");
  // 暫停函數(shù)
  function pauseAll() {
      var self = this;
      [].forEach.call(audios, function (i) {
          // 將audios中其他的audio全部暫停
          i !== self && i.pause();
      })
  }
  // 給play事件綁定暫停函數(shù)
  [].forEach.call(audios, function (i) {
      i.addEventListener("play", pauseAll.bind(i));
  })
}
//Audio實(shí)例播放方法
fourthAudioPlay = () => {
    baiduStatisticsBehaviour('日記分享落地頁(yè)', '點(diǎn)擊', 'h5_riji_zj4');
    //暫停其他實(shí)例
    this.pauseAllAudio();
    let fourthAudio = this.refs.fourth
    if (fourthAudio.paused) {
      fourthAudio.play();
    } else {
      fourthAudio.pause();
    }
  }

使用

<audio ref="first" src={data && data.diary_mission ? data.diary_mission.mp3 : '' } style={{display: 'none'}}>
  Your browser does not support the audio element.
</audio>
<audio ref="second" src={data && data.diary_mission ? data.diary_mission.mp3 : '' } style={{display: 'none'}}>
  Your browser does not support the audio element.
</audio>
<audio ref="third" src={data && data.diary_mission ? data.diary_mission.mp3 : '' } style={{display: 'none'}}>
  Your browser does not support the audio element.
</audio>
<img onClick={this.fourthAudioPlay}
src={ fourthPaused ? smallPlayImg: smallPauseImg}
alt=""/>

23.React-JS (拼團(tuán)添加人數(shù)邏輯)

拼團(tuán)添加人數(shù)邏輯：Server返回?cái)?shù)據(jù)不滿足最大人數(shù)8時(shí)垦藏，剩余人數(shù)由自己創(chuàng)建假數(shù)據(jù)

關(guān)鍵代碼

var members = res.groupbuyCate.member;
let pageState = res.groupbuyCate.pageState;
    console.log("members:"+members);
    if (typeof members != 'undefined'){
    members.map((member) => {
      items.push(member);
    });
}
  
console.log("items:"+items.length);
if (items.length < 8){
    let count = 8 - items.length;
    console.log("count:"+count);
    for(var i = 0; i < count; i++){
      items.push({ id: i,path:addBg});
    }
}
console.log(items);
//遍歷輸出對(duì)象
items.map((item)=>{
    console.log("Final:"+item.id);
})
  
this.setState({
  persons: items,
  pageState: pageState,
})

24.解決新版微信中H5頁(yè)面底部白條問題

問題描述：

微信將后退的按鈕移至了底部橫欄，遮擋住了原先底部的操作按鈕鸳谜。

問題描述1

分享微信好友進(jìn)入有底部導(dǎo)航欄，點(diǎn)擊鏈接進(jìn)入沒有導(dǎo)航欄

問題描述2

分析：

點(diǎn)擊鏈接進(jìn)入 -> 不需要授權(quán)
點(diǎn)擊微信分享App圖標(biāo)進(jìn)入 -> 需要授權(quán)
如果進(jìn)入H5首頁(yè)每次都要微信授權(quán)來(lái)獲取用戶信息式廷，那這個(gè)白條將每次都會(huì)出現(xiàn)咐扭，因?yàn)閛auth授權(quán)一定會(huì)有跳轉(zhuǎn)。第一次授權(quán)跳轉(zhuǎn)是無(wú)法避免的滑废，那么只要避免用戶進(jìn)行二次授權(quán)蝗肪，也就避免了白條的再次出現(xiàn)。

結(jié)果：只要授權(quán)就會(huì)有底部導(dǎo)航：所以蠕趁，解決問題的關(guān)鍵點(diǎn)在于如何避免微信二次授權(quán)薛闪。

解決思路

• 第一次微信授權(quán)，存儲(chǔ)必要參數(shù)到Cookie
• 第二次先從Cookie中取參數(shù)俺陋，取到了就不跳授權(quán)
• 第二次取不到就跳微信授權(quán)

代碼：

componentWillMount = () => {
    let w = document.documentElement.clientWidth; 
    console.log("width"+w);
    this.setState({
        width:w
    })
    initParameter();

    let sign = getParameter('sign')
    if (!sign && this.state.client == 1) {
      let url = "微信授權(quán)Url"
      window.location.href = url;
    } else {
      this.setState({
        sign: true
      })
    }
    let openid = getQueryString('openid');
    if(openid.length >= 20) {
        Cookies.set('openid', openid);
    }
  }
  
//初始化基礎(chǔ)參數(shù)
export function initParameter() {
  let sign = getQueryString('sign');
  let sso_id = getQueryString('sso_id');
  let openId = getQueryString('openId');

  sign && Cookies.set('sign', sign);
  sso_id && Cookies.set('sso_id', sso_id);
  openId && Cookies.set('openid', openId);
}

//獲取基礎(chǔ)參數(shù)(從Cookie)
export function getParameter(param) {
  let val = Cookies.get(param) || getQueryString(param)
  if(!val && param !== 'sign') {
    alert(param + 'empty')
    return
  }
  return val
}

//獲取Url拼接參數(shù)
export function  getQueryString(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    let r = window.location.search.substr(1).match(reg);
    // let r = window.location.search.substr(1).replace('?', '&').match(reg);
    if (r !== null) return decodeURIComponent(r[2]);
    return 0;
}

親測(cè)可實(shí)現(xiàn)隱藏效果

效果圖:

隱藏效果圖

25.頁(yè)面大圖處理

原圖

#exchange-voucher-body {
    background: url(../../images/voucher/activity_voucher_bg.png) no-repeat #1EB8FF;
    background-size:100%;  
    width: 100%;
    height: 100%;
    }

顯示效果

最終效果圖

26.React 刷新當(dāng)前頁(yè)(倒計(jì)時(shí)結(jié)束)

countDowntimeEndCallBack(){
      //  Toast.show("時(shí)間到");
      let reload = Cookies.get(global.cookiePrefix + "reload"+getParameter('groupbuy_id'));
      if (reload != 1){
        window.location.reload();
        Cookies.set(global.cookiePrefix + "reload"+getParameter('groupbuy_id'),1);
      }
    }

27. js判斷對(duì)象是否為空的幾種方法

1.將json對(duì)象轉(zhuǎn)化為json字符串豁延，再判斷該字符串是否為"{}"

var data = {};
var b = (JSON.stringify(data) == "{}");
alert(b);//true

2.jquery的isEmptyObject方法

此方法是jquery將2方法(for in)進(jìn)行封裝，使用時(shí)需要依賴jquery
var data = {};
var b = $.isEmptyObject(data);
alert(b);//true

3.使用ES6的Object.keys()方法

//返回值也是對(duì)象中屬性名組成的數(shù)組
var data = {};
var arr = Object.keys(data);
alert(arr.length == 0);//true

28.React JS setTimeout 不能使用this.屬性名,否則報(bào)錯(cuò)-參數(shù)未定義

let isOpenGroup  = this.state.pageState == "1";
setTimeout(function () {
//this.state.pageState 在block 內(nèi)會(huì)報(bào)錯(cuò)
  if(isOpenGroup){
    console.log("未開團(tuán)");
  }else {
    console.log("已開團(tuán)");
  }
},500);

29.document.documentElement.scrollTop在手機(jī)端無(wú)效的解決方法

問題：廣告不會(huì)隨著頁(yè)面滾動(dòng)而浮動(dòng)

分析：標(biāo)準(zhǔn)瀏覽器是只認(rèn)識(shí)documentElement.scrollTop的腊状，但chrome雖然我感覺比f(wàn)irefox還標(biāo)準(zhǔn)诱咏，但卻不認(rèn)識(shí)這個(gè)，在有文檔聲明時(shí)缴挖，chrome也只認(rèn)識(shí)document.body.scrollTop.

因?yàn)閐ocument.body.scrollTop與document.documentElement.scrollTop兩者有個(gè)特點(diǎn)袋狞，就是同時(shí)只會(huì)有一個(gè)值生效。比如document.body.scrollTop能取到值的時(shí)候，document.documentElement.scrollTop就會(huì)始終為0苟鸯；反之亦然同蜻。
所以，如果要得到網(wǎng)頁(yè)的真正的scrollTop值早处，可以這樣：

//滾動(dòng)條滾動(dòng)高度
let scrollTop  = document.documentElement.scrollTop+document.body.scrollTop;

30.React 改變this的指向

• 通過bind來(lái)指明當(dāng)前方法中的this指向當(dāng)前組件

export default class Test extends React.Component {
  constructor () {
    super()
    this.value = 1
  }

  run () {
    console.log(this.value)
  }

  render () {
    return <div>
      <button onClick={this.run.bind(this)}>點(diǎn)我</button>
    </div>
  }
}

• 在構(gòu)造函數(shù)constructor中改變this指向

export default class Test extends React.Component {
  constructor () {
    super()
    this.value = 1
    this.run = this.run.bind(this)
  }

  run () {
    console.log(this.value)
  }

  render () {
    return <div>
      <button onClick={this.run}>點(diǎn)我</button>
    </div>
  }
}

• 使用箭頭函數(shù)改變this指向

export default class Test extends React.Component {
  constructor () {
    super()
    this.value = 1
  }

  run = (e) => {
    console.log(e)
    console.log(this.value)
  }

  render () {
    return <div>
      <button onClick={this.run}>點(diǎn)我</button>
    </div>
  }
}

31.React兄弟組件間傳值湾蔓，動(dòng)態(tài)更新標(biāo)題

image.png

方法一

引進(jìn)Redux,通過StoreProvider獲取全局狀態(tài)

方法②

用state和props配合傳值，通過輸入框組件的onchange函數(shù)監(jiān)聽輸入框的值的變化陕赃，然后去更新當(dāng)前頁(yè)面的state卵蛉，將state的值傳入到另一個(gè)組件中，實(shí)現(xiàn)兄弟間傳值

export default class Page extends Component {
  static displayName = 'Page';
 
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      name:'111',
    };
    
  }
  onChange = (value) => {
    this.setState({name:value});
  };
  render() {
    const name1 = this.state.name
    return (
      <div className="page"><br/><br/>
        <TestimonialCard name={name1} />
         <Input
            hasClear
            defaultValue="clear by click"
            size="small"
            aria-label="input with config of hasClear" value={this.state.name} onChange={this.onChange} />
      </div>
    );
  }
}

組件TestimonialCard關(guān)于傳值的代碼

constructor(props) {
    super(props); 
      this.state = {name:props.name};
  }
  componentWillReceiveProps(props){
      this.state = {name:props.name};
 
  }

32.React Diff算法

計(jì)算出Virtual DOM中真正變化的部分么库，并只針對(duì)該部分進(jìn)行原生DOM操作傻丝，而非重新渲染整個(gè)頁(yè)面，需要明確的是诉儒，進(jìn)行比較的是兩個(gè)組件

• 節(jié)點(diǎn)不同葡缰，React 直接拋棄舊的節(jié)點(diǎn)生成新的節(jié)點(diǎn)
• 判斷是否自定義節(jié)點(diǎn)(不會(huì)刪除節(jié)點(diǎn),在原來(lái)的節(jié)點(diǎn)上進(jìn)行操作)-> 是->state不同 重新渲染, 更新Dom ,state未變化, 不更新Dom
• 不是自定義節(jié)點(diǎn)-> 比較屬性 class/id