Watch the root cause: the micro letter applet web-view need to refresh the page back again twice

background

In the last chapter ( : Watch the root of the micro-project vue letter applet page jump web-view does not refresh after) solves vue applet rollback does not refresh problems, it will lead to a return to refresh the page to click twice to return on one page

Problem Description

A page after page with the parameter returns from B, A page refreshes, a direct result, return to the previous page A page will need to click twice, which when clicked once or A page.

solution

  1. First, the first idea is to set about returning the button to jump directly to a page on the go; look through the data, the back button is not directly trigger functions, that can not directly control the rollback function.
  2. When looking for information, can be found indirectly trigger an unload function, so try to return the current page after clicking the button, it will immediately trigger unload method of the current page, try to jump to the previous page A in the unload inside with the following results:

    1. 在第一次点击退回,没有触发unload
    2. 再次点击退回,成功触发了unload

    Does not match expectations, it is expected to unload the first time before they can be returned to trigger the page jump

  3. So is web-view generated refresh this page, we can not get rid of, let web-view refresh this page will be able to find a lot of information, do not sort out a clue, web-view since it is the second refreshed produce, then let only refresh is not the first time can be resolved, so try to do the following:

    A B page in the pages of the web-view is set to null variable src, and then the page A on the web-view adding wx:if={{src!==''}}condition control, destruction of web-view is empty in src, and then returned through the other variable pages in the B need url passed in the last page a onShow, then we expect to set the src to a jump url, to sum up:

     A页面跳到B页面时设置A的src为空-销毁了`web-view`,退回A页面时在onShow方法在设置src的值-`web-view`被重新渲染

    The test results were expected:
    页面被刷新,且没有了A页面退回两次的情况

to sum up

1. web-view在src变化之后,会产生一个新的页面,并加入的页面栈里面
2. 刷新之后的页面回退不会有unload方法调用
3. web-view销毁重建可以避免产生新的页面
4. 销毁重建解

Since then, the program uses a small micro-channel vue nested page refreshes the core issues are resolved

Guess you like

Origin www.cnblogs.com/fenqi/p/11361118.html