[quick application] quick application user agreement and privacy policy content can jump many times. Click back and fail to return to the previous page. How to deal with it?

【 Phenomenon description 】

There is a link jump in the user agreement and privacy policy , After multiple jumps , Click the upper left corner to return , Will not return to the previous link page , Instead, return to the user agreement and privacy policy page

 

【 Problem analysis 】

After many link jumps , Click on the return , Return directly to the user agreement and privacy policy page , Because the jump is realized on the same page , There is no event processing for the return key

 

【 terms of settlement 】

You need to handle the return key event , Click the back button to return to the previous page

onBackPress() {            this.$element('web').canBack({                callback: function (e) {                    if (e) {                        this.$element('web').back();                    } else {                        router.back();                    }                }.bind(this)            });            return true;        },

The code is as follows

service.ux

<template>  <web id="web" src="{{openUrl}}"></web></template><script>    import router from '@system.router'    export default {        public: {            openUrl: '',            menuTitle: ''        },        onInit() {            let { openUrl, menuTitle } = this            this.openUrl = openUrl            this.$page.setTitleBar({ text: menuTitle, textColor: '#000', backgroundColor: '#FFFFFF', backgroundOpacity: 0.5, menu: true })        },        onBackPress() {            this.$element('web').canBack({                callback: function (e) {                    if (e) {                        this.$element('web').back();                    } else {                        router.back();                    }                }.bind(this)            });            return true;        },     }</script>

userAgreement.ux

<template>  <div class="label">    <div class="content">      <div class="title"><text> User agreement and privacy policy </text></div>       <list class="content-warp">        <list-item class="first-line" type="list-item">          <text> Welcome to quick app ：</text>        </list-item>         <list-item class="primary-line" type="list-item-content">          <text> We solemnly promise to pay attention to and protect users' personal information . We uphold “ All based on user value ” Idea , Enhance your convenience of information management , Ensure your information and communication security . We strictly abide by the laws and regulations , Follow the following privacy protection principles , Provide you with more security 、 Reliable service .</text>          <text>             Click on “ agree! ”, That means you agree to the above and             <a @click="openPage(1)" class="service">《 User agreement 》</a>             And             <a @click="openPage(2)" class="service">《 Privacy policy 》</a>          </text>        </list-item>      </list>      <div @click="agree" class="handle-btn">        <text> agree! </text>      </div>      <div @click="cancel" class="disagree-btn">        <text> Disagree </text>      </div>    </div>  </div></template><script>  export default {    onInit() {     },    openPage(flag) {      this.$emit('openServicePage', { flag })    },    agree() {      this.$dispatch("dispatchEvent", {        display: false,        isagree: "agree"      });    },    cancel() {      this.$app.exit();    }  }</script> <style lang="less">  .content {    padding: 30px;    border-radius: 12px;    width: 600px;    flex-direction: column;    align-items: center;    background-color: #fff;    .title {      text {        font-weight: bold;        color: #000000;        font-size: 36px;      }    }    .content-warp {      height: 500px;      flex-direction: column;      .service {        color: #007aff;        text-decoration: underline;      }      .first-line {        flex-direction: column;        text {          font-weight: bold;          color: #000000;          font-size: 32px;        }      }      .primary-line {        flex-direction: column;        text {          text-indent: 40px;        }      }    }    .handle-btn {      width: 474px;      height: 82px;      border-radius: 41px;      justify-content: center;      align-items: center;      background-color: #d63016;      margin-top: 30px;      text {        font-weight: 600;        color: #fff;        font-size: 34px;      }    }    .disagree-btn {      margin-top: 30px;      text {        font-weight: 600;        font-size: 34px;      }    }  }  .label {    position: fixed;    top: 0;    right: 0;    left: 0;    bottom: 0;    background-color: rgba(0, 0, 0, 0.8);    flex-direction: column;    justify-content: center;    align-items: center;  }</style>

hello.ux

<import name="userAgreement" src="./UserAgreement/userAgreement.ux"></import><template>  <!-- Only one root node is allowed in template. -->  <div class="container">    <stack>      <text class="title" onclick="save">Hello World</text>      <block if="{{ display }}">        <userAgreement onopen-service-page="openServicePage"></userAgreement>      </block>    </stack>  </div></template><style>  .container {    flex-direction: column;    justify-content: center;    align-items: center;    background-color: #d39b75;  }  .title {    font-size: 100px;  }</style><script>  import storage from "@system.storage";  import router from '@system.router'  module.exports = {    private: {      display: false,      isagree: "disagree"    },    onInit() {      this.$page.setTitleBar({        text: "hello",        textColor: "#ffffff",        backgroundColor: "#007DFF",        backgroundOpacity: 0.5,        menu: true      });    },    openServicePage({ detail: { flag } }) {      let openUrl, menuTitle      switch (flag) {        case 1:          openUrl = '*'          menuTitle = ' User agreement '          break;        case 2:          openUrl = '*'          menuTitle = ' Privacy policy '          break;        default:          break;      }       router.push({        uri: 'Hello/Service',        params: {          openUrl,          menuTitle        }      })    },    onShow(options) {      var that = this;      that.get()      setTimeout(() => {        if (that.isagree === "agree") {          that.display = false;        } else {          setTimeout(() => {            that.display = true;          }, 100);        }      }, 500);      console.log("message:", that.isagree);      this.$on("dispatchEvent", this.dispatchEvent);    },    dispatchEvent(evt) {      this.display = evt.detail.display;      this.isagree = evt.detail.isagree;      this.save(this.isagree);    },    save(params) {      storage.set({        key: "agreeFlag",        value: params,        success: function (data) {          console.log("handling success");        },        fail: function (data, code) {          console.log("handling fail, code = " + code);        }      });    },    get() {      var that = this;      storage.get({        key: "agreeFlag",        success: function (data) {          that.isagree = data;          console.log("handling success", data);        },        fail: function (data, code) {          console.log("handling fail, code = " + code);        }      });    }  };</script>

 

  For more technical articles , Welcome to visit https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh