1. 點擊放大功能的實現

需求: 點擊輪播圖中的圖片會實現放大預覽的功能。首先有輪播圖的樣式如下

<!-- pages/goods_detail/index.wxml -->
<!-- 輪播圖 -->
<view class="detail_swiper"><swiperautoplaycircularindicator-dots><swiper-itemwx:for="{{goodsObj.pics}}"wx:key="pics_id"bindtap="handlePreviewImage"data-url="{{item.pics_mid}}"><image mode="widthFix" src="{{item.pics_mid}}"></image></swiper-item></swiper>
</view>

上面給輪播圖綁定了一個點擊事件 handlePreviewImage,下面在JS文件中監聽這個事件的點擊

// pages/goods_detail/index.js
Page({// 點擊輪播圖 放大預覽handlePreviewImage(e) {const { url: current } = e.currentTarget.datasetconst urls = this.GoodsInfo.pics.map(v => v.pics_mid)wx.previewImage({current,urls: urls})}
})

使用了微信提供的previreImage方法,current是點擊進去的圖片url(String類型),urls是預覽的圖片組的url數組(數組元素,里面是String類型)

2. 底部工具欄的封裝

效果如下

2.1 基礎知識補充 - navigator

導航組件: 類似超鏈接標簽

屬性名	類型	默認值	說明
target	String	self	在哪個目標上發生跳轉,漠然當前小程序,可選值self/miniProgram
url	String	當前小程序內的跳轉鏈接
opentype	String	navigate	跳轉方式

open-type有效值

值	說明
navigate	保留當前頁面,跳轉到頁面內的某個頁面,但不能跳到tabbar頁面
redirect	關閉當前頁面,跳轉到應用內的某個頁面,但是不允許跳轉到tabbar頁面
switchTab	跳轉到tabBar頁面,并關閉其他所有非tabBar頁面
reLaunch	關閉所有頁面,打開到應用內的某個頁面
navigateBack	關閉當前頁面,返回上一頁或多級頁面,可通過getCurrentPages()獲取當前的頁面棧,決定需要返回
.exit	退出小程序,target="miniProgram"時生效

2.2 頁面骨架

<!-- pages/goods_detail/index.html -->
<!-- 底部工具欄 -->
<view class="btm-bool"><view class="bool_item"><view class="iconfont icon-kefu"></view><view>客服</view><button open-type="contact"></button></view><view class="bool_item"><view class="iconfont icon-weibiaoti-_huabenfuben"></view><view>分享</view><button open-type="share"></button></view><navigatoropen-type="switchTab"url="/pages/cart/index"class="tool_item"><view class="iconfont icon-che"></view><view>購物車</view></navigator><view class="tool_item btn_cart">加入購物車</view><view class="tool_item btn_buy">立即購買</view>
</view>

2.3 樣式

/* 底部工具欄 */
.footer_tool{position: fixed;left: 0;bootom: 0;width: 100%;height: 90rpx;background-color: #fff;display: flex;border-top: 1rpx solid #ccc;
} .footer_tool .all_chk_wrap {flex: 2;display: flex;justify-content: center;align-items: center;
}.footer_tool .total_price_wrap {flex: 5;text-align: right;padding-right: 15rpx;
}.footer_tool .total_price_wrap .total_price .total_price_text {color: var(--themeColor);font-size: 34rpx;font-weight: 600;
}
.footer_tool .order_pay_wrap {flex: 3;display: flex;justify-content: center;align-items: center;background-color: var(--themeColor);color: white;font-weight: 600;font-size: 32rpx;
}

以上使用了flex布局,值得說明的是: 使用justify-content: center + align-items: center可以很方便的實現盒子內內容的垂直居中對齊

3. 獲取收貨地址

3.1展示

首先有一個按鈕,點擊之后會獲取權限

若以前拒絕過.則會條轉到獲取權限的界面

3.2 實現

需求: 有時候某些需求需要用戶授權, 而這些權限用戶之前可能拒絕過.這就需要用到微信提供的API(openSetting),來進行重新授權

栗子: 在購物車中,當用戶在獲取收獲地址時(chooseAddress), 有可能先拒絕過獲取地址的提示.獲取信息可以使用(getSetting)API獲取.未授權時調用openSetting,授權了調用chooseAddress, 具體代碼如下:

<!-- pages/cart/index.wxml -->
<view class="receive_address_row"><view class="address_btn"><button bindtap="handleChooseAddress" plain type="primary">獲取收貨地址</button></view>
</view>

上面實現了收貨地址的一個按鈕,下面通過JS和微信提供的API來實現收貨地址的邏輯:

• 首先獲取狀態,判斷是否運行訪問地址
  • 否: 調用獲取權限的API
  • 是: 不做處理
• 接下來通過獲取地址的api來獲取用戶的地址
• 成功后將用戶的地址放入到微信提供的緩存中,鍵設置為: address

在實現以上邏輯之前,需要將微信提供的API封裝成Promise形式,避免回調地獄

// utils/asyncWx.js// 封裝 獲取用戶授權信息
export const getSetting = () =>{return new Promise((resolve, reject)=>{wx.getSetting({success: res=>{resolve(res)},fail: err=>{reject(err)}})})
}// 封裝 獲取地址API
export const chooseAddress = () =>{return new Promise((resolve, reject)=>{wx.chooseAddress({succcess: res=>{resolve(res)},fail: err =>{reject(err)}})})
}// 封裝 重新授權API
export const openSetting = () =>{return new Promise((resolve, reject) =>{wx.openSetting({success: res=>{resolve(res)},fail: err =>{reject(err)}})})
}

之后利用上面封裝的接口,實現獲取收貨地址的邏輯

// pages/cart/index.jsimport { getSetting, chooseAddress, openSetting } from "../../utils/asyncWx.js";Page({// 點擊 獲取收貨地址async handleChooseAddress() {try{// 獲取權限狀態const res1 = await getSetting();const scopeAddress = res1.authSetting["scope.address"];// 判斷是否授權if(scopeAddress == false){// 未授權, 重新獲取授權await openSetting();}// 到這里是獲取了授權, 直接獲取用戶的地址信息const address = await chooseAddress();// 將用戶的地址信息緩存到微信提供的緩存中.wx.setStorageSync("address", address);} catch (err){console.log(err);}}
})

4.文字省略的樣式

4.1 展示

需求: 在項目中,有的文字出現長度,超過了給定長度,這個時候,往往需要將超出部分隱藏,用省略號代替

以上第二行超出了長度.用省略號表示

4.2栗子

栗子: 下面給出一個標題部分,第二行超出隱藏用省略號代替的栗子

.goods_name{display: -webkit-box;overflow: hidden;-webkit-box-orient: vertival;-webkit-line-clamp: 2;
}

5. 購物車頁面跳轉

需求: 購物車完成結算驗證之后會跳轉到支付頁面。關鍵API在navigateTo.

下面附上購物車的計算部分代碼

<!--pages/cart/index.wxml-->
<!-- 結算 -->
<view class="order_pay_wrap" bindtap="handlPay">結算{{totalNum}}
</view>

// pages/cart/index.js
Page({async handlPay(){const {address, totalNum } = this.data;// 判斷有沒有選擇收貨地址if(!address.userName) {await showToast({ title: "您還沒有選中收貨地址" })return;}// 判斷商品數量if(totalNum ==0 ){await showToast({ title: "您還沒有選購商品" });return;}// 跳轉到支付頁面wx.navigateTo({url: "/pages/pay/index"})}
})