從今天開始，我們就要動手從零做一個基于微信小程式雲開發的商城項目喽~
這個項目非常适合那些懂一點web前端基礎的同學學習，收貨會很大！零基礎的同學也可以試着做一下，我的代碼會給的很詳盡，講解的也會很透徹，實在不明白的可以加我的聯系方式找我。還有我的公衆号，等我最後一期做完之後，我會把源碼放到我的公衆号裡，大家也可以關注一下，我比較懶，之前公衆号更新的不多，以後會經常更新幹貨的，因為我本身是打算做前端的，是以内容基本都會和前端有關，包括一些前端技術棧的學習心得、面試刷題、優秀的工具插件、職業規劃等等。是以，還是關注一下喽~~~
因為我本身也比較菜，如果在項目的編寫中有錯誤，或者有更好的處理方式，歡迎各位大佬指教。
在敲代碼之前，我們需要有兩樣東西，一個appid，一個編輯器。然後就可以沐浴更衣，感受代碼的神聖了~~~
編輯器下載下傳位址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程式賬号注冊位址：https://mp.weixin.qq.com/
首先建立一個項目，正确的填寫項目路徑和appid，并且選擇雲開發選項，然後進入編輯器内，你會看到一些預置的檔案，把沒用的都删一删，最後的項目目錄是這樣的。
可能有些童鞋還不知道雲開發是什麼，是以我打算把項目的前後端分離講解，先把所有的前端頁面都寫完，然後再寫後端雲開發的東西。是以在這裡，就先不配置雲開發的東西。
然後我們就要開始設定tabbar了，先進入app.json，注冊幾個頁面。
我的設計是，有四個tabbar頁，分别是首頁、分類、購物車、個人中心。
我們保留的這個pages檔案夾裡的index就作為首頁，另外建立三個pages,名字随便起，最好是簡明緻意。
然後配置一下tabbar，也就是底部導航欄。我們應該準備好8個圖檔，分别是初始狀态的各個tabbar頁的logo，還有被選中的logo。
在這裡推薦一個網站，iconfont阿裡巴巴矢量圖庫，裡面的logo非常的齊全，任意搜尋下載下傳喜歡的logo，放到images檔案夾即可，注意改掉圖檔的名字，最好不要出現中文，雖然在本地調試沒問題，但是名字有中文的圖檔上線之後是不會顯示出來的。
我就找了一些比較普通的
然後寫tabbar的代碼
看一下效果：
基本沒有問題，我們還可以設定tabbar的背景色，字型顔色等，在這裡我們暫時不修改，有需要的可以檢視官方文檔。
然後我們看一下app.json裡另一個比較重要的屬性，window
這個東西其實也是配置一下頂部導航欄的樣式，我們暫時不需要修改别的，隻改一下頂部導航欄的字和背景色就行，如果英文比較好的同學應該可以看的出來，navigationBarTitleText這個屬性就是用來修改導航欄的字的，navigationBarBackgroundColor是用來修改背景色的，要想生活過得去，生活必須帶點綠，我們就拿綠色來當做主題色，#008000
沒有問題。
第一天的内容差不多就要結束了，今天沒有講解任何關于代碼的東西，隻是處理了一下建立的項目的目錄結構，并且修改了一些全局樣式，明天我們就正式開始編寫商城的前端代碼喽~
點贊、關注、收藏都是對作者莫大的鼓勵，謝謝！
有任何問題可以聯系QQ：505417246
零基礎入門微信小程式雲開發QQ群：1073011570
關注下面微信公衆号，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs等實戰學習資料