前端项目开发过程中遇到的问题若干

字符串

	原代码
	 ruleForm.customerPhone = data.externalPhone.split(',')[0]
        ruleForm.phoneArray = data.relation.filter((item, index) => {
          item.isReadonly = true
          return item.contactRlatName === '本人' && index > 0
        })
        ruleForm.contactPerson.standbyPhone = data.bakRelation.contactNo

问题：当data.externalPhone,data.relation,data.bakRelation为undefined时，split，filter以及获取data.bakRelation.contactNo都是会有问题的。（在开发企业微信侧边栏时，发现控制台并没有报错）。所以我们需要首先判断前面的值是否存在，存在之后再去调用方法或者取值。

	修改后的代码
	ruleForm.customerPhone = data.externalPhone?.split(',')[0]
   ruleForm.phoneArray = data.relation?.filter((item, index) => {
           item.isReadonly = true
            return item.contactRlatName === '本人' && index > 0
       })
       ruleForm.contactPerson.standbyPhone = data.bakRelation?.contactNo

路由传参

我们常见的路由传参有两种方式params和query。但是这两种方式都有或多或少的问题
params 页面刷新之后丢失
query 页面刷新之后，number类型转为字符串类型，当直判断某个参数a（!a）为true的时候，容易出现问题

企业微信侧边栏开发

当同一个项目的两个菜单部署为企业微信侧边栏的两个入口时，切换两个菜单时会出现项目中vuex内容清空，此时一些当业务场景为：两个菜单默认有页面缓存的时候，就会出现操作的时候，vuex数据丢失导致的异常，此时可以合理借用localstorage来处理。

texterea maxlength失效问题

业务场景如下：设置一个texterea多行文本输入框，限制maxlength为200。当多行文本输入字符达到199时，按下enter进行换行，此时保证自己的输入法为中文，然后频繁输入并且按下回车，回出现如下情况

可以看到还能持续输入内容（只能在中文输入法的情况）
问题解决：考虑到这种场景，我们可以监听texterea的oninput事件，获取texterea的value值，使用slice进行截取前200个，再赋值给texterea。

表单提交事件click和失焦事件blur冲突问题

场景如标题，在表单中有一个手机号码，需要请求后端接口判断号码的状态比如：空号，沉默号等。失焦时有一个方法去请求接口返回状态。如果状态异常，则不能提交表单。
现在的问题如标题，提交按钮绑定了click事件，但是如果输入框输入内容之后直接去点击提交按钮，则只会触发blur事件，不会再触发click事件。原因是blur事件优先级高于click。
方案1：处理方案为 修改click事件为mousedowm.native。（网上查询的方法，但是没有生效）
方案2：既然是手机号码，必定11位时才有可能是正确的手机号码，我们使用input事件去监听输入框的输入长度，当输入长度为11位时，直接触发输入框的失焦事件，
this.$refs.phoneInput.blur(); // 让输入框主动失焦

修改富文本字号大小

场景如标题，当前端渲染富文本的时候，我们可能会使用v-html
例如：

<div ref="content" class="content-box" v-html="detail.detail"></div>

当我们需要修改富文本的字体大小时，首先想到的是使用css样式来修改

element.style.fontSize = `${size[type] || 16}px`;

但是我们会遇到一些情况，比如富文本内部有一些行级样式，这样的设置方法就不能够控制字体的大小，此时我们就需要使用js的方式来修改

function fontSize(element, type) {
	let size = {
		big: '22',
		middle: '16',
		small: '12'
	};
	var result = element.innerHTML.replace(/font\-size\:(\s*\d+(?:\.\d+)?)px\s*(\;*)/ig, function () {
		return ('font-size:' + (size[type] || 16) + 'px;' );
	})
	element.innerHTML = result;
	element.style.fontSize = `${size[type] || 16}px`;
}
// 	使用时
fontSize(this.$refs.content, type);//需要主动传递当前选中的元素内容和字号大小类型

小程序埋点问题

场景：在详情页面需要做一个浏览时长埋点，该埋点特点为需要调用两个方法，start和end方法。小程序入口有两个，一：app主界面–>小程序详情页面；二：app主界面–>小程序主页面–>小程序详情页面。
埋点实现方案：在onload中调用start，onUnload页面销毁时调用end。我们发现这种方案在情况一种无法调用end方法，导致埋点无法正常埋成功。
思考：考虑过程为：情况一中，因为详情页直接退回到app主界面，可能无法监听到页面销毁事件。网上百度了些许方法之后都无法解决这个问题，于是考虑场景一和场景二的不同之处。
处理方案：考虑在进入详情页面之前，先进入一个空白中间页面。修改之后为，场景一：app主界面–>空白中间页面–>小程序详情页面。场景二：app主界面–>小程序主页面–>空白中间页面–>小程序详情页面。
具体实现：我们保持小程序详情页面逻辑不变。在onload中调用start，onUnload页面销毁时调用end。空白页面实现如下：

<template>
  <view/>
</template>
<script>
export default {
  name: "index",
  data () {
    return {
      count: 0,
      id:"",
      readStatus:"",
      isJump:"",
    }
  },
  onShow () {
    this.count++
    if(this.count === 2){
      this.count = 0;
      // 由于我们有两种场景，只需要第一种情况才需要主动退出，所以需要做一个判断。isJump是由场景二中小程序主页面-->空白中间页面-->小程序详情页时会携带的一个标识。
      if(!this.isJump){
         setTimeout(() => {
            AlipayJSBridge.call('exitApp'); //调用原生的通道方法，退出当前小程序应用
         }, 100)
      }else{
         uni.navigateBack(1); // 往后退一个路由
      }
    }
  },
  onLoad(e) {
  	// 获取携带参数
    this.id = e.id || this.$startupParameter.parameter.id;
    this.readStatus = e.readStatus;
    this.isJump = e.readStatus;
    this.$sp.isShowTitle({navigationBarTitleState: false}, (res) => { })
    uni.navigateTo({
      url: `/tagerDetail` //跳转目标详情页面，真正的详情页面。
    })
  }
}
</script>
<style scoped>
</style>

相关其他文章

uniapp项目开发相关问题

uniapp项目开发相关问题