Protopie製作購物車商品數量計數
國慶假期結束了，protopie也在這期間更新了3.9.1的版本，新加入了表示式/變數和鍵盤還有回車等功能！所以今天寫了一個小教程帶大家來看看這個新功能！
當然你想了解更多可以前往官方檢視！本期教程的原始檔會在文章最後提供給大家！
1.前期準備
本期教程將模仿淘寶購物車的裡面的商品加減互動來探索protopie的新功能！大家也可以自己開啟淘寶啊什麼的購物網站看看！
首先我們需要簡單分析一下：
1.我們點選加減按鈕時，輸入框的值會變化
2.我們點選輸入框輸入0時，會有錯誤提示
3.輸入框數量為1時點選減按鈕，這個時候也會有一個錯誤提示
4.點選輸入框會有一個彈窗修改數量（這個本教程不會講，大家可以自己思考下怎麼做）
5.這裡要用到表示式和輸入框，變數。
ofollow,noindex" target="_blank">官方基礎教程 （表示式變數等基礎教程這裡有介紹，大家可以前往檢視）
第一步
素材的製作：XD PS AI Sketch都可以（我這裡用XD，因為XD和sketch都是很好的支援protopie）
第二步
將製作好的素材匯入到protopie裡面（ctrl+ALT+E）然後他會自動開啟你的protopie，在彈出的地方我們可以保持預設設定。
第三步
我們可以開啟預覽視窗檢查一下我們的素材，然後就可以根據上面的分析開始製作互動所需要的其他東西！
1.1設定變數
點選變數，在展開的變數區域（層）後面點選加號，新增一個變數並且命名為number（ 名稱可以是英文或者是拼音但不能是中文字元 ）
提示：這裡新增變數的兩種方式都可以，本教程使用第二種（僅適用於當前場景）可以根據實際情況變換使用。
設定變數的型別為數字，預設值為1 
1.2新增輸入文字框
點選文字工具，選擇輸入。然後選擇輸入框在屬性欄裡面講預設文字設定為1，鍵盤型別設定為數字，回車設定為完成。
鍵盤型別是指點選輸入框時裝置預設喚出的輸入法狀態。回車-完成的意思敲擊輸入法回車時完成什麼動作。
然後我們把輸入框位置移動到數字顯示區域，然後設定文字居中對齊，字型顏色黑色！
1.3新增一個提示語
點選文字新增一個預設文字，將位置移動到加減數量的下方，然後輸入“最小隻能輸入1哦”字號可以設定為10，顏色可以改為紅色！可以提前複製一份命名為提示語2.後面會用到。
然後我們將其透明度改為0，當然你可以為這個文字重新命名為提示語！
ok，到這裡基本上準備工作OK了，你們我們現在來製作效果吧！
2.輸入數值的效果
步驟1
首先我們要給我們的變數一個監聽，在監聽下面加入一個文字，引數設定如下圖！
步驟2
接著我們給輸入框一個監聽。因為輸入框我們是要輸入東西的，所以我們需要有一個條，那就是如果我們輸入了一個數值為零，那麼提示語就會出現，然後輸入框的值變回預設值1.
提示：選擇表示式後點擊輸入框後面的加號就可以選擇性輸入表示式！
新增一個文字，將其設定如下圖（ 這一步的意思就是說，只要滿足上面的條件，那麼輸入框的數字就會是變數number的值 ） 
步驟3
假如我們輸入的值大於0，那麼輸入框就讀取我們輸入值為最後確定值。 
再新增一個文字，設定如下圖 (當滿足了上面的條件，輸入框的值就會是輸入的值）
步驟4
我們可以在條件1的下面新增2個透明度來製作當輸入0時的錯誤提示！
第一個設定提示語的透明度為100，第二個設定為0，具體引數如圖！
好了，你可以預覽一下他了，當然用手機預覽很直觀，你也可以用電腦預覽，直接用鍵盤輸入就好了！
提示：提示語這個步驟你可以事先做，也可以後面加，但是切記得是，他所執行的順序是按這個層順序來的，所以後面加記得放到相應的順序哦！
3.按鍵製作加減法效果
步驟1
選擇減法按鈕，新增單擊。然後我們需要做的是給他一個賦值的動作，賦值給誰？當然是我們的輸入框！ 
那麼，我們輸入框的值大於1的時候怎麼辦？等於1的時候是不是我們就不能再減了？所以我們這裡還是需要新增條件！
首先第一一種情況！大於1的時候！
引數如圖設定， 至於為什麼這裡的表示式變了，是因為我們的輸入框此時此刻是闊以輸入負數的，還有表示式預設裡面沒有判斷輸入框是否輸入的是數值還是文字，然後文字是不能與數值做減法的，所以在這裡我取這個輸入框的文字的絕對值去減去1。切記表示式一定要在英文輸入狀態下輸入！
步驟2
然後我們的減法做好了，假如等於1的情況下我們點選減法按鈕會怎麼樣？會沒有反應，所以我們給一個提示好了，這個時候需要一個條件！（就是輸入框的值等於1的時候出現提示語）引數如下圖：
步驟3
減法做了我們開始做加法，加法就很簡單了對吧，畢竟減法都做了。選擇加法按鈕新增單擊動作，然後加入文字，引數如圖！
這個時候我們可以連線手機預覽效果了
好了教程到這裡就結束啦！謝謝大家！別忘了練習下哦！下期見！
微信公眾號： 搬運工米夏小雨