小程序 --- > 点击放大功能、获取位置信息、文字样式省略、页面跳转(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"
        })
    }
})