小程序 --- > 點擊放大功能、獲取位置信息、文字樣式省略、頁面跳轉(navigateTo)

1. 點擊放大功能的實現

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

<!-- pages/goods_detail/index.wxml -->
<!-- 輪播圖 -->
<view class="detail_swiper">
    <swiper
    autoplay
    circular
    indicator-dots
    >
        <swiper-item
         wx: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.dataset
        const 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>
    <navigator
       open-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.js

import { 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"
        })
    }
})