自定义导航栏讨论 about undergraduate

[SoloJiang]

BaseContainer 提上议程，目前自定义导航栏以及打点等多处需要使用到容器的概念。

[SoloJiang]

现在内部版本是把自定义导航栏作为独立组件的形式去做，在每一个页面需要去引入该组件。这种方式是否合理？目前还有一种可以想到的方案，每个页面都引入一个 BaseContainer 组件，作为容器。对于导航栏的控制参考 react-navigation 去做。同时这样有一个好处就是，可以实现类似 Vue-Router 中 beforeEachEnter 之类的其他功能。甚至包括解决 Wepy 无法使用 Vue 的 extend 机制，能够去合理的处理弹窗等组件。将它们都划为基础页面本身的一部分。

[GooeyNyan]

改动成本有多大啊？
目前计划是只在需要这些的页面改还是全部都加上？
最近有没有很急的需求呐，人力够不够？

[SoloJiang]

没有很急的需求，改动成本可能比当时加自定义导航栏要小一些

[UZIhuhuhu]

内部代码中，BaseContainer 已经整合了自定义导航栏和弹窗，以及后续的页面级打点
核心代码如下：

import wepy from "wepy";
import QyNavigation from "./qy-navigation";
import QyModal from "./qy-modal";
import QyModalGraduate from "./qy-modal";
import { changeSecretCode, changeSecretCodeLower } from "@/api/common";
export default class BaseContainer extends wepy.component {
  components = {
    QyNavigation,
    QyModal,
    QyModalGraduate
  };
  data = {
    password: "",
    name: "",
    graduateModelStatus: false,
    passwordModelStatus: false,
    placeholder: ""
  };
  props = {
    navTitle: {
      type: String,
      default: "NJUPT"
    },
    graduateModelProps: {
      type: Boolean,
      default: false
    },
    passwordModelOptions: {
      type: Object,
      twoWay: true,
      default: {
        passwordModelProps: false,
        placeholder: "",
        bindInfo: { firstParam: "", thirdParam: "" },
        checkPassword: function() {
          return null;
        }
      }
    }
  };
  watch = {
    passwordModelOptions(next) {
      const { passwordModelProps } = next;
      this.passwordModelStatus = passwordModelProps;
      this.$apply();
    }
  };
  methods = {
    passwordInput({ detail: { value } }) {
      this.password = value;
    },
    closeGraduateModel() {
      this.graduateModelStatus = false;
    },
    async bindPassword() {
      let secretInfo;
      const {
        bindInfo: { firstParam, thirdParam },
        checkPassword
      } = this.passwordModelOptions;
      const bindPasswordInfo = [firstParam, this.password, thirdParam];
      console.log(bindPasswordInfo);
      if (this.getCurrentPage() === "edu-admin-page/credit") {
        secretInfo = await changeSecretCodeLower.apply(this, bindPasswordInfo);
      } else {
        secretInfo = await changeSecretCode.apply(this, bindPasswordInfo);
      }
      if (secretInfo.data) {
        this.closePasswordModel();
      }
    }
  };
  closePasswordModel() {
    this.passwordModelStatus = false;
  }
  getCurrentPage() {
    const pages = getCurrentPages();
    const pageLength = pages.length;
    return pageLength ? pages[pageLength - 1].route : null;
  }
  goBack() {
    // 离开页面的打点
    wepy.navigateBack();
  }
  onLoad() {
    this.graduateModelStatus = this.graduateModelProps;
    const { placeholder } = this.passwordModelOptions;
    this.placeholder = placeholder;
    this.name =
      wepy.getStorageSync("User").name || wepy.getStorageSync("userInfo").name;
    this.$apply();
  }
}