微信小程序开发记录之五

🐒微信小程序

埋点读研

• 需求：要求统计文章的点击数pv、用户数uv、以及阅读时间
• 前端实现：主要在业务接口内埋点，将埋点信息作为一个字符串，加在post参数内，记录在服务器的接口访问日志上。
• 关于埋点，网上有很多资料，自己也去仔细了解了一下。这里有几个 感觉还不错的资料：
  埋点方案概述-迭代升级
  前端埋点的那些事

  // 统计阅读量与停留时间
  async saveInfo() {
    const stayTime = parseInt(this.outTime - this.enterTime);
    const token = this.$db.Get('token');
    const params = {
      token: token,
      time: stayTime, // 停留时间
      docId: this.articleId // 文章id
    };
    const rep = await this.POST(
      `${domain}/support/log/readWxMiniProgramDoc`,
      params
    );
  }

• 注意点
  要统计停留时间，不可避免要涉及小程序页面的生命周期。
  我的处理：
  • 进入页面，onshow()
  • 退出页面，分为 onHide()、onUnload()

onUnload() {
    let currOutTime = new Date();
    this.outTime = currOutTime;
    this.saveInfo();
  }
  onShow() {
    let currEnterTime = new Date();
    this.enterTime = currEnterTime;
  }
  onHide() {
    let currOutTime = new Date();
    this.outTime = currOutTime;
    this.saveInfo();
  }

小程序自身现存缺陷

• 问题描述：用户反馈表示，在表单输入姓名时，输入三个字，结果变成两个字。
  在小程序社区也看到有很多人遇到同样的问题。
• 问题分析：input组件
  input组件，type=’text’使用的是用户自己的输入键盘，在此情况下，bindinput 在使用中，对于输入的字符捕获不准确，可能造成此问题。

  bindinput:
  键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容

  bindblur:
  输入框失去焦点时触发，event.detail = {value: value}

• 解决：能用微信内置输入法的尽量用，必须用用户键盘的输入框则使用bindblur或@blur事件代替，另外等待微信官方解决此bug

broadcast父子组件之间传值

之前这个模块内容是由前端写死的，这次 产品要求 根据用户的孕周 推送对应的文章。

主要难点：首页代码复杂，涉及接口等众多，在不破坏之前的逻辑基础上，不能给首页增加压力。

// getArticle()获取文章数据
async getArticle() {
    let articleResp = await this.GET(`/${khaosVersion}/getuserarticle`, {
      isMock: false
    });
    if (articleResp.result === 'success' && articleResp) {
      this.articleList = articleResp.data.map(item => {
        let articleDetailShow = item.articleDetail;
        if (articleDetailShow && item.articleDetail.length > 16) {
          articleDetailShow = item.articleDetail.substr(0, 16) + '...';
        }
        return Object.assign(item, {
          articleDetailShow: articleDetailShow,
          contentImg: JSON.stringify(item.content)
        });
      });
    }
    this.$broadcast('getBabySchoolArticle', this.articleList);
    this.$apply();
  }

通过broadcast方法，实现父子组件之间传值。

// 子组件
methods = {
    onAriticleDetail(id, type, title, content) {
      this.$link(
        `/sidePackage/pages/babySchoolDetail/babySchoolDetail?articleId=${
          id}&articleType=${type}&articleTitle=${title}&content=${content}`
      );
    }
  };

🐔未解之谜

• JSON Parse Error:
  unexpected token % in JSON at position 0;

涉及内容：
通过接口获取到content，把content作为url的参数传递到下一个页面，然后取出content 放到页面中，结果 上线后，时不时出现如上错误。

部分代码：

// getArticle()方法
async getArticle() {
    let articleResp = await this.GET(······);
    if (articleResp.result === 'success') {
      this.articleList = articleResp.data.map(item => {
        return Object.assign(item, {
          contentImg: JSON.stringify(item.content)
        });
      });
    }
    this.$broadcast('getBabySchoolArticle', this.articleList);
    this.$apply();
  }

// 通过broadcast方法将数据广播到子组件
methods = {
    onAriticleDetail(id, type, title, content) {
      this.$link(
        `/sidePackage/pages/babySchoolDetail/babySchoolDetail?articleId=${
          id}&articleType=${type}&articleTitle=${title}&content=${content}`
      );
    }
  };

// 下一个页面 取出参数content
onLoad(options) {
    this.articleId = options.articleId;
    this.title = options.articleTitle;
    this.detailImgList = JSON.parse(options.content);

• 关于问题的思考：
  错误显示的是在使用JSON.parse()方法时，内容的第一位出现了%，但是在我取数据以及传递过程中，并没有出现过此符号。

  在排查前端代码没问题之后，觉得是后端返回的数据中的问题，但是咨询过后端同事，他表示他那里也不可能出现。

  在错误统计工具中，并没有发现关于这个问题的日志，于是乎，很是诧异，这怎么出现的。因为错误出现频率不高，又难以复现，也没收到反馈，更加觉得不知所错了。

  • 临时处理
    取消通过url传数据，换成 将获取到的content 放入globalData 中，直接通过globalData取出数据，从而检测globalData数据的异常情况 来再次判断是哪里出的问题。等待版本上线后的使用情况~

🐶一些优化

1、身份证空格处理：
输入身份证的时候，若有空格，自动将空格删除；

this.momCode.replace(/\s+/g, '')

2、异常提醒：
当报告状态异常时，进行显示以及样式提醒

<view class="card-wrap {{item.abnormal_state === 1 ? 'warn' : ''}}">

<text wx:if="{{item.abnormal_state === 1}}" class="red">（有异常）</text>