【快应用】快应用用户协议、隐私政策内容中可以多次跳转，点击返回未能返回上一级页面，该如何处理？

 【现象描述】

用户协议和隐私政策内容中有链接跳转，多次跳转后，点击左上角返回后，不会返回到上一级链接页面，而是返回到用户协议和隐私政策页面

【问题分析】

进行多次链接跳转后，点击返回，直接返回到用户协议和隐私政策页面，是因为是在同一个页面实现的跳转，没有对返回键进行事件处理

【解决办法】

需要处理返回键事件，以实现点击返回键返回上一页面

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

代码如下

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>用户协议和隐私政策</text></div>
 
      <list class="content-warp">
        <list-item class="first-line" type="list-item">
          <text>欢迎使用快应用：</text>
        </list-item>
 
        <list-item class="primary-line" type="list-item-content">
          <text>我们郑重承诺重视并保护用户的个人信息。我们秉承“一切以用户价值为依归”的理念，增强您对信息管理的便捷性，保障您的信息及通信安全。我们严格遵守法律法规，遵循以下隐私保护原则，为您提供更加安全、可靠的服务。</text>
          <text>
            点击“同意”，即表示您同意上述内容及
            <a @click="openPage(1)" class="service">《用户协议》</a>
            与
            <a @click="openPage(2)" class="service">《隐私政策》</a>
          </text>
        </list-item>
      </list>
      <div @click="agree" class="handle-btn">
        <text>同意</text>
      </div>
      <div @click="cancel" class="disagree-btn">
        <text>不同意</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 = '用户协议'
          break;
        case 2:
          openUrl = '*'
          menuTitle = '隐私政策'
          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>

 欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh