写在最前

在开发项目过程中，碰到这么一个需求：当用户点击取消或者拒绝时，系统直接关闭小程序，返回微信客户端。
实现的功能与小程序中右上角的圆圈功能类似。

功能实现

其实功能实现起来很简单，只不过我们之前一直没有注意到，navigator 中有一个跳转方式 open-type 属性，里面的属性值有一个是 exit 即退出小程序。

微信小程序 · navigator

<navigator open-type="exit" target="miniProgram"><button class="btn" bindtap="refuse">拒绝</button>
</navigator>

实现效果：当点击 “拒绝” 时，直接退出小程序。

关联问题

当面的主要问题解决了，再看一个相关联的问题吧。

1. 去除`view`/`navigator` 点击后默认阴影效果

当我们点击时，底部会出现一个阴影，虽然没有什么其他影响，但是若不去除则影响用户体验，效果很丑。

原因：就是因为 `hover:class` 定义容器在被触发时自带的默认样式捣的鬼。

解决方案：重置 `hover-class` 的样式（为避免被覆盖，一般在 `wxss`底部添加该 `class`）：

<!-- wxml -->
<navigator open-type="exit" target="miniProgram" hover-class="noshadow"><button class="btn" bindtap="refuse">拒绝</button>
</navigator>

/* wxss */
.noshadow {hover-class: none;
}

实现效果：

问题轻松解决！

欢迎有问题的小伙伴留言讨论。。

微信小程序之实现一键退出（挂起）小程序以及如何去除 view/navigator 点击后默认阴影效果相关推荐

【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
wifi 小程序透传_微信小程序实现的一键连接wifi功能示例
本文实例讲述了微信小程序实现的一键连接wifi功能.分享给大家供大家参考,具体如下: 在已知wifi账号和wifi密码的情况下,一般采用以下的流程来连接wifi Wi-Fi 接口调用: 1.Andro ...
国庆节头像生成器微信小程序源码，可挂流量主【源码好又多】
头像生成小工具手机版截图大家好我是源码好又多,最近看到好友都有很火的国庆节头像,我就很纳闷怎么做的?问了好友,原来是小程序做的,我就闲着国庆没事做了一个. 头像生成器制作工具小程序介绍: 国庆节头像 ...
uni-app 微信小程序端-AirKiss一键配网
uni-app 微信小程序端-AirKiss一键配网发现网上很多关于微信小程序配网的文章都是微信小程序原生开发,uni-app少之又少.这篇文章就介绍一下怎么在HBuilder X使用airkiss ...
和平精英吃鸡助手微信小程序源码一键设置灵敏度键位捏脸
这是一款吃鸡小助手类型的微信小程序源码该小程序由键位,灵敏度,捏脸一键设置组合小程序内的键位设置,灵敏度设置代码是由各大主播和职业选手那些分享的然后改小程序通过全网采集而来另外里面还有捏脸数据 ...
【腾讯连连腾讯物联网入门学习第3篇】安信可IoT微信小程序全面开源，小程序上实现一键配网+控制+绑定！（源码开放）
文章目录一.简介二.开发指导 2.1 腾讯物联开发平台配置 2.2 微信小程序导入步骤三.设备开发 3.1 AT直连对接 3.2 SDK二次开发四.本人开源微信物联网控制一览表另外,不要把 ...
bmob php支付,基于Bmob在小程序端实现一键支付
基于Bmob在小程序端实现一键支付教程: 几个容易忽略的细节 1.需要先拿到openid var openId = Bmob.User.current().get('authData').weapp. ...
微信小程序客服介绍：如何设置小程序在线客服？
其实只需要解决2个问题第一步,在微信小程序中添加联系在线客服按钮第二步,接入在线客服功能,设置[自动/人工/转人工]回复等一.添加小程序客服按钮 ① 在小程序中添加客服按钮功能,点此参考官方文档 ...
微信小程序怎么实现陪诊服务_陪诊小程序怎么做
小编今天要分享的是一个服务行业的微信小程序,对于很多城市来说现在陪诊服务越来越多人需要了,不仅仅是因为子女不在老人身边,还有就是医院的服务配置设施越来越智能化,操作也基本上离不开智能机,如果有专业的陪 ...

微信小程序之实现一键退出（挂起）小程序以及如何去除 view/navigator 点击后默认阴影效果

写在最前

功能实现

关联问题

1. 去除`view`/`navigator` 点击后默认阴影效果

原因：就是因为 `hover:class` 定义容器在被触发时自带的默认样式捣的鬼。

解决方案：重置 `hover-class` 的样式（为避免被覆盖，一般在 `wxss`底部添加该 `class`）：

微信小程序之实现一键退出（挂起）小程序以及如何去除 view/navigator 点击后默认阴影效果相关推荐

最新文章

热门文章

微信小程序之实现一键退出（挂起）小程序以及如何去除 view/navigator 点击后默认阴影效果

写在最前

功能实现

关联问题

1. 去除view/navigator 点击后默认阴影效果

原因：就是因为 hover:class 定义容器在被触发时自带的默认样式捣的鬼。

解决方案：重置 hover-class 的样式（为避免被覆盖，一般在 wxss底部添加该 class）：

微信小程序之实现一键退出（挂起）小程序以及如何去除 view/navigator 点击后默认阴影效果相关推荐

最新文章

热门文章

1. 去除`view`/`navigator` 点击后默认阴影效果

原因：就是因为 `hover:class` 定义容器在被触发时自带的默认样式捣的鬼。

解决方案：重置 `hover-class` 的样式（为避免被覆盖，一般在 `wxss`底部添加该 `class`）：