支付功能
wx.request() 的封裝
//統計/同時發送異步請求代碼的次數
let ajaxTmes = 0;
export const request = (params) => {
ajaxTmes++;
//顯示加載中效果
wx.showLoading({
title: "加載中",
mask: true,
});
//定義url的公共部分
const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";
return new Promise((resolve, reject) => {
wx.request({
//解構,将請求參數按格式指派 屬性名：變量名（即值） （其中屬性名和變量名相同）
...params,
url: baseUrl + params.url,
success: (result) => {
resolve(result.data.message);
},
fail: (err) => {
reject(err);
},
//無論成功或者失敗都會回調
complete: () => {
ajaxTmes--;
if (ajaxTmes == 0) {
//關閉正在等待的圖示
wx.hideLoading();
}
}
});
})
}
使用封裝的需每個頁面檔案的js檔案中引入
//引入用來發送請求的方法 一定要把路徑補全
import { request } from "../../request/index.js";
圖示庫
阿裡雲淘寶矢量圖示庫
app.wxss(全局css配置)
- @import : 引入其他.wxss檔案樣式 使全部頁面無需引入則可調用類名的樣式
- *{}：小程式不支援通配符
- 主題顔色：通過變量來定義
--themeColor:#1296db;//定義 color:var(--themeColor);//引用-
1.less中存在變量這個知識
2.原生的css和wxss也是支援變量
-
/* 引入其他wxss樣式 使全部頁面無需引入則可調用類名的樣式 */
@import "./styles/iconfont.wxss";
/* 小程式不支援通配符 */
page,view,text,swiper,swiper-item,image,navigator{
padding:0;
margin:0;
box-sizing: border-box;
}
/* 主題顔色 通過變量來實作
1.less中存在變量這個知識
2.原生的css和wxss也是支援變量
*/
page{
/* 定義主題顔色 */
--themeColor:#1296db;
/*定義統一的字型大小 假設設計稿大小是375px
1px=2rpx
14px=28rpx */
font-size: 28rpx;
}
image{
width: 100%;
}
app.json（全局配置）
- pages 通過添加儲存（微信小程式 系統自動生成對應的檔案）
- tabBar 設定tab欄 即tab頁面 ,其中 list 最少2個頁面 最多5個頁面
"tabBar": {
"color": "#999",
"selectedColor": "#229ddd",
"backgroundColor": "",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "icons/倉庫.png",
"selectedIconPath": "icons/倉庫-change.png"
}},
json檔案（非app.json）
- 可引入元件
- 可自定義導航頂部的配置
- 可設定頁面的
{
"component": true,
"usingComponents": {}
}
元件(js檔案)
自定義元件的js
Component({
/**
* 元件的屬性清單
*/
properties: {
},
/**
* 元件的初始資料
*/
data: {
},
/**
* 元件的方法清單
*/
methods: {
}
})
1.搜尋欄元件(SearchInput)
js
<view class="search_input">
<navigator url="/pages/search/index" open-type="redirect" >搜尋</navigator>
</view>
less
.search_input{
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
navigator{
display:flex;
justify-content: center;
align-items: center;
background-color:white;
height: 100%;
border-radius: 15rpx;
color: #666;
}
}
2.标簽欄元件(Tabs)
js
// components/Tabs/Tabs.js
Component({
/**
* 元件的屬性清單
*/
properties: {
tabs:{
type:Array,
value:[]
}
},
/**
* 元件的初始資料
*/
data: {
},
/**
* 元件的方法清單
*/
methods: {
//點選事件
handleItemTap(e){
//1.擷取點選的索引
const {index}=e.currentTarget.dataset;
//2.觸發父元件的事件自定義
this.triggerEvent("tabsItemChange",{index});
}
}
})
less
/* components/Tabs/Tabs.wxss */
.tabs {
.tabs_title {
display: flex;
width: 100%;
.title_item {
display : flex;
justify-content: center;
align-items : center;
flex : 1;
padding : 15rpx 0;
}
.active {
color : var(--themeColor);
border-bottom: 5rpx solid currentColor;
}
}
.tabs_content {}
}
wxml
<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.value}}
</view>
</view>
<view class="tabs_content">
<slot ></slot>
</view>
</view>
1.view
2.navigator
- url
- open-type
3.swiper
- autoplay
- indicator-dots
- circular
4.swiper-item
5.image
- mode
- src
6.block
7.button
- open-type
- bindgetuserinfo
- type
8.scroll-view
- scroll-y
- scroll-x
9.checkbox-group
- bindchange
10.checkbox
- checked
功能子產品總結
輪播圖總結
- swiper标簽存在預設的寬度和高度*
100%*150px
- .imgae标簽也存在預設的寬度和高度*
320px*240px
- 設計圖檔和輪播圖*
1.先看一下原圖的寬高750*340
2.讓圖檔的寬高自适應寬度等于100%
3.讓swiper标簽的高度變成和圖檔的高一樣即可
- 圖檔标簽*
model屬性 渲染模式
widthFix 讓圖檔的标簽寬高和圖檔标簽的内容
商品清單
/*
1使用者上滑頁面滾動條觸底開始加載下一頁資料
1找到滾動條觸底事件微信小程式官方開發文檔尋找
2判斷還有沒有下一頁資料
1擷取到總頁數隻有總條數
總頁數=Math.ceil（總條數/頁容量pagesize）
總頁數=Math.ceil（23/18）=3
2擷取到目前的頁碼 pagenum
3判斷一下目前的頁碼是否大于等于總頁數
表示沒有下一頁資料
3假如沒有下一頁資料彈出一個提示
4假如還有下一頁資料來加載下一頁資料
1目前的頁碼++
2重新發送請求
3資料請求回來 要對data中的數組進行拼接而不是全部替換！！！|I
2下拉重新整理頁面
1觸發下拉重新整理事件需要在頁面的json檔案中開啟一個配置項
找到觸發下拉重新整理的事件
2重置資料數組
3重置頁碼設定為1
4重新發送請求
5資料請求回來需要手動的關閉等待效果
// pages/goods_list/index.js
import { request } from "../../request/index.js";
/*
1使用者上滑頁面滾動條觸底開始加載下一頁資料
1找到滾動條觸底事件微信小程式官方開發文檔尋找
2判斷還有沒有下一頁資料
1擷取到總頁數隻有總條數
總頁數=Math.ceil（總條數/頁容量pagesize）
總頁數=Math.ceil（23/18）=3
2擷取到目前的頁碼 pagenum
3判斷一下目前的頁碼是否大于等于總頁數
表示沒有下一頁資料
3假如沒有下一頁資料彈出一個提示
4假如還有下一頁資料來加載下一頁資料
1目前的頁碼++
2重新發送請求
3資料請求回來 要對data中的數組進行拼接而不是全部替換！！！|I
2下拉重新整理頁面
1觸發下拉重新整理事件需要在頁面的json檔案中開啟一個配置項
找到觸發下拉重新整理的事件
2重置資料數組
3重置頁碼設定為1
4重新發送請求
5資料請求回來需要手動的關閉等待效果
*/
Page({
data: {
tabs: [
{
id: 0,
value: "綜合",
isActive: true
},
{
id: 1,
value: "銷量",
isActive: false
},
{
id: 2,
value: "價格",
isActive: false
}
],
goodsList: []
},
//接口要的資料
QueryParams: {
query: "",
cid: "",
pagenum: 1,
pagesize: 10
},
totalPages: 1,
onLoad: function (options) {
this.QueryParams.cid = options.cid||"";
this.QueryParams.query=options.query||"";
this.getGoodsList();
// wx.showLoading({
// title:'加載中',
// });
// setTimeout(function(){
// wx.hideLoading()
// },5000)
},
//擷取商品清單資料
getGoodsList() {
request({ url: "/goods/search", data: this.QueryParams })
.then(result => {
console.log(result)
const total = result.total;
//計算總頁數
this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
this.setData({
//拼接了數組
goodsList:[...this.data.goodsList,...result.goods]
}
)
//關閉下拉重新整理的視窗
wx.stopPullDownRefresh();
})
},
//标題點選事件 從子元件傳遞過來
handleTapsItemChange(e) {
//1.擷取被點選的标題索引
const { index } = e.detail;
let { tabs } = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
},
//頁面上滑 滾動條觸底事件
onReachBottom() {
//判斷有沒有下一頁資料
if (this.QueryParams.pagenum >= this.totalPages) {
//沒有下一頁資料
wx.showToast({
title: '沒有下一頁資料'
});
}else{
//還有下一頁資料
this.QueryParams.pagenum++;
this.getGoodsList();
}
},
//下拉重新整理
onPullDownRefresh(){
//1.重置數組
this.setData({
goodsList:[]
})
//2重置頁碼
this.QueryParams.pagenum=1;
//3發送請求
this.getGoodsList();
}
})
商品詳情
/*
1發送請求擷取資料
2點選輪播圖預覽大圖
1給輪播圖綁定點選事件I
2調用小程式的api previewImage
3點選加入購物車
1先綁定點選事件
2擷取緩存中的購物車資料數組格式|
3先判斷目前的商品是否已經存在于購物車
4已經存在修改商品資料執行購物車數量++重新把購物車數組填充回緩存中
5不存在于購物車的數組中直接給購物車數組添加一個新元素新元素帶上購買數量屬性num重新把購物車數組填充回緩存中
6彈出提示
*/
緩存子產品
0.web中的本地存儲和小程式中的本地存儲的差別
1.寫代碼的方式不一樣了
web:localStorage.setItem(“key”,“value”) localStorage.getItem(“key”)
小程式：wx.setStorageSync(“key”,“value”);wx.getStorageSync(“key”);
2.存的時候 有沒有做類型轉換
web:不管存入的是什麼類型的資料，最終都會先調用以下toString(),把資料變成了字元串 再存入進去
小程式：不存在 類型轉換的這個操作 存什麼類型的資料進去，擷取的時候就是什麼類型
1.先判斷一下本地存儲中有沒有舊的資料
{time:Date.now(),data:[…]}
2.沒有舊資料 直接發送新請求
3.有舊的資料 同時 舊的資料也沒有過期
就使用本地存儲的舊資料
購物車子產品
// pages/cart/index.js
/*
1擷取使用者的收貨位址
1綁定點選事件
2調用小程式内置api擷取使用者的收貨位址
3擷取使用者對小程式所授予擷取位址的權限狀态scope
1假設使用者點選擷取收貨位址的提示框确定 authsetting scope.address
scope值true直接調用擷取收貨位址
2假設使用者從來沒有調用過收貨位址的api
scope undefined直接調用擷取收貨位址
3假設使用者點選擷取收貨位址的提示框取消
scope值false
1誘導使用者自己打開授權設定頁面(openSetting)當使用者重新給與擷取位址權限的時候
2擷取收貨地圳T
4把擷取到的收貨位址存入到本地存儲中I
2頁面加載完畢
0 onload onShow
1擷取本地存儲中的位址資料
2把資料設定給data中的一個變量
3 onShow
0 回到了商品詳情頁面第一次添加商品的時候手動添加了屬性
1 num=1；
2 checked=true；
1擷取緩存中的購物車數組
2把購物車資料填充到data中
4 全選的實作 資料的展示
1 onShow擷取緩存中的購物車數組
2 根據購物車中的商品資料所有的商品都被選中checked=true全選就被選中
5總價格和總數量
1都需要商品被選中我們才拿它來計算
2擷取購物車數組
3周遊
4判斷商品是否被選中I
5總價格+=商品的單價*商品的數量
5總數量+=商品的數量
6把計算後的價格和數量設定回data中即可可
6商品的選中
1綁定change事件
2擷取到被修改的商品對象
3商品對象的選中狀态取反
4重新填充回data中和緩存中
5重新計算全選。總價格總數量。。。
7全選和反選
1全選複選框綁定事件 change
2擷取data中的全選變量allchecked
3直接取反allchecked=la1lchecked
4周遊購物車數組讓裡面商品選中狀态跟随a1lchecked 改變而改變
5把購物車數組和allchecked重新設定回data把購物車重新設定回緩存中
8商品數量的編輯
1"+"“-”按鈕綁定同一個點選事件區分的關鍵自定義屬性
1“+”"+1"
2"""-1"
2傳遞被點選的商品id goods_id
3擷取data中的購物車數組來擷取需要被修改的商品對象
4[當購物車的數量=1同時使用者點選“”
彈窗提示（showModal）詢問使用者是否要删除
1确定直接執行删除
2取消什麼都不做
4直接修改商品對象的數量num
5把cart數組重新設定回緩存中和data中 this.setCart
9點選結算
1判斷有沒有收貨位址資訊
2判斷使用者有沒有選購商品
3經過以上的驗證跳轉到支付頁面！
*/
js es6文法
Math.ceil
…this.data.goodsList
數組拼接
goodsList:[…this.data.goodsList,…result.goods]
forEach
字元串替換 replace 正規表達式
.map
.map(v**=>**({…v,create_time_cn:(new Date(v.create_time*1000).toLocaleString())}))