微信小程序:中途退出原页面,再次进入无法回到退出时的位置

相信很多微信小程序的开发者都会碰到这样的问题,那今天我们就来详细的看下如何解决

一、使用 scroll-view 组件保存滚动位置

  1. wxml 文件中,使用 scroll-view 组件包裹需要滚动的内容。
  2. data 中定义一个变量来存储 scroll-viewscroll-top 属性值。
  3. scroll-viewbindscroll 事件中,实时更新存储的 scroll-top 值。
  4. 当再次进入页面时,将存储的 scroll-top 值设置到 scroll-viewscroll-top 属性上。

二、使用页面栈保存页面信息

  1. onHideonUnload 生命周期函数中,将当前页面的滚动位置等信息存储到 getCurrentPages 获取的页面栈中。
  2. onShow 生命周期函数中,从页面栈中取出存储的信息,并恢复滚动位置等状态。

以下是一个使用 scroll-view 组件的具体实现示例:

wxml 文件

<scroll-view scroll-y="true" bindscroll="onScroll" scroll-top="{
    {scrollTop}}">
  <!-- 这里放置你的页面内容 -->
  <view wx:for="{
    {list}}" wx:key="index">{
  {item}}</view>
</scroll-view>

js 文件

Page({
   
  data: {
   
    scrollTop: 0, // 存储 scroll-view 的 scroll-top 属性值
    list: [] // 假设这是页面中的列表数据
  },

  onLoad: function
### 微信小程序激励式插件的创建、使用与集成 #### 插件概述 微信小程序中的激励式广告是一种通过用户完成特定动作(如观看一段视频)来获取奖励的形式。这种形式仅能够增加用户的参与度,还能为开发者带来额外收入。 #### 开通流量主服务 为了在小程序中集成激励式广告,首先需要开通流量主服务。这一步骤可以在微信公众平台的小程序管理界面找到并按照指引完成设置[^1]。 #### 广告组件引入 一旦流量主审核通过,下一步是在项目文件`app.json`或页面配置文件中声明所需使用的广告组件: ```json { "usingComponents": { "ad": "weixin-ad" } } ``` #### 页面布局调整 接着,在WXML模板里定义好放置广告的位置,并指定样式类名以便后续控制显示隐藏状态: ```xml <!--index.wxml--> <button bindtap="showRewardVideoAd">看视频得金币</button> <ad unit-id="your_ad_unit_id" ad-type="rewardvideo" bindload="onRewardedVideoAdLoad" binderror="onRewardedVideoAdError" bindclose="onRewardedVideoAdClose"></ad> ``` #### JavaScript交互逻辑编写 最后也是最重要的部分——JavaScript代码实现了整个流程的核心业务逻辑。这里包含了初始化广告实例、监听事件以及处理回调函数等功能: ```javascript // index.js Page({ data: {}, onLoad() { this.rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'your_ad_unit_id' }); // 设置错误重试机制 let retryCountDown = null; const startRetryCountdown = () => { clearInterval(retryCountDown); let count = 5; // 延迟五秒再尝试重新加载 retryCountDown = setInterval(() => { console.log(`正在等待${count--}s`); if (count === 0) { clearInterval(retryCountDown); this.loadRewardVideoAd(); } }, 1000); }; this.rewardedVideoAd.onError(err => { console.error('激励视频 广告拉取失败', err); startRetryCountdown(); }); this.rewardedVideoAd.onClose(res => { // 用户点击了【关闭广告】按钮 if (!res.isEnded) { // 若用户中途退出,则给予任何奖励 console.warn('未看完'); } else { // 否则正常发放奖励 console.info('已看完, 可以下发游戏币或其他奖励'); } setTimeout(() => { this.loadRewardVideoAd(); // 关闭之后再次预加载下一次展示所需的资源 }, 30 * 1000); // 这里的延迟间可以根据实际情况调整 }); this.loadRewardVideoAd(); }, showRewardVideoAd() { try { this.rewardedVideoAd.show().catch(err => { if (err.errCode === 100007 || err.errMsg.includes('not ready')) { this.loadRewardVideoAd(); } }); } catch (e) {} }, loadRewardVideoAd() { this.rewardedVideoAd && this.rewardedVideoAd.load() .then(() => console.log('激励视频 广告加载成功')) .catch(e => console.error('激励视频 广告加载失败:', e)); } }); ``` 上述代码片段展示了如何在一个简单的场景下调用激励视频广告接口,并且针对可能出现的问题提供了相应的解决方案,比如当广告未能及准备好自动重载等措施。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值