引言：
産品新功能上線或是改版更新後，我們會在使用者第一次使用産品時建立一個使用向導，引導使用者如何使用産品，通常是設定一個引導頁，通過示範的方式逐一介紹界面上的功能子產品，進而提升使用者體驗和産品的親和力。下面我就簡單介紹一下如何使用Bootstrap中的intro.js插件實作引導頁功能，以及通過cookie實作僅在第一次登陸時提示的功能。
一、實作引導頁效果
（1） 添加引導檔案
首先，将jQuery、Bootstrap庫檔案以及intro.js插件添加到項目中，然後在引用檔案中加載所需的css檔案和js檔案，如下圖所示。
（2） 設定參數
設定參數之前，我們先簡單看一下intro.js本身的可選參數有哪些，如下圖所示：
通常我們隻改變跳轉按鈕的參數，其他參數預設不變。此外， intro.js還有多個api函數可以直接調用，我們簡單介紹幾個常用的函數，并給出最後的示例。
Introjs(); 建立一個introjs對象；
Introjs.start(); 開始展現具體的引導步驟；
Introjs.setOptions(option,value); 設定具體的展現步驟；
oncomplete 選中“跳過”按鈕回調方法；
onexit選中“結束”按鈕回調方法。
具體的用法如下所示：
将上面的函數加載到設定引導功能的js檔案中調用，就可以實作引導功能了，具體效果如下圖所示：
二、設定cookie
cookie是伺服器端通知用戶端的産生的一個文本檔案，儲存在用戶端硬碟中（如果設定了cookie的過期時間），或者在使用者的浏覽器記憶體中(如果cookie是臨時的)。這個檔案對使用者來說，是透明的，你可以通過浏覽器工具來檢視目前的cookie，可能不止一個。下面給出如何使用cookie檢測使用者是否是第一次登陸的代碼：
Cookie可以用來檢測使用者是否是第一次登陸某個網站，是以也可以用來控制引導頁的展現，但是是使用者清理了緩存之後，仍會展現。如果隻希望提示一次新功能，最好的方法是将使用者的通路資訊存儲到redis中，或者存儲到資料庫中,由于需要和後端互動，這個可以根據個人不同需求再設計，這裡不再介紹了。
三、總結
本文主要介紹了利用intro.js和設定cookie實作引導頁功能，此外，能夠實作和intro.js類似功能的插件還有很多，例如pagewalkthrough.js，Bootstrap Tour等，具體事例可以到參考文獻連結檢視。希望可以幫助到大家哦~筆芯！
參考文獻
1 Cookies判斷使用者首次登入：www.jianshu.com/p/df53fb89d…
2利用pagewalkthrough實作引導頁：www.jianshu.com/p/df53fb89d…