【小程序】当前“页面B”动态更改title,点击返回按钮,更改的标题会显示在“来源页面A”

最近在做小程序的时候遇到这么一个有趣的问题,就是从A页面跳转到B页面,如果B页面需要在接口加载之后更改title,
并且如果接口请求过慢,还灭有请求完毕时就点击返回按钮回到A页面,这时B页面的请求会继续执行,并在执行完毕后修改了A页面的title。

原因

个人猜想,小程序本身属于单页面应用,代码的运行权限没有处理好,就像上面这种情况,B页面的代码穿越到了A页面的环境里面,并且执行。

解决

  1. 既然B页面的请求方法可以在A页面执行,那么在B页面的方法中获取的当前的页面路由时就有可能可以获取到A页面的路由,经过测试果然不出所料。
  2. 所以,可以这样来解决这个问题:在B页面的onLoad中获取当前页面路径,应该是/b,然后在方法中再次获取当前路径,可能是/b,也可能是/a
    若是/a,则是上面提到问题情况,这个时候就不用取改变title了,若是/b,则可以更改。

代码

// utils.js
const getCurrentRouter = function () {
  let arr = getCurrentPages(),
      len = arr.length;
  return arr[len - 1].route;
}

export {getCurrentRouter};


// b.js
import {getCurrentRouter};
import { getDataForB } from '../../../servies/services.js';

Page({
  onLoad (options) {
    this.currentRouter = getCurrentRouter();
  },
  // 获取数据
  getData () {
    getDataForB().then(() => {
      // 获取数据后判断router是否一致
      if (this.currentRouter == getCurrentRouter()) {
        wx.setNavigationBarTitle({
            title: '要修改的title'
        })
      }
    })
  }
})

个人博客:午后南杂

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 uni-app 小程序中,要在页面点击按钮分享到微信,你需要在页面的 .vue 文件中添加一个点击事件,并调用 uni.shareAppMessage API 来实现分享。 例如,你可以在 .vue 文件的 template 部分中添加一个按钮: ``` <template> <view> <button @click="share">分享</button> </view> </template> ``` 然后在 .vue 文件的 script 部分中添加 share 方法: ``` <script> export default { methods: { share() { uni.shareAppMessage({ title: '分享标题', path: '/pages/index/index', imageUrl: '/static/share.png' }); } } } </script> ``` 这样,当你点击按钮时,就调用 uni.shareAppMessage API 实现分享。 注意:分享功能只能在真机或模拟器中使用,在浏览器中是无法使用的。 ### 回答2: 在uniapp小程序中,要实现在页面点击按钮分享到微信的功能,可以按照以下步骤进行操作: 1. 首先,在需要触发分享的按钮上绑定一个点击事件。 2. 在点击事件的处理函数中,通过uni.share API来实现分享操作。uni.share是uniapp封装的一个分享接口,可以在不同平台上进行分享。 3. 在uni.share的配置参数中,设置分享的平台为微信朋友圈或微信好友。可以通过设置provider参数为'weixin'来选择微信。 4. 在uni.share的配置参数中,设置分享的标题、链接、图片等相关内容。可以通过设置title、href、imageUrl等参数来设置分享内容。 5. 调用uni.share的方法分享内容。可以通过调用uni.share方法,并传入配置参数来触发分享操作。 以上就是在uniapp小程序中实现在页面点击按钮分享到微信的简要步骤。需要注意的是,分享功能的具体实现可能涉及到微信开放平台的相关配置和权限申请,需要在开发过程中参考相关文档进行配置和调试。 ### 回答3: 在uniapp小程序中,想要实现在页面点击按钮分享到微信的功能,可以采取以下步骤。 1. 首先,在页面的视图层中通过使用按钮组件Button来创建分享按钮。例如:`<button class="share-button" @click="onShare">分享到微信</button>` 2. 在页面的逻辑层中,编写处理点击事件的函数,例如onShare,使用uni.shareAPI触发微信分享功能。代码如下: ``` methods: { onShare() { uni.share({ provider: 'weixin', type: 0, title: '分享标题', imageUrl: '分享图片的链接', success(res) { // 分享成功的回调函数 }, fail(err) { // 分享失败的回调函数 } }) } } ``` 3. 在上述代码中,provider指明分享的平台为微信,type为0表示分享到个人聊天,如果要分享到朋友圈,则type为1。title为分享的标题,可以根据需求修改。imageUrl为分享的图片链接,也可以根据需求修改。 4. 在分享成功和分享失败的回调函数中,可以执行一些操作,例如显示提示信息或者跳转到其它页面等。根据实际需求进行相应的处理。 5. 最后,在小程序的manifest.json文件中,需要添加微信分享的权限配置,确保分享功能正常工作。示例代码如下: ``` "mp-weixin": { "appid": "your_appid", // 替换为微信小程序的appid "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" // 可自定义权限说明 }, "scope.userInfo": { "desc": "你的基本信息将用于小程序用户接口的效果展示" // 可自定义权限说明 }, "scope.userLocationBackground": { "desc": "你的位置信息将在后台运行中被获取并展示" // 可自定义权限说明 }, "scope.writePhotosAlbum": { "desc": "你的图片将保存到相册中" // 可自定义权限说明 }, "scope.camera": { "desc": "你的摄影头将用于拍照和扫码" // 可自定义权限说明 } }, "tabBar": { // 小程序底部导航栏信息 } } ``` 通过以上步骤,就可以在uniapp小程序中实现在页面点击按钮分享到微信的功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值