接下來開啟一門全新的課程的學習，其實這是去年6月份所記錄的，只是木有公開，然后到目前為止已經間隔了快1年沒管了，基本上是已經快放棄的節奏，但是呢它又是我一直特別想學習的，所以決定公開，鞭策自己得繼續前行，不能放棄，再說確實也是精品課程。

前言：

該課程是來自于幕課網的精品全棧實戰課程，地址為：https://class.imooc.com/sale/javafullstack?mc_marking=53bac465973c096055bae2d7a383fde5&mc_channel=syzcjj2，從去年就一直在關注著，于我而言，我目前是做Android移動端開發的，對于Java后端及Web前端的開發真的這個技能非常的缺失，其實J2ee在早些年也做過將近一年，只是由于重心轉到了移動端了慢慢將后端的技能給拋棄掉了，但是對于現在行情而言，你不多掌握一點比其它人技能更多的則會讓你的競爭力大大的削減，所以決定接下來好好的跟著這個課程來對于全棧的技能進行掌握。

如官網所示，最終全棧會基于一個成熟的商業應用進行學習，有兩個產物：

?確實也正是我想學的，小程序+java后臺，然后再加我的主業移動端Android，基本上做一個自己獨立的項目這些技能就已經能夠滿足要求了，假如公司業務有變動自己也可以很輕松的進行轉崗，當然要想讓自己有全棧的能力，達到這個目的也不是很輕松的，所以接下來會一點點從0開始按著大師的腳步一步步來，摒棄浮躁！！！

小程序注冊與新建項目：

咱們首先要GET的技能是小程序的開發， 所以首先先來注冊一個小程序的賬號，先上微信公眾平臺：https://mp.weixin.qq.com/：

關于這塊的注冊在之前https://www.cnblogs.com/webor2006/p/11832953.html微信入門中也已經學習過了， 所以這里就略過了，已經注冊了之后直接登錄既可：

然后再下載小程序的開發工具，目前小程序的開發工具分為以下幾類類型：

穩定版本當然是首選啦，其它的也再簡單了解一下：預發布版本其實就是候選版本，也就是官方測得差不多待上線的版本，比穩定版本的穩定性要稍差一些，但是比開發版本肯定是要穩定很多；而開發版本是BUG最多的，但是新特性的體驗也能夠及時得到更新，對于我們開發者而言不用多想，選穩定版就成了。目前最新的版本為：

安裝完之后，咱們就可以新建一個項目用來進行開發了：

編譯一下則是一個HelloWorld的示例工程：

開發工具推薦(Vscode或Webstorm)：

對于小程序的開發官方的默認開發工具其實不是特別的好用，而常用可以代替的成熟強大的工具有兩款：

• Vscode，它是微軟開發的，功能木有Webstorm強大【當然這句話也不是絕對的，可以在裝插件之后變得很強大】，需要裝很多的插件：
  這個工具在目前公司的一同事培訓全棧技能時用過幾次，反正不是太會用，不過功能怎么的也比微信自已的小程序開發工具要強。
• Webstorm：它是JetBrains的產品，不用過多解釋就知道肯定很好用，不過它占用的內存比較大，由于在之后的Java后臺也是用JetBrains，保持統一吧，對于搞Android的我來說，相當的習慣JetBrains公司的產品了，選它毋庸置疑，不過它沒有小程序預覽的功能，只是編碼階段則用它，而預覽則還得用官方的小程序開發工具的，配合著來使用，關于它真的是比官方小程序的開發工具要好用么？這個待未來再來慢慢感受。

《風袖》首頁布局詳盡分析：

開發工具準備一切就緒了，接下來則來開始編寫“風袖”小程序的首頁了，先來看一下它長啥樣：

哇塞，好復雜的樣子，這里要明白對于電商的首頁一般都是各種入口，然后重點是要將這些入口進行分類最終提取出一個個的概念出來，注意：只有提煉出來了概念思考起來才會連貫，下面具體來分析一下：

• Banner入口：
• 主題入口：

  那主題點進去是啥呢？

  其實就是各種商品，而首頁中還有一個主題：

  點擊進去也是各種商品：

  哪有個問題來了：它不跟Banner長得很類似么，也可以滑動：

  
  其實Banner的形式是要比主題豐富多了，Banner里面既能跳到商品詳情，又能跳到主題，比如：

  關于這塊可能得從后端的角度來思考，不過這里先提前了解一下相關的概念，繼續再來看一下：

  它其實是Banner+主題。。好吧，暫且先對這兩概念有所了解，目前沒有涉及到后端的開發不從表的設計角度是很難從前端角度思考到的。

• 分類六宮格：
• 優惠券入口：
• 商品長滾動、瀑布流列表：
  無限的分頁加載商品，其實是一個瀑布流的布局。

Webstorm開發小程序必配配置：

在上面對于整個首頁有了一個大概的認識之后，接下來則一點點來實現它，這里由于我們在編寫代碼時是打算采用Webstorm，所以先用它來打算小程序的工程：

接下來新建一個主頁面，注意：這里建議還是用微信的IDE來新建，因為它會自動幫我們生成配套的這些文件：

而如果在Webstorm中來新建則只能一個個建立，所以這點需要特別注意，咱們先回到微信IDE中新建一個咱們自己的主頁：

?

然后再新建相關的文件，看微信這塊還是挺人性的，相關文件可以一次性都給生成了：

此時再回到Webstorm時，則會自動監測到目錄文件的變化，這樣寫代碼就用Webstorm，然后預覽則就切回到微信IDE工具。目前模擬器顯示的還是DEMO生成的那個頁面，如何將默認顯示的改成咱們自己剛才新建的那個home頁面呢？很簡單：

{"pages": ["pages/home/home","pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json" }

再預覽就默認顯示的則是咱們的頁面了：

接下來咱們先把工程自動生成不用的頁面給刪除掉，保持一個清爽的開發環境：

此時再預覽時報錯了：

很明顯頁面文件雖說是刪除了，但是app.json中注冊的路徑木有刪除，所以報找不到相關的WXML文件了：

另外需要特別注意，在json中是不能有注釋的，比較咱們加個注釋是會報錯的。。

接下來咱們來編寫咱們的首頁，首先來搞它，也就是一個主題：

很顯然它就是一個圖片嘛，不過它是一個需要請求接口的圖片，而非本地的圖，對于電商項目像主題這樣的會無時不刻地進行變化，所以這里也會學習到小程序是如何來請求網絡接口的，先來編寫WXML界面：

其中在第一次用Webstorm編寫代碼時發現沒有提示，而且也不高亮。。打開時會給一個安裝插件的提示：

點擊則會彈出插件的提示框：

?

這里直接安裝重啟一下IDE，此時再輸入就可以有提示了，由于首頁有很多元素，所以需要用一個這個標簽包裹一下：

<view><image></image> </view>

然后先給image定義一個class用于定義css：

<view><image class="top-theme" src=""></image> </view>

接著來到wxss中來編寫css樣式：

其中設計稿上的高度是130px，但是為啥這里要用260rpx呢？關于這塊的基礎可以參考：https://www.cnblogs.com/webor2006/p/11834878.html， 核心就是：

調用服務端API獲取數據：

搭建mock接口：

好，接下來則需要將主題的圖片通過接口請求獲得， 這里用一個在線mock數據的網站：https://testapi.io/，當然還可以自己來搭，不過后端這塊我不熟就用現成的了，注冊之后則可以創建我們需要的API了：

點save則就創建了一個mock接口：

呃，端點找不到，難道不能加names參數？那修改一下：

再試一下：

嗯，果真可以訪問了，不過由于它的訪問權限需要token，所以目前報token無效，這里咱們可以生成一個：

其中這個token有一天的有效期，到時如果不能用了再創建既可，咱們用GET參數的方式來試一下，看能否正常請求數據了：

妥妥的，咱們用Postman來試一下：

有個細節，居然這里生成的地址中多了一個“/”：

這里因為配置時多了個這個斜杠，咱們改一下：

這樣第一個接口環境借助網上的工具就輕松解決了，當然未來等學會了后臺的開發這個完全可以自己來搭建，目前不是不會嘛，先這么搞。

請求接口：

接下來則來看一下在小程序中是如何來請求接口的，很明顯請求接口的邏輯應該寫在js當中，而默認在js文件中微信給咱們生成了一些生命周期函數，如下：

// pages/home/home.js Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

這里咱們在頁面加載函數中來寫請求邏輯，微信中請求網絡是這么調用的：

其中增加了一個GET參數，這是因為目前只想獲取一個主題的數據，關于這塊的定義可以參考CC老師的api說明https://course.talelin.com/lin/sleeve/，一看就懂了：

當然，由于咱們是mock數據，所以這里的參數其實是一個假像，不過為了從語義的真實性上理解還是帶上，對于像這樣的GET參數，其實微信可以將它統一放到另一個參數上，如下：

另外該接口需要攜帶一個token，所以咱們可以將它加到header頭中：

此時咱們運行看一下：

?

居然報不是合法的域名，其實這塊需要到小程序里進行一個域名的設置才行，不過在開發階段可以去掉這個合法域名的校驗，如下：

再編譯則就不會報錯了：

好，不過很顯然這樣每次請求寫這么一坨代碼是非常之麻煩的，每個項目都會將其進行封裝一下，所以接下來咱們來優化一下，新建一個配置：

const config = {appKey: 'Bearer 68ab50cf197dc06947a9ed63f830d91fc677c342',apiBaseUrl: 'https://testapi.io/api/webor2006/v1/' }

然后記得將配置導出：

這里是采用ES6的語法，代碼比較簡潔，注意：記得小程序這塊要勾選上：

但是在小程序的wxs中是不支持ES6的，這個未來再說。接下來則在home.js中來使用一下咱們定義的配置：

好，接下來咱們是處理其回調結果：

接下來則需要將數據綁定到頁面上，這里又涉及到在微信中綁定的知識點了，先來聲明一下要綁定的字段：

為啥這里寫res.data[0]呢？先來看一下返回的JSON格式：

?

然后來打印一下res的數據，看為啥是res.data：

然后咱們則可以將其圖片地址應用到視圖標簽上了：

好，來看一下是否圖片能正常顯示了，發現報錯了。。

這里就是經典特別容易犯錯的問題，有兩種解決方案：一種是使用let，如下：

此時編譯就正常可以看到圖片了：

還有一種比較優雅的處理this的問題，就是使用箭頭符號，類似于Lambda表達式，咱們也來試一下，這是一種推薦的寫法：

更正：

由于這篇是在去年6月份所寫的，當時學習時對于JSON中圖片資源的域名目前已經訪問不了了，也就是：

?

需要將域名更改為：i2.sleeve.talelin.com，也就是：

總結

以上是生活随笔為你收集整理的小程序高级电商前端第1周走进Web全栈工程师一----小程序注册、开发工具推荐、《风袖》首页布局详尽分析、Webstorm开发小程序必配配置、mock数据...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。