1. uni-app

? uni-app 是使用 Vue.js 開發前端應用的框架。開發者編寫一套代碼，可以發布到ios、Android、H5、以及各種小程序、快應用等多個平臺。

1.1 新建uni-app項目

• HBuilder X 創建 uni-app項目（可以用別的），版本 4.66
• 文件 --> 新建 --> 項目
  • 畫橫線的可以個性化設置

1.2 目錄結構

一個uni-app項目，默認包晗如下目錄及文件：

|- pages				業務頁面文件存放的目錄
|	|- index
|	|	|_ indxe.vue	index頁面
|	|_ list
|		|_				list頁面
|- static				存放應用靜態資源（如圖片、視頻等）的目錄
|- main.js				Vue初始化入口文件
|- App.vue				應用配置，用來配置小程序的全局樣式、生命周期函數等
|- manifext.json		配置應用名稱、appid、logo、版本等打包信息
|- pages.json			配置頁面路徑、頁面窗口樣式、tabBar、navigationBar 等頁面信息

1.3 把項目配置運行到微信開發者工具

1. 填寫 微信小程序 AppID

2. 配置 微信開發者工具 的安裝路徑

3. 在微信開發者者工具中，通過 設置-> 安全設置面板，開啟 服務端口

4. 點擊菜單欄中的 運行 -> 運行到小程序模擬器 -> 微信開放工具

2. tabBar

? 在 pages創建 目錄。

• 在pages.json 配置文件中新增 tabBar的配置節點

  //例"tabBar": {"selectedColor": "#C00000", 					  //配置當前tabBar頁的文本顏色"list": [{"pagePath": "pages/home/home",				 //頁面路徑"text": "首頁",							    // 頁面文本"iconPath": "/static/home.png",			     // 未選中的圖片"selectedIconPath": "/static/home-active.png" //選中的土建}]
  }
  

• 修改導航條的樣式效果，在 pages.json 中修改 globalStyle

  "globalStyle": {"navigationBarTextStyle": "white", 				//標題文本顏色 		"navigationBarTitleText": "人民商城",			 //標題文本"navigationBarBackgroundColor": "#C00000",	    // 導航欄背景顏色"backgroundColor": "#F8F8F8",					//窗口的背景顏色}
  

3.1 首頁

3.1 配置網絡請求

? 因平臺限制，小程序項目中不支持 axios，原生的 wx.request() API buzhichi l攔截器等全局定制功能。所以在 uni-app 項目中使用 @escook/request-miniprogram 第三方包發起網絡請求。官方文檔

配置@escook/request-miniprogram （可以看官方文檔）：

npm init -ynpm install @escook/request-miniprogram

在項目的 main.js 入口文件文件中，配置：

// 導入網絡請求包
import { $http } from '@escook/request-miniprogram'// 掛載到 uni 全局對象上
uni.$http = $http// 設置 base URL
$http.baseUrl = '自己的URL'// 請求攔截器
$http.beforeRequest = function(options) {uni.showLoading({title: '數據加載中...'})
}// 響應攔截器
$http.afterRequest = function() {uni.hideLoading()//關閉攔截器
}

3.2 輪播圖區域

• 請求輪播圖數據

  • 在data中定義輪播圖數組

  • 在 onLoad生命周期函數中調用獲取輪播圖數據的方法

  • 在 methods 中定義獲取輪播圖數據方法

    export default {data() {return {//這是輪播圖的數據列表swiperList: []};},onLoad() {//調用方法， 獲取輪播圖的數據this.getSwiperList()},methods: {async getSwiperList() {const {data: res} = await uni.$http.get('URL路徑')if (res.meta.status !== 200) return uni.$showMsg()this.swiperList = res.message}}}
    

• 渲染輪播圖的 UI 結構

  <!-- 輪播圖的區域 -->
  <swiper :indicator-dots="true"   <!-- 顯示面板指示點（小圓點） -->:autoplay="true"         <!-- 開啟自動播放 -->:interval="3000"         <!-- 自動播放間隔時間為 3000 毫秒（即 3 秒） -->:duration="1000"         <!-- 滑動動畫持續時間為 1000 毫秒（即 1 秒） -->:circular="true"         <!-- 啟用無縫循環輪播 -->
  ><!-- 使用 v-for 循環渲染每個輪播項 --><swiper-item v-for="(item, i) in swiperList" :key="i"><!-- 每個輪播項是一個導航鏈接，點擊跳轉到商品詳情頁 --><navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id"open-type="navigate"  <!-- 默認跳轉方式為普通導航 -->><!-- 展示輪播圖片 --><image :src="item.image_src"></image></navigator></swiper-item>
  </swiper>
  

• 配置小程序分包

  • 在根目錄中創建 分包的根目錄 ，名為 subpkg (可以自己取名)
  • 在 pages.json 中，和pages節點評級的位置聲明 subPackages 節點，用來定義分包相關結構

   "subPackages": [{"root": "subpkg","pages": [{"path" : "goods_detail/goods_detail","style" : {}}]}]
  

  • 根據自己需求自己設置

  

3.3 分類導航區域

• 獲取分類導航區域

  • 在data中定義輪播圖數組

  • 在 onLoad生命周期函數中調用獲取輪播圖數據的方法

  • 在 methods 中定義獲取輪播圖數據方法

    export default {data() {return {//分類導航的數據列表navList: []};},onLoad() {this.getNavList()},methods: {async getNavList() {const {data: res} = await uni.$http.get('路徑')if (res.meta.status !== 200) return uni.$showMag()this.navList = res.message},navClickHandler(item) {if (item.name === '分類') {uni.switchTab({url: '/pages/cate/cate'})}}}
    

• 渲染輪播圖的 UI 結構

  <!-- 分類導航區域 -->
  <view class="nav-list"><!-- 使用 v-for 循環渲染每個分類導航項 --><view class="nav-item" v-for="(item, i) in navList" :key="i"><!-- 每個分類導航項包含一個圖片，點擊圖片會觸發點擊事件處理函數 --><image :src="item.image_src" class="nav-img" @click="navClickHandler(item)"></image></view>
  </view>
  

3.4 樓層區域

• 獲取樓層區域

  • 在data中定義輪播圖數組

  • 在 onLoad生命周期函數中調用獲取輪播圖數據的方法

  • 在 methods 中定義獲取輪播圖數據方法

    export default {data() {return {//樓層的數據floorList: []};},onLoad() {this.getFloorList()},methods: {async getFloorList() {const {data: res} = await uni.$http.get('自己路徑')if (res.meta.status !== 200) return uni.$showMag()//對數據進行處理res.message.forEach(floor => {floor.product_list.forEach(prod => {//通過 split('?') 方法分割字符串，獲取查詢參數部分，并將其拼接到自定義的基礎路徑后prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]})})this.floorList = res.message}}
    

• 渲染輪播圖的 UI 結構

  <!-- 樓層區域 -->
  <view class="floor-list"><!-- 每個樓層 item 項 --><view class="floor-item" v-for="(item, i) in floorList" :key="i"><!-- 樓層標題圖片 --><image :src="item.floor_title.image_src" class="floor-title"></image><!-- 樓層的圖片展示區域 --><view class="floor-img-box"><!-- 左側大圖盒子 --><navigator class="left-img-box" :url="item.product_list[0].url"><!-- 顯示第一個商品的大圖，并根據 image_width 設置寬度 --><image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}"mode="widthFix"></image></navigator><!-- 右側 4 張小圖的盒子 --><view class="right-img-box"><!-- 循環渲染 product_list 中的商品（除第一個） --><navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" :url="item2.url"><!-- 只渲染 index 不為 0 的項（即跳過第一個商品） --><image :src="item2.image_src" v-if="i2 !== 0":style="{width: item2.image_width + 'rpx'}" mode="widthFix"></image></navigator></view></view></view>
  </view>