起因

最近準(zhǔn)備換手機(jī)，作為路癡喜歡小米8的雙頻gps功能，就決定搶一部。結(jié)果搶是搶不到的，從黃牛那里買也是不可能的。那就發(fā)揮一下程序員的優(yōu)勢，寫個瀏覽器插件來搶吧。

瀏覽器插件，通常用于在別人的網(wǎng)站上運(yùn)行我們自己的代碼，做一些固定的操作，寫瀏覽器插件，先要明確2點(diǎn)：
1.我們的目的是什么。要達(dá)成什么。
2.網(wǎng)站的操作流程是什么。

分析與準(zhǔn)備

我們要快人一步。從選擇我們想要的型號，配置，到下單都要比別人快。代碼的反應(yīng)速度是比人快的，這是程序的優(yōu)勢，我們可以第一時間去點(diǎn)相關(guān)的按鈕。不用移動鼠標(biāo)，讓代碼幫我們點(diǎn)，不斷地點(diǎn)。然后后續(xù)操作，一直到訂單生成。完全不用自己動手操作。

分析了天貓，京東和小米商城。決定在小米商城上面搶。一來是因為它是小米自己的平臺，二來也是因為它沒有驗證碼，代碼寫起來比較簡單。

熟悉搶購流程。首先找了一些搶購小米的視頻來看。然后對比了一下米8的購買頁面和小米商城其它一些現(xiàn)貨出售的購買頁面。
發(fā)現(xiàn)流程與dom結(jié)構(gòu)基本上是一樣的。購買流程也差不多的。

小米商城搶購的基本流程如下：

• 商品詳情頁。倒計時，時間到了出現(xiàn)加入購物車按鈕。
• 加入購物車成功頁。一個成功提示的頁面。可以點(diǎn)擊跳轉(zhuǎn)到購物車頁面。
• 購物車頁。核對產(chǎn)品，有確定按鈕可進(jìn)入下一個頁面。
• 訂單確認(rèn)頁。選擇地址，收貨時間等信息，然后確定生成訂單。

第4個頁面點(diǎn)確定，訂單生成成功，我們的小米就算是搶到了！

經(jīng)過觀察發(fā)現(xiàn)從第一個頁面到第四個頁面，都是可以讓代碼全自動完成的。也就是說如果順利的話，在1s內(nèi)跳轉(zhuǎn)過4個頁面到生成訂單是完全可能的。

代碼邏輯：

• 商品詳情頁。
  等待手機(jī)顏色，手機(jī)配置異步加載出來。然后代碼click想要購買的顏色，配置。
  配置信息選擇好之后，不斷點(diǎn)擊 加入購物車 處的按鈕。搶購時間一到，就能成功發(fā)請求到后臺。正式搶購的時候可能會有排隊彈窗。
  但是我們還在不停地點(diǎn)擊。所以可能會發(fā)多次請求到后臺。
  在代碼的幫助下，我們很大概率能順利加入購物車。并且加入購物車的可能不只一臺。
• 加入購物車成功頁。
  檢測到包含“去購物車結(jié)算”幾個字的鏈接的話就點(diǎn)擊它。或直接跳轉(zhuǎn)到購物車頁面。
• 購物車頁面。
  由于商城的限制，小米8其實(shí)只能搶一臺。但是我們加入購物車的可能不只一臺。這個時候直接點(diǎn)確認(rèn)就不會成功，會彈出錯誤提示。所以在我們點(diǎn)擊進(jìn)入下一個頁面的按鈕之前，要先把本頁多余的商品，和多的數(shù)量去掉。\
  多的商品，點(diǎn)刪除按鈕，會二次確認(rèn)。點(diǎn)減少數(shù)量的按鈕，也是異步操作。所以如果進(jìn)行了上面兩個減少操作，我們需要一個大概200ms的延遲之后再去點(diǎn)擊這個頁面的確認(rèn)按鈕。
  另外，實(shí)際的搶購流程，即使走到購物車這一步，也很大概率是搶不到的。提交的時候會發(fā)請求檢測后臺庫存，如果買完了，頁面上也會有反應(yīng)，比如確認(rèn)按鈕點(diǎn)不了了。
  這個時候，我們不能放棄。一是因為系統(tǒng)這么繁忙的情況下給的數(shù)據(jù)不一定是對的。二是，有些人可能搶到?jīng)]有及時付款，后臺就又有貨了。
  所以一旦檢測到“商品已經(jīng)失效或者暫時售罄”的提示。立馬刷新購物車頁面。這樣很大概率能進(jìn)入到第4個頁面去。
  事實(shí)上我寫這個插件，也是遇到進(jìn)入購物車但是沒有貨的情況下臨時加上去檢測和刷新操作。最終能一次成功，這個臨時修改是關(guān)鍵。
• 訂單確認(rèn)頁
  到了訂單確認(rèn)頁。用代碼點(diǎn)擊收貨地址。然后點(diǎn)擊這個頁面的確認(rèn)按鈕。 也可能遇到提示“商品已經(jīng)失效或者暫時售罄”。這個時間立馬跳轉(zhuǎn)到購物車頁面，重復(fù)上一步。
  不過這個頁面有時候 會彈出一個alert提示，阻斷腳本運(yùn)行。點(diǎn)確定，就可能顯示訂單成功。這個時候就可以付款了。

找一個現(xiàn)貨商品測試，腳本。一進(jìn)頁面就開始，瞬間跑完流程下好單。大體流程無誤。

其它準(zhǔn)備工作：

• windows系統(tǒng)時間同步。
• 小米商城賬號處于登錄狀態(tài)。
• 提前把收貨地址填上。到時候才可以直接選。

核心代碼：

//1.核對時間。與互聯(lián)網(wǎng)時間同步。 //2.處于登錄狀態(tài)。var app = {timer: '',init: function() {this.setTimer();},setTimer: function() {this.timer && clearTimeout(this.timer);try {//這里就沒有做具體哪個頁面的判斷了。暫時不會相互影響。//詳情頁面做的事this.detailFn();//中間頁，進(jìn)入購物車this.goCart();//購物車頁面this.cartFn();//提交訂單頁面。this.orderFn();} catch (e) {// 還沒加載出來}this.timer = setTimeout(this.setTimer.bind(this), 30);},//商品頁面做的事情//在選項加載出來之后選擇然后不斷點(diǎn)擊加入購物車。detailFn() {//關(guān)閉可能的彈窗$(".modal-body .btn.btn-primary:visible").each(function(index, el) {el.click();});$("#J_miAlertConfirm")[0] && $("#J_miAlertConfirm")[0].click();//版本 128gvar levelDom = $(".J_step.pro-choose[data-index=0] ul>li").eq(1)[0];//顏色 白色var colorDom = $(".J_step.pro-choose[data-index=1] ul>li").eq(1)[0];//保險。不選保險了。非必要項。碎屏險可以補(bǔ)買的。// var safeDom = $(".J_service.pro-choose[data-index=0] ul>li").eq(1)[0];//當(dāng)這幾個都加載出來的時候才執(zhí)行點(diǎn)擊加入。避免購物車頁面出現(xiàn)多項商品。if (levelDom && colorDom ) {levelDom.click();colorDom.click();// if (!$(safeDom).hasClass('active')) {// safeDom.click();// }//點(diǎn)擊加入購物車$("#J_buyBtnBox a")[0] && $("#J_buyBtnBox a")[0].click();}},//跳轉(zhuǎn)到購物車頁面goCart() {if ($(".J_actBox a:contains('去購物車結(jié)算')")[0]) {$(".J_actBox a:contains('去購物車結(jié)算')")[0].click();//觀察到卡了一s在這里，所以加上這一句，上面那句其實(shí)就沒有用了。location.href = 'https://static.mi.com/cart/';//跑一個錯誤，中斷線程。不再生成定時器。throw new Error('abc');}},//購物車頁//第一個頁面可能發(fā)了多次加入購物車的請求。 所以在這個頁面要把多余的項以及數(shù)量刪除。cartFn() {//阻止彈窗,避免阻斷流程window.alert = function(){}//購物車中有大于1件商品，刪除$("#J_cartListBody .item-box:gt(0)").find(".J_delGoods").each(function(index, el) {el.click();//確認(rèn)刪除按鈕$("#J_alertOk")[0] && $("#J_alertOk")[0].click();});//確認(rèn)刪除按鈕$("#J_alertOk")[0] && $("#J_alertOk")[0].click();var interval = 0;//將每一條的數(shù)量減少到1。$(".J_minus").each(function(index, el) {//數(shù)量不為1就減少。//不能用這個while。因為input中的值是異步減少的。if ($(el).next('input').val() != 1) {interval = 200;el.click();el.click();el.click();el.click();}});//去結(jié)算。因為上面的數(shù)量減少操作是異步的。所以這里設(shè)置一個延時，讓上面的操作生效之后再進(jìn)行這個操作。setTimeout(function() {$("#J_goCheckout")[0] && $("#J_goCheckout")[0].click();}, interval);//到了購物車頁面甚至下訂單的頁面依然可能會出現(xiàn)售罄的情況。這個時候不要放棄，重新刷新購物車頁面繼續(xù)進(jìn)行操作。還是有可能刷到的。if ($('h3:contains(抱歉，以下商品已經(jīng)失效或者暫時售罄):visible').length > 0||$('a:contains(到貨提醒):visible').length > 0||$("dt:contains(選中的商品已經(jīng)全部失效或者暫時售罄):visible").length>0||$("#J_goCheckout").hasClass('btn-disabled')) {//避免請求太過頻繁。setTimeout(function() {location.href = 'https://static.mi.com/cart/';}, 500)}},//選地址，下單頁面orderFn() {if (document.querySelector('.J_addressItem')) {document.querySelector('.J_addressItem').click();document.querySelector("#J_checkoutToPay") && document.querySelector("#J_checkoutToPay").click();}$("button:contains(確定):visible").click();$(".modal-backdrop:visible").remove();} }app.init();

成功用瀏覽器插件搶到小米8白色128g版。上午10點(diǎn)搶到，下午2點(diǎn)多就收到了。手機(jī)非常滿意。

另外，這種搶購網(wǎng)站前端是不是應(yīng)該做一些防重復(fù)點(diǎn)擊的驗證。搶購的時候 服務(wù)器的壓力也小一些。

插件地址：https://github.com/liusaint/ls-blog/tree/master/code/mi

總結(jié)

以上是生活随笔為你收集整理的使用chrome浏览器插件抢小米8的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。