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