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

小程序 --- 点击放大功能、获取位置信息、文字样式省略、页面跳转(navigateTo)相关推荐

小程序点击地图气泡获取气泡_气泡上的气泡
小程序点击地图气泡获取气泡 Combining two colors that are two steps apart on the Color Wheel creates a Diad Color ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
微信小程序开发之——用户登录-获取用户信息(5)，意外收获字节跳动内部资料
{{userInfo.nickName}} {{userInfo.city}} {{userInfo.gender0?"未知":userInfo.gender1?"男&q ...
微信小程序弹出用户授权弹窗，微信小程序引导用户授权，获取位置经纬度
我们在开发小程序时,有些操作必须让用户授权.比如我们获取用户位置,需要用户授权位置信息.授权操作我们需要给用户弹窗提示,在用户禁用某些权限时,又要引导用户去设置页开启相应权限.我们这里就以获取经纬度为 ...
微信小程序使用map组件地图获取位置、移动选点、逆地址解析
实现拖动地图,实现地图上选点,并解析地址效果如下图:中心图片为目标位置.红色图标为视图发生变化时移动到中心点. wxml文件: <view> <m ...
微信小程序点击分享功能
[html部分] < view class = "usermotto carDesc carDesc1"> <!-- <button class=" ...
小程序开发之 wx.getUserInfo获取用户信息方案介绍
原文链接:https://www.cnblogs.com/kenshinobiy/p/9118024.html ========================================= 背景 ...
微信小程序 # 轮播图swiper滑动到最后一页进行页面跳转
需求背景首次启动小程序时要用轮播图做展示,希望能实现滑动到最后一页自动就跳转到首页实现思路 <view class="container" id="first- ...
uniapp 小程序点击事件如何获取event对象
需要在事件中加入($event)

小程序 --- 点击放大功能、获取位置信息、文字样式省略、页面跳转(navigateTo)