组内业务开发总结

2021-06-20 | 阅读：次

埋点上报失败问题

killwebview客户端关闭当前webview, 导致埋点上报失败问题。

埋点上报为异步请求，需等1000ms延时执行killwebview。
埋点上报时，若使用 window.location.href 跳转时，也需要延时执行。

部分情况nativeOpen新开webview空白

最好使用encodeURI对url进行编码，不然地址有中文字符时，跳转有问题。

const wapUrl = encodeURI(`${window.location.origin}/wukong-app/order/order-detail?order_id=${orderId}&sub_order_id=${subOrderId}&previous_source=付款详情页`);
nativeOpen('web', {
  url: btoa(wapUrl),
});
killWebView();

部分图片在ios下手机不显示

测试环境开口秀背景图在ios手机不显示。本地扫码正常，删除content也无效。最后换图解决。

有些图片本事显示就是有问题，可以考虑换图。

JSON.parse() 错误处理。避免由于字段问题引发js运行中断。

/**
* @description 捕获无效JSON解析错误
*/
export function parseJSONSafely(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    // 返回默认对象，或根据用例返回null。
    return {};
  }
}

公用组件尽量不要添加业务逻辑，比如埋点什么的，减少维护成本。

最近在使用一个弹窗组件，但是每个课程上报的埋点以及文案不一致。

看到之前的业务写法是，在这个组件加课程类型判断，修改文案以及上报埋点等。维护起来及其不便。

父子级使用$emit
多层级使用 provide/inject

CourseFooter.vue

// 挽留弹窗使用
provide() { // 注意需要写成函数
  return {
    showTips: ['超值优惠福利', '动画无限回放', '贴心成长顾问'],
    buyText: '继续报名',
    sensorsLeavePopClickHandle: this.sensorsLeavePopClickHandle,
    sensorsLeavePopOverlay: this.sensorsLeavePopOverlay,
  };
},

isLeaveMask.vue

export default {
  inject: {
    showTips: {
      type: Array,
      default() {
        return ['超值优惠福利', '动画无限回放', '贴心成长顾问'];
      }
    },
    buyText: {
      type: String,
      default() {
        return '继续购买';
      }
    },
    sensorsLeavePopClickHandle: {
      type: Function,
    },
  },
  methods: {
    reject() {
      this.sensorsLeavePopClickHandle('拒绝');
      this.$emit('reject');
    },
    buy() {
      this.sensorsLeavePopClickHandle(this.buyText.slice(2));
      this.$emit('buy');
    },
  }
  };

vuex getters 命名重复问题，导致使用疑惑以及代码报错。

最近用到别人代码使用了activityInfo属性获取信息，但是发现怎么也获取不到，别的页面就可以。后来仔细排查发现。

course.js 下state 已经声明 activityInfo ，getters 又重新定义activityInfo导致使用疑惑以及引入混乱。

这种需要一个文件同时使用的情况，又不能更改store.js定义的名字。可以如下处理，重新定义一个变量名字serviceInfo区分。

...mapState('course', [
  'isBuyZero',
  'isOldUser',
  ...
]),
...mapState('course', {
  serviceInfo: state => state.activityInfo
}),
...mapGetters('course', ['activityInfo', ...]),

一次提测延期问题

开发优先开发需要跟客户端接口联调，以及微信分享支付相关功能。避免提测前问题太多，时间紧急。

需求问题更改，需走排期。

ios下使用transform引发圆角样式失效

img 父级border-radius，overflow:hidden 失效。

原因由于父级使用了transform属性，对img也border-radius即可。

img元素transform也会导致圆角失效。

下单接口带上网络状态参数

端内购课场景,需要在创建订单的时候增加network_type字段,该字段含义为当前设备的网络状态

方案一: 采用h5的networkInformation属性的type字段去校验,但是h5当前属性已经废弃

方案二: 采用jsBridge调用端的能力获取,但是是异步过程

采用方案二+promise的写法需要考虑jsBridge失效或者出错的情况

function getNetworkType() {
  return new Promise((resolve, reject) => {
    try {
      getNetworkStatus(status => {
        switch (status) {
          case '2':
            resolve('wifi');
            break;
          default:
            resolve('4g');
            break;
        }
        setTimeout(() => {
          resolve();
        }, 800);
      });
    } catch (e) {
      reject(e);
    }
  });
}

调用
export async function createOrderNew(data) {
  const url = '/shop/order/create';
  data.network_type = await getNetworkType();
  return getData({
    url,
    data,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    isToastErr: false,
  }}