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

【现象描述】

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

 

【问题分析】

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

 

【解决办法】

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

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