夜光帶你走進 微信小程序開發（三十六）擅長的領域

夜光序言：

 

如果你還喜歡我。請你珍惜我。
如果你不喜歡我。我會離開你。

 

 

 

 
 
正文：
 
                                              以道御術 / 以術識道

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。

Less 可以運行在 Node、瀏覽器和 Rhino 平臺上。

 

網上有很多第三方工具幫助你編譯 Less 源碼。

實例:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

編譯結果

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

安裝

在服務器端最容易的安裝方式就是通過 npm （包管理器），方法如下：

$ npm install -g less

命令行用法：

安裝 Less 後，就可以在命令行上調用 Less 編譯器了，如下：

$ lessc styles.less

這將輸出編譯之後的 CSS 代碼到 stdout，你可以將輸出重定向到一個文件：

$ lessc styles.less > styles.css

若要輸出壓縮過的 CSS，只需添加 -x 選項。如果希望獲得更好的壓縮效果，還可以通過 --clean-css 選項啓用 進行壓縮。

執行 lessc 且不帶任何參數，就會在命令行上輸出所有可用選項的列表。

 

把剛剛的數據，我們複製粘貼到json文件裏面

 

 

 

// pages/category/category.js
//0 引入 用來發送請求的 方法 一定要把路徑補全
import { request } from "../../request/index.js";


Page({

  /**
   * 頁面的初始數據
   */
  data: {
      //左側的菜單數據
      leftMenuList:[],
      //右側的商品數據
      rightContent:[]
  },
  //接口的返回數據
  Cates:[],



  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
     this.getCates();
  },
  //獲取分類的數據
  getCates(){
      request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      })
      .then(res=>{
        // console.log(res)
        this.Cates = res.data.message;

        //構造左側的大菜單數據
        let leftMenuList = this.Cates.map(
          v=>v.cat_name
        );
        //構造右側的商品數據
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  }

})