一、引導

這個視頻真良心，up主將的是真不錯，感興趣的小夥伴，可以去學習一下，個人建議，可以先去學習一下vue,然後再來學習這個視頻，就會有種似曾相識，又有一種豁然開朗的感覺。酸爽哦。

小程序學習教程地址

二、項目搭建

1、新建小程序項目

安裝微信開發者工具後，創建項目，填寫項目名，和AppID.

2、搭建目錄結構

3、搭建項目的頁面

4、引入字體圖標

阿里巴巴字體圖片庫

打開阿里巴巴字體圖標網站
選擇圖標，進入購物車查看
將圖標添加至項目
選中font class ,然後點擊查看在線鏈接。
就可以獲取css樣式了，然後粘貼進小程序的全局wxcss中，引用jiuOK了。

5、搭建tabbar結構

在全局的app.json中搭建tabbar結構

三、項目頁面實現（一）

小程序全局配置(app.json)

全局配置

單頁面配置(Page)

page

1、首頁效果圖

1、自定義組件

使用場景，多個頁面都需要使用重複內容時，就可以用自定義組件，

新建components目錄，在目錄中新建子組件文件夾，然後新建組件，父組件引用子組件。

2、輪播圖，swiper、swiper-item組件

swiper中使用swiper-item組件來構建輪播圖。

3、數據獲取wx.request，wx.showLoading顯示加載中

這裏需要通過發送一步請求獲取數據。獲取數據需要在響應的頁面導入

import {request} from "../../request/index.js"

注意：這裏的異步請求可能會嵌套異步請求，會容易死循環，所以這裏利用ES6中的promise來進行優化，防止出現回調地獄的問題

有關回調地獄的問題

promise的具體介紹和使用

優化後的代碼

pormise詳解

2、優化獲取數據，將基本路徑提取出來。

// 定義變量，標記同時發送異步的次數
let ajaxTimes=0;
export const request=(params)=>{
    ajaxTimes++;
    // 顯示加載中
    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);
            },
            fail:(err)=>{
                reject(err);
            },
            complete:()=>{
                ajaxTimes--;
                if(ajaxTimes==0){
                    // 關閉等待的圖標   
                    wx.hideLoading();
                }
            }
        });    
    })
}

同時獲取數據使用es7的async語法，這裏使用async語法，記得在小程序開發工具中的詳情中的本地設置勾選增強編譯。不然就需要使用別的方法。

4、使用本地存儲wx.setStorageSync

數據緩存

使用本地存儲，和web類似，但是需要注意使用格式。本地存儲有過期事件

如果你第一次獲取數據，存入到本地，可以不用發送請求獲取數據。優化應用。

/**
     * 0 web 中的本地存儲 和 小程序的本地存儲不一樣
     *  1 寫代碼的方式不一樣了
     *   web：localStorage.setItem("key","value")  localStorage.getItem("key")
     *   小程序中：wx.setStorageSync("key","value"); wx.getStorageSync("key");
     *  2： 存的時候 ，有沒有做類型轉換
     *    web:不管存入的是什麼類型的數據，最終都會先調用一下toString(),把數據變成了字符串，在存入
     *    小程序：不存在，類型轉換的的操作， 存什麼類型的數據進去，獲取的時候就是什麼類型
     * 1、先判斷本地存儲中有沒有數據
     */
    wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});

2、tabbar商品分類效果圖

1、scroll-view組件

1、scroll-veiw使用說明

2、navigator超鏈接組件

1、navigator組件使用說明

3、商品列表

1、結構介紹

1、搜索欄是使用之前的自定義組件

2、下面的頁面內容，包括標題，商品列表使用的也是一個自定義組件

2、Tabs自定義組件、slot插槽

標題欄還是用原來的方法，父子組件之間的數值傳遞，事件觸發。

不同的是商品類別的內容。在子組件中使用了插槽，這樣就可以在父組件中編寫商品列表了。

 <view class="tabs_content">
        <slot></slot>
    </view>

在父組件中的子組件編寫內容。

4、上拉觸底、下拉刷新功能

這兩個函數頁面中的時間處理函數，其中wx.showToast，顯示觸底提示。

wx.hideLoading();關閉下拉加載提示。

框架接口頁面（Page）

5、商品詳情

這裏主要就是兩個點

1、點擊輪播圖圖片大圖預覽。

2.圖文詳情顯示的問題，因爲沒有固定的格式。

1、wx.previewImage點擊輪播圖圖片大圖預覽

這裏用到了wx.previewImage函數，去實現圖片大圖閱覽。

2、rich-text 富文本組件

富文本組件，可以將html代碼完全解析出來。

<rich-text nodes="{{goodsObj.goods_introduce}}"></rich-text>

注意：蘋果手機解析不了這種格式的html中的圖片格式，需要與後臺練習，或者做一下替換成.jpg。

四、頁面實現（二）

1、加入購物車功能

其中wx.showToast()是彈出提示

duration:延遲操作

mask: 是否顯示透明蒙層，防止觸摸穿透

2、購物車

1、效果圖

2、功能實現

以下九個功能實現中有一些要記住的：

wx.getSetting()：用戶請求過的權限信息

wx.chooseAddress()：獲取地址

獲取地址在使用前，需要授權：res1.authSetting[“scope.address”]：權限狀態是否開啓

**openSetting()：**開啓誘導，讓用戶重新去授權。

**showToast()：**彈框提示，沒什麼好說的

**wx.navigateTo（）：**路由跳轉

**cart.splice(index,1)：**數組刪除

**async：**用到最多的就是es7的promis 形式，這裏應該是異步請求。重點

**傳參：**頁面一般用data-X 來傳遞參數，數據會存的數據源中。例如：e.currentTarget.dataset中。

獲取用戶的收貨地址
頁面加載時，獲取數據顯示
onShow，頁面加載，給商品添加num、checked屬性。
複選框全選的判斷
計算總價格和總數量
商品選中功能切換
全選和反選
商品數量的+、- 編輯
結算跳轉

1、獲取用戶的收貨地址
 *    1、綁定點擊事件
 *    2、調用小程序內置 api 獲取用戶的收貨地址 wx.chooseAddress
 * 
 *    2、 獲取 用戶  對小程序  所授予 獲取地址 權限 狀態 scope
 *      1、 假設用戶 點擊獲取收貨地址的提示框 確定 authSetting scope.address
 *        scope 值 true  直接調用 收貨地址
 *      2、 假設 用戶 點擊獲取收貨地址的提示框 取消
 *        scope  falsev
 *      3、 假設 用戶 從來沒有調用過 收貨地址api
 *        scope  undefined  直接調用 收貨地址 
 *        1、誘導用戶 自己 打開 授權設置界面 當用戶重新給與 獲取地址的權限的時候
 *        2、獲取收貨地址
 *      4、 把獲取到的地址，存入本地緩存中
 *  2、頁面加載時
 *    1、獲取緩存中存儲的地址
 *    2、將數據存入data中
 *    3、在頁面顯示  
 *  3、 onShow
 *    0、回到商品詳情頁面，第一次添加商品的時候，手動添加了屬性
 *        1、 num = 1;
 *        2、 checked = true;
 *    1、 獲取緩存中的購物車數據，
 *    2、 將數據填充到data中
 *  4、全選數據
 *     1、在onShow頁面加載時，判斷所有商品是否選擇，如果選擇，就把全選勾上
 *     2、在data中定義allChecked變量
 * 5、總價格 和總數量
 *    1、都需要商品被選中，我們才計算
 *    2、獲取購物車數組
 *    3、遍歷
 *    4、判斷checked
 *    5、總價格 += 商品的單價* 數量
 *    6、總數量 += 商品的數量
 *    7、把數據設置會data中。
 * 6、商品選中功能切換
 *   1、綁定change事件
 *   2、獲取被修改的商品對象
 *   3、商品對象的checked取反
 *   4、重新填充回data、緩存中
 *   5、重新結算全選、總價格、總數量。。
 * 7、全選和反選
 *    // 1、獲取data中全選，cart的值
 *    // 2、改變allchecked 的狀態
 *    // 3、改變cart中的checked狀態
 *    // 4、把數據放回去
 * 8、商品數量的編輯
 *    1、“+”，“-” 綁定同一事件、區分的關鍵、自定義屬性
 *      1、“+”  “+1”
 *      2、”-“  ”-1“
 *   1、先獲取商品id、和操作符
 *   2、獲取購物車數組
 *   3、根據商品id,拿到商品索引
 *   4、修改商品的num，當num=1,用戶點擊 “-”
 *      1、彈窗提示，是否要刪除。  wx.showModal彈窗
 *        確定刪除、取消不操作。
 *   5、把數據返回去
 * 9、結算跳轉
 *    1、判斷是否有收穫地址
 *    2、判斷購物車是否爲空
 *    3、跳轉到支付頁面

HM品優購小程序開發(一)

文章目錄