标签：返回 openUrl color text isagree 应用 跳转 router font

​ 

【现象描述】

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

【问题分析】

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

【解决办法】

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

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

标签：返回,openUrl,color,text,isagree,应用,跳转,router,font
来源： https://www.cnblogs.com/developer-huawei/p/16472733.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。