【DRF+Django】微信小程序入門到實戰_day01(上)

（0）摘要

# 課程鏈接

入門到實戰，講講公司的微信小程序【django+drf+小程序實戰】_哔哩哔哩_bilibili

# 課程內容

（1）小程序介紹_(略)

（2）小程序環境搭建

（3）全局配置

---

# 若有恆何必三更眠五更起  最無益莫過一日曝十日寒            --- 教員

（1）小程序環境的搭建

# （1）後端環境的搭建。

                直接見下圖，所需的工具和類庫。後端環境_很簡單啦~~~

               

---

# （2）前端的小程序環境搭建。

                1）進入鏈接：微信公眾平台  ，注冊小程序賬號。這裡推薦注冊企業的賬號（但是要收費），因為企業的賬號能擁有更多的功能，比如支付的。如下圖所示，選擇紅框處小程序注冊入口進行注冊。 

                2）注冊成功後，我們登錄進去，在左邊的選項欄點擊開發。找到小程序 ID ，保存起來，這個在後面有用。

                 3）下載開發者工具。如下圖所示，回到首頁欄，然後在開發工具那裡下載微信開發者工具。 當然，這裡我給個直通車：穩定版 Stable Build | 微信開放文檔

               

                然後來到了下圖的頁面，按照圖中序號順序和描述操作即可。 下載完成後，直接就是傻瓜式安裝即可。

---

# （3）小程序開發工具的初識

                1）打開工具後，我們需要登錄小程序。

                2）登錄成功後，我們能看到這個樣子的。點擊那個大大的+號，就可以創建新的小程序了。

                3）點擊了+ 號後，就能看到如下的頁面，具體的細節看裡面的注解。在模板選擇這裡，我是推薦使用 JavaScript 的基礎模板就行。

                4）創建成功後，我們可以看到如下的界面。

                5）代碼目錄的介紹。其實都是可以刪掉，我們自己創建。

                6）基本使用_1

                7）基本使用_2

                 

                8）兩個重要的標簽。其實微信的 wxml 標簽是基於前端的 html 標簽進行封裝的，所以是 html 也不完全是。但是我們只需要記住兩個重要的標簽，分別是 <text>文本</text> 和 <view></view> 。前者相當於 html 中的 span 標簽，即行內的；後者就相當於 div 標簽。還可以跟前端一樣給對應的標簽加上相應的樣式。當然要注意 wxml 和 wxss 的代碼要分開在對應的文件裡面寫。

               

                 wxss 下的樣式代碼

                9）小程序的預覽。前提是代碼文件目錄中，必須要有 app.js 文件。

---

（2）全局配置

# （1）小程序的學習都是要看官方文檔的。

                官方文檔鏈接：微信開放文檔 ，主要看下面的全局配置。注意，如果要配置這些屬性的時候，格式一定是遵照下圖的 app.json 的內容來寫的。（可以缺少，但是按序就行）

                1）這一節我們只關注 pages 和 window 還有 tabBar 三個屬性。見上圖，我們點擊進去詳細的全局配置，進入到詳細配置項，然後看到下圖的界面。

                 

                這三個屬性， pages 是頁面路徑列表，不贅述；window 和 tabBar 屬性控制的就是下圖所示的地方。

---

# （2）window 屬性的使用。

                1）首先來 window 屬性，我們在詳細配置項點進去 window。可以看到如下頁面，這只是部分的截圖。

                 

                2）代碼實戰，見下圖的筆記內容。

---

# （3）tarBar 屬性的使用。

                1）文檔查閱。我們點進去 tarBar 的詳細配置的時候，能配置的東西很多，我們暫且不看，我直接到最後找到如下圖所示的內容，注意紅框內的。也就是說tabBar 屬性對下配置的是一個列表，即  "tabBar" :{"list": [ ] }  。如果單獨看文檔是很難看懂的，所以我們直接把這個紅框代碼實踐一下。

                2）pagePath 和 text 的代碼實戰。如下圖所示，從這個例子中我們可以知道，"pagePath" 就是指向我們頁面的路徑，text 就是下面選項框的文字。這裡要注意，如果是多個選項的話，務必對每一個選項創建一個獨立頁面。比如，第二個選項 “我的”，我們為其創建了一個獨立頁面，路徑是 pages/mydemo/mydemo 。

                有了上面的基礎，我們再來看 tabBar 的其他功能屬性。比如我們可以設置一下選項框的圖標，就需要用到下圖偏橙色框的內容。iconPath 是沒有選中的時候的圖標，selectedIconPath 是選中後，顯示的圖標。我們一樣舉個例子 

                3）iconPath 和 selectedIconPath 代碼（這是 list 中的），以及 selectedColor 和borderStyle 屬性的代碼實戰。見下圖所示。（這裡還要說一下，list 裡面的最多有 5 個 屬性值；borderStyle 是控制tabBar 選項框與頁面內容的邊界的風格的，而不是框與框之間的。比如是白色 white 的話，就沒有邊界了）

---