文章目录
字符串
原代码
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>