天天看點
傳回

面試部分内容總結

微信小程式

微信小程式的授權流程

1、需要openID的：wx.login登入，擷取code，傳給背景，傳回openID（不會彈起授權彈窗，靜默式授權）

2、隻需要昵稱，頭像等資訊進行頁面展示的：open-data帶不同的type屬性比如userNickName,userAvatarUrl等

3、會彈起授權彈窗的，使用button标簽，帶不同的open-type,比如getUserInfo,從bindgetUserInfo回調中擷取到使用者資訊完成授權。

4、檢測登入狀态，我們需要先檢測登入狀态

wx.checkSession({
      success () {
        //session_key 未過期，并且在本生命周期一直有效
      },
      fail () {
        // session_key 已經失效，需要重新執行登入流程
        wx.login() //重新登入
      }
    })

5、檢測是否授權，微信小程式可以通過wx.getSetting來擷取授權過的所有資訊

wx.getSetting({
      success (res) {
        // res.authSetting = {
        //   "scope.userInfo": true,
        //   "scope.userLocation": true
        //    ...
        // }
        if(!res.authSetting['scope.userInfo']){
            // 如果沒有授權做引導處理
        }
      }
    })

小程式的生命周期 

小程式應用的生命周期
onLaunch（小程式啟動時執行）監聽小程式初始化、
onShow（監聽小程式顯示）、
onHide（監聽小程式顯示）、
onError（監聽錯誤）
onPageNotFound（監聽頁面不存在）
小程式點選左上角的關閉以及手機home鍵的時候，觸發的是onHide()方法，此時小程式并沒有真
正的銷毀，如果使用者再次進入小程式，稱為“熱啟動”，此時小程式觸發的生命周期為onShow()
但如果長時間未打開，或者占用資源過高，微信會将小程式銷毀，使用者第一次進入小程式以及進入
銷毀後的小程式，稱為“冷啟動”，會觸發的生命周期為onLaunch->onShow
page頁面的生命周期
onLoad（頁面建立時執行）監聽頁面加載
	一個頁面隻會調用一次，可以擷取query參數等
onReady（頁面首次渲染完畢時執行）、
	一個頁面隻會調用一次，可以和視圖層進行互動，對界面的wx.setNavigateBarTitle的設
    置可以再onReady之後。
onShow（監聽頁面的顯示）
	每次打開頁面都會調用一次
onHide（監聽頁面的隐藏）
	navigateTo或底部tab切換時調用
onUnload（頁面銷毀時執行）
	當redirectTo或者navigateBack的時候會觸發
當初次進入小程式的時候會觸發onLoad
離開的時候會先觸發頁面的onHide,然後觸發小程式應用的onHide
進入頁面的時候會先觸發小程式應用的onShow,然後觸發頁面的onShow。

微信小程式的支付流程

首先使用者會登入然後擷取到code，通過code向後端請求拿到openID以及支付所需要的參數，例如

時間戳簽名等，然後再發起wx.requestPayment支付API，這大緻是前端需要做的流程

微信公衆号分享的簽名如何擷取

主要為後端的操作，首先微信公衆号要綁定分享的域名，然後加上IP白名單，有一個

MP_verify_EM2V8QaIKnqw5Ts2.txt

将該檔案放在機器下,然後可以編寫微信分享的接口

Vue的相關

vue的params傳參和query有什麼差別

params傳參隻能用name來引入路由，不可以用path，

this.$router.push({
	name:'child',  //此處需為name引入，不可以是path
    params:{
    	id:'1',
        name:'wanghaha'
    }
})

然後在路由配置頁面處應該這樣寫

{
	path:'index/:id/:name',
    name:'child',
    component:()=>import(@/view/child)
}

接收參數時為

this.id = this.$route.params.id
this.name = this.$route.params.name

query傳參用path引入路由，如果配置路由頁面的name和path名字相同，也可以使用name

this.$router.push{
	path:'child',
    query:{
    	id:'1',
        name:'wanghaha'
    }
}

接收參數時為

this.id = this.$route.query.id
this.name = this.$route.query.name

params傳參屬于路由的一部分，必須在路由後面添加參數，query是拼接URL參數。如果使用

params，沒有傳這個參數，會導緻跳轉錯誤或者空白。

$router是路由操作對象，隻寫

$route是路由資訊對象，隻讀

vue的push和replace的差別

this.$router.push()

,會向history頁面棧中添加一條記錄，可以傳回上一個頁面

this.$router.replace()

,不會向history存入任何資訊，傳回的時候會傳回上上個頁面，不會存在上一個頁面的記錄;

this.$router.go(n)

,相對于目前頁面向前或者向後跳轉n個頁面，相當于

window.history.go(n)

,可為正數可為負數，正數傳回上一個頁面

vue的v-if和v-show有什麼差別

v-show屬于标簽最開始就存在的一個标簽，相當于display:none和block來顯示隐藏的，v-if是根據不同的條件dom節點的存在與否來展示的

v-if和v-for能在同一個标簽中使用嗎？

最好不要在一個标簽中使用，因為v-for的優先級比v-if高，例如要判斷一個代碼展示與否的時候，還是會先周遊整個數組，然後在判斷是否展示，耗性能，可以使用computed方法，或者将v-if換成v-show

keep-alive

keep-alive是一個抽象的元件，它不會自己渲染dom，也不會出現在父元件鍊中，使用keep-alive包裹動态元件時，會緩存不活動的元件，并不會銷毀它們。keep-alive可以儲存頁面或元件的狀态，還可以避免元件的反複建立和渲染

es6相關的

es6的箭頭函數能作為構造函數嗎？

es6的箭頭函數不能作為構造函數，es6中的this指向他的父作用域，普通函數的this指向調用它的地方。

react相關的

react中key的作用

key是目前清單的元素唯一的，不是全局唯一，可以識别哪些元素改變了，增加或者删除等，最好不要使用清單的索引作為key值，因為如果清單順序發生改變，索引會錯亂，盡量使用清單資料的ID值等。

redux遵循的原則

1、單一的資料源，整個應用的state被存在同一個object tree裡面，并且這個object tree隻存在于唯一一個store裡面

2、狀态State是隻讀的，唯一改變state的方法是action，action是一個用于描述一個已發生改變事件的普遍對象

3、使用純函數來接受修改

redux工作原理（個人了解）

使用者會通過store.dispatch()來先觸發action，然後store會自動調用reducer，傳入目前的state和action，reducer會傳回新的state，state發生了變化，store會設定監聽，store.subscribe(listener)，listener會通過store.getState()得到目前狀态

ant-design的時間元件怎麼設定預設時間

時間元件會有一個defaultvalue屬性，可以指令行安裝moment插件，然後引入，使用moment設定預設值

import moment from 'moment';
<Timepicker defaultValue={moment('13:20:50','HH:mm:sss')} />
//日期選擇元件同理

CSS相關的

用css畫一個箭頭

可以使用僞類選擇器，然後設定上邊框和下邊框，然後設定旋轉角度，就可以寫出一個不帶背景色的箭頭

<div class='arrawpoint'></div>
.arrawpoint:after{
	content:'';
    width:10px;
    height:10px;
    border-top:1px solid #f4f4f4;
    border-bootm:1px solid #f4f4f4;
    transform:rotate(45deg);
}
//三角形
<div class='delta'></div>
.delta{
	width:10px;
    height:10px;
    position:relative;
}
.delta:after{
	content:'';
    position:absoulte;
    border-left:4px solid #f4f4f4;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent; // transparent為透明
}

實作左邊固定，右邊自适應 

//左邊的元素設定向左浮動
<div class="left"></div>
<div class="right"></div>
html,body{
	width:100%;
    height:100%;
}
.left{
	width:100px;
    height:100%;
    background:red;
    float:left;
}
.right{
	background:pink;
    height:100%;
}
//用定位，是左邊的元素定位
.left{
	width:100px;
    position:absolute;
    background:red;
    height:100%;
}
.right{
	background:pink;
    margin-left:100px;
    height:100%;
}
//使用flex布局
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
.parent{
	display:flex;
}
.left{
	width:100px;
    background:red;
}
.right{
	flex:1;
    background:pink;
}

雙飛翼布局和聖杯布局（兩側寬度固定，中間自适應）

聖杯布局

//首先是dom結構
<div class='header'></div>
<div class='container'>
	<div class='center'></div>
    <div class='left'></div>
    <div class='right'></div>
</div>
<div class='footer'></div>
<style>
    body{
		min-width:500px;
    }
	.container{
    	padding-left:200px;
        padding-right:100px;
    }
    .container>div{
    	float:left;
    }
    .center{
    	width:100%;
    }
    .left{
    	width:200px;
        margin-left:-100%;
        position:relative;
        right:200px;
    }
    .right{
    	width:100px;
        margin-right:-100px;
    }
    //設定左中右三個元素為float：left，然後左邊的設定margin-left為-100%，設定定位
    relative屬性，right屬性，中間的設定width：100%，右邊的設定margin-right為負的
    它本身的寬度。
</style>

雙飛翼布局

<div id="container" class="column">
        <div id="center">中間</div>
    </div>
    <div id="left" class="column">左邊</div>
    <div id="right" class="column">右邊</div>
<div class="footer"></div>
<style>
	#container{
    	width:100%;
    }
    .column{
    	float:left;
    }
    #center{
    	margin-left:200px;
        margin-right:100px;
    }
    #left{
    	width:200px;
        margin-left:-100%;
    }
    #right{
    	width:100px;
        margin-left:-100px;
    }
</style>
日常總結 html css css3
上一篇: openwrt部分内容1
下一篇: http部分内容總結

繼續閱讀