1. 接口文檔

2. 幫助文檔

小程序開發文檔
mdn
阿里巴巴字體 iconfont

3. 項目搭建

3.1 新建小程序項目

填入自己的appid: wxdbf2b5e8c2f521a3

3.2 文件結構

目錄名	作用
styles	存放公共樣式
components	存放組件
lib	存放第三方庫
utils	自己的幫助庫
request	自己的接口幫助庫
pages	存放頁面.

app.json

{"pages": ["pages/index/index"],"windows": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Marron購物","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json"
}

app.wxss

(空)

app.js : 快捷鍵 wx-app + tab
pages/index.wxml

<view>首頁</view>

pages/index.wxss
pages/index.js: wx-page + tab

3.3 搭建項目的頁面

頁面名稱	名稱
首頁	index
分類頁面	category
商品列表頁面	goods_list
商品詳情頁面	goods_detail
購物車頁面	cart
收藏頁面	collect
訂單頁面	order
搜索頁面	search
個人中心頁面	user
意見反饋頁面	feedback
登錄頁面	login
授權頁面	auth
結算頁面	pay

直接修改app.json中的屬性: pages

{"pages": ["pages/index/index","pages/category/index","pages/goods_list/index","pages/goods_detail/index","pages/cart/index","pages/collect/index","pages/order/index","pages/search/index","pages/user/index","pages/feedback/index","pages/login/index","pages/auth/index","pages/pay/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Marron - 購物車","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

微信的編輯器會幫助自動生成對應的頁面文件

3.4 引入字體圖標

打開阿里巴巴字體圖標(網站)
選擇的圖標
添加至項目
下載到本地
將樣式文件由css修改為wxss
小程序中引入

在全局樣式中,引入某個樣式

// app.wxss
@import "./styles/iconfont.wxss";

3.5 搭建項目tabbar

在app.json中,輸入tabBar + tab.生成首頁的導航欄(位于手機底部)

3.6 全局樣式

需求: 假設現在需要設置主題顏色為: #d81e06; 字體大小為14px.

在微信的樣式中(.wxss),可以通過如下方式來定義全局變量.

/*  /app.wxss: 項目目錄下 */
page{/* 主題顏色 */--themeColor: #d81e06;/* 字體大小 */font-size: 28rpx;
}

在字頁面中使用主題顏色--themeColor

/* /pages/index/index.wxss: pages目錄下 */
view{/* 使用主題顏色 */color: var(--themeColor)
}

3.7 頂部的導航欄

在根目錄下的app.json文件中,有一個window屬性,它控制的是頂部的樣式(字體大小顏色、背景色…),下面說明幾個常用的屬性

{"window": {"navigationBarBackgroundColor": "d81e06",	// 背景色"navigationBarTitleText": "標題","navigationBarTextStyle": "white"	// 標題顏色}
}

4. 首頁

4.1 搜索框

需求: 多個頁面用到搜索的功能,因此把搜索框封裝成一個組件,方便代碼的復用

首先在根目錄下的components文件夾中新建一個目錄SearchInput
在SearchInput目錄下新建組件SearchInput(開發工具自動生成組件的4個文件)
在首頁導入搜索組件

/*首頁位于pages目錄下的index文件夾中, 找到其json文件(微信中json文件用于配置)/pages/index/index.json
*/
{"usingComponents": {"SearchInput": "../../components/SearchInput/SearchInput"}
}

上面在配置文件中,導入組件成功.下面在.wxml中使用導入的組件

<!-- /pages/index/index.wxml -->
<view class="pyg_index"><!-- 搜索框結構 --><SearchInput></SearchInput>
</view>

以上完成了搜索框外觀的創建與使用, 下面實現點擊跳轉功能.

<!-- components/SearchInput/SearchInput.wxml -->
<view class="search_input"><navigator url="/pages/search/index" open-type="navigate">搜索</navigator>
</view>

以上實現了,點擊搜索的適合,跳轉到搜索頁面.

4.2 輪播圖

需求: 首頁加載的時候,發送請求,獲取數據。并將返回的結果顯示在頁面中

具體步驟: 首頁的js文件,首先在data中注冊數據,然后在onLoad生命周期函數中添加請求數據的事件.

// pages/index/index.js
Page({data:{swiperList:[],},onLoad: function(options){wx.request({url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",success: (result) =>{this.setData({swiperList: result.data.message})}})}
})

上面準備好了輪播圖的數據,下面根據數據寫樣式

<view class="pyg_index"><!-- 搜索框 --><SearchInput></SearchInput><!-- 輪播圖 --><view class="index_swiper"><swiper autoplay indicator-dots circular><swiper-item wx:for="{{swiperlist}}" wx:key="goods_id"><navigator><image mode="widthFix" src="{{item.image_src}}"></image></navigator></swiper-item></swiper></view>
</view>

上面成功的將輪播圖展示在小程序中了：

wx:for: 使用到進入時,請求到的數據
wx:key: 綁定一個唯一值, 和vue中的key是一個意思
mode="widthFix": 表示寬度百分百,高度自適應.

下面,寫樣式

.index_swiper swiper {width: 750rpx;height: 340rpx;
}
.index_swiper swiper image {width: 100%;
}

以上完成了,最基本的輪播圖流程(請求數據 -> 展示). 但是請求接口并未封裝,可能會造成回調地獄,不利于代碼的維護.下面封裝請求數據的接口

方法封裝

為了解決回調地獄的問題,下面使用ES6提供的語法對方法進行封裝. 請求的代碼寫在了路徑request/index.js中

// request/index.js
export const request = (params) =>{return new Promise((resolve, reject)=>{wx.request({...params,success: (result) =>{resolve(result)},fail: (err) =>{reject(err)}})})
}

上面封裝了一個promise請求方法,調用如下

// pages/index/index.js
import  { request } from "../../request/index.js"Page({data:{swiperList: [],},onLoad: function(options){request({url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"}).then(result =>{this.setData({swiperList: result.data.message})})}
})

4.3 分類導航

獲取數據和設置數據同4.2,下面主要是頁面的設計

<!-- pages/index/index.wxml -->
<view class="pyg_index"><!-- 樓層導航 --><view class="index_cate"><navigator wx:for="{{cateList}}" wx:key="name"><image mode="widthFix" src="{{item.image_src}}"></image></navigator></view>
</view>

樣式如下:

.index_cate{display: flex;
}.index_cate navigator{padding: 25rpx;flex: 1;
}.index_cate navigator image{width: 100%;
}

4.4 樓層

樓層的接口

樓層請求數據和設置數據的操作同4.2。下面編寫樓層的頁面

<view class="pyg_index"><!-- 樓層 --><view class="index_floor"><view class="floor_group" wx:for="{{floorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="floor_title"><!--  標題 --><view class="floor_title"><image mode="widthFix" src="{{item1.floor_title.image_src}}"></image></view><!-- 內容 --><view class="floor_list"><navigator wx:for="{{item1.product_list}}" wx:for-index="index2" wx:key="name"><image mode="{{index2 == 0? 'widthFix' : 'scaleToFill'}}" src="{{item2.image_src}}"></image></navigator></view></view></view>
</view>

說明:

wx:for-item ='item1' 將數組中的當前項,命名為"item1"
<image mode="{{index2 == 0? 'widthFix' : 'scaleToFill'}}">: 數組中的第一項,使用widthFix模式,數組中除第一項外的項使用scaleToFill模式

上面實現了樓層的基本頁面,下面實現樣式

/* 樓層 */
.index_floor{}.index_floor .floor_group{}.index_floor .floor_group .floor_title{}.index_floor .floor_group .floor_title image{width: 100%;
}.index_floor .floor_group .floor_list{/* 清除浮動 */overflow: hidden;padding: 10rpx 0;
}.index_floor .floor_group .floor_list navigator{width: 33.33%;float: left;
}.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4){height: 27.72711207vm;border-left: 10rpx solid #fff;
}.index_floor .floor_group .floor_list navigator:nth-child(2) {border-bottom: 10rpx solid #fff;
}.index_floor .floor_group .floor_list navigator:nth-child(3) {border-bottom: 10rpx solid #fff;
}.index_floor .floor_group .floor_list navigator image {width: 100%;height: 100%;
}