已解决 微信小程序uniapp使用video的时候全屏方法@fullscreenchange会执行两次

原因:fullscreenchange事件会在进入全屏和退出全屏时各触发一次。所以全屏切换期间会触发两次该事件。

解决方案:

 

js

Copy code

  1. 在监听fullscreenchange事件时,使用变量进行防抖处理。比如设置一个变量来记录上一次的全屏状态,只有当状态真正发生改变时才执行处理逻辑。
    		fullScreen(e) {
    				let lastFullscreen = false;
    				const isFullscreen = e.detail.fullScreen
    				console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    				if (isFullscreen !== lastFullscreen && lastFullscreen == true) {
    					// 状态改变,执行处理逻辑
    					if (!isFullscreen) {
    						lastFullscreen = false;
    						console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    						this.videoContext.requestFullScreen();
    					} else {
    						lastFullscreen = true;
    						console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    						this.videoContext.exitFullScreen();
    					}
    
    				}
    			},

  2. 使用setTimeout及清除定时器的方式防抖,只在fullscreen状态稳定后的一次事件中处理。
  3. 在微任务队列中处理事件回调,这样可以合并连续的fullscreenchange事件。
  4. 根据全屏切换的场景,通过代码直接控制只监听必要的全屏事件。比如只在视频全屏时才监听。
下面是一个简单的 UniApp 微信支付流程代码示例: 1. 引入微信 SDK 在 `main.js` 引入微信 SDK: ```javascript import Vue from 'vue' import App from './App' import { WechatPlugin } from 'uni-comps' Vue.use(WechatPlugin) ``` 2. 配置微信支付参数 在 `manifest.json` 配置微信支付相关参数,例如 AppID、AppSecret、商户号等: ```json { "mp-weixin": { "appid": "wx1234567890", "wechatpay": { "partnerid": "1234567890", "partnerkey": "abcdefghijklmnopqrstuvwxyz", "certpath": "/static/cert/apiclient_cert.pem", "keypath": "/static/cert/apiclient_key.pem" } } } ``` 3. 发起支付请求 在前端页面发起支付请求,如下所示: ```javascript // 在页面引入 WechatPlugin import { WechatPlugin } from 'uni-comps' // 定义支付参数 const payData = { appid: 'wx1234567890', partnerid: '1234567890', prepayid: '1234567890', noncestr: 'abcdefghijklmnopqrstuvwxyz', timestamp: '1234567890', sign: 'abcdefghijklmnopqrstuvwxyz' } // 调用微信支付 API Vue.prototype.$wechat.pay(payData).then((res) => { console.log('支付成功:', res) }).catch((err) => { console.log('支付失败:', err) }) ``` 4. 后端签名与处理 在后端服务器进行签名和支付请求的处理,示例代码如下: ```php // 获取支付参数 $appid = 'wx1234567890'; $partnerid = '1234567890'; $prepayid = '1234567890'; $noncestr = 'abcdefghijklmnopqrstuvwxyz'; $timestamp = '1234567890'; $sign = 'abcdefghijklmnopqrstuvwxyz'; // 构造签名字符串 $params = [ 'appid' => $appid, 'partnerid' => $partnerid, 'prepayid' => $prepayid, 'noncestr' => $noncestr, 'timestamp' => $timestamp, 'package' => 'Sign=WXPay' ]; ksort($params); $str = ''; foreach ($params as $key => $val) { $str .= $key . '=' . $val . '&'; } $str .= 'key=abcdefghijklmnopqrstuvwxyz'; // 计算签名 $sign = strtoupper(md5($str)); // 返回支付参数 $result = [ 'appid' => $appid, 'partnerid' => $partnerid, 'prepayid' => $prepayid, 'noncestr' => $noncestr, 'timestamp' => $timestamp, 'package' => 'Sign=WXPay', 'sign' => $sign ]; echo json_encode($result); ``` 需要注意的是,上述代码只是一个简单的示例,实际应用需要考虑更多的安全性和错误处理。同时,微信支付 API 的使用和参数可能发生变化,需要根据实际情况进行调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值