zoukankan      html  css  js  c++  java
  • 关于mpvue组件不更新的的问题

    问题描述:

    1、A页面列表页面跳转到B页面提交用户资料提交完成那回退到A页面数据不刷新

    解决思路:页面跳转成功之后再去回到A页面请求新的数据传到A页面列表页(子组件)

    提交完成回退件页面重新在onShow() {}的生命周期

    A页面初始化顺便打一下生命周期,后面的的变量是小程序调用接口获取登录凭证,然后才能过去自己一下数据,这个变量有登陆成功之后数据是设置true

    不清楚的可以看一下这块登陆流程

    https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

    https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

    「调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。」

     

    回退件回到A页面,生命周期页面只执行了这个于是再看一下生命周期

    https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

    mpvue和vue差不多

    app 部分:

    • onLaunch,初始化
    • onShow,当小程序启动,或从后台进入前台显示
    • onHide,当小程序从前台进入后台

    page 部分:

    • onLoad,监听页面加载
    • onShow,监听页面显示
    • onReady,监听页面初次渲染完成
    • onHide,监听页面隐藏
    • onUnload,监听页面卸载
    • onPullDownRefresh,监听用户下拉动作
    • onReachBottom,页面上拉触底事件的处理函数
    • onShareAppMessage,用户点击右上角分享
    • onPageScroll,页面滚动
    • onTabItemTap, 当前是 tab 页时,点击 tab 时触发 (mpvue 0.0.16 支持)

    http://mpvue.com/mpvue/#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

    以上可以知道了当回退建请求在哪里写了吧,onShow生命周期且变量为true,工作日常总结,所以代码不方便发,自行脑补一下画面吧。

    2、接下来请求的新的数据但是传不到自组件

    window.location.reload()和this.$forceUpdate()   都不好使,这种暴力刷新用户体验也不好,所以pass,了
    这种也是试了
    // let pages = getCurrentPages();
    // // 获取上一级页面,即pageA的page对象
    // let prevPage = pages[pages.length - 2];
    // // 获取上一级页面,即pageA的data
    // let prevPageData = prevPage.data;

    // console.log('********mount---->', this.orderGoods)
    // console.log('获取当前----的页面栈', pages, '上一个页面prevPage---', prevPage, '上一个页面数据prevPageData---', prevPageData)
     后来想想还是把通过vuex,A页面请求数据提交到state,然后自组件从state获取渲染
    完美解决
    以上就是解决问题的思路,vuex页面共享数据,但是时时刷新这一块体验也还是不错的。
    问题还有一种思路就是本地存储也是一个办法
  • 相关阅读:
    线程循环的故事
    代码质量
    代码质量控制之异常控制
    面对象静态结构描述方法
    解决maven下载依赖包,pom文件错误问题
    Spring学习笔记
    java编程命名规范
    powershell使用
    vert.x中future的简单使用
    idea调整import包的顺序
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/11373085.html
Copyright © 2011-2022 走看看