bhbc开发QA

QA"/>

bhbc开发QA

项目问题积累

• 感谢！！！
• git相关
• • git拉取报错
  • git报错 Cannot do a soft resset in the middle of a merge
  • git提交修改的时候报错: 无法推送refs到远端
  • git有冲突,解决冲突
• vue相关
• • 引用自定义组件，多次使用组件间会相互影响
  • IOS页面会上下弹性滚动
  • 复制文本到剪切板
  • 使用emoji
  • 在页面显示网络链接图片
  • 在页面显示base64图片
  • input想要只输入数字
  • input类型为number限制字数
  • 实现播放mp3
  • 运行程序时报错`'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序`
  • 地图&搜索
  • 组件里mounted不执行
  • `0`和`false`和`''`
  • 比较灵异事件
  • ios搜索组件弹出的键盘右下角按键名为“换行”
  • ios中input输入过长文字不可滑动
  • 数字格式修改
  • 数据加密解密
  • 获取本地文件
• CSS相关
• • 换行
  • absolute垂直居中
  • 图片显示不变形

感谢！！！

中途文章被覆盖了！！！
感谢大佬！！救命帖！！
！！！！！！！！！！！

git相关

git拉取报错

拉取时报错 The project you were looking for could not be found.

1.首先确认vpn连接正常
2.前往控制面板-用户账户-凭据管理器或控制面板-所有控制面板选项-凭据管理器在"Windows凭据"下找到git地址，更新git账号。(尝试有效!)

3.还是报错可以尝试通过以下命令卸载重装git credentials manager
$ git credential-manager uninstall 卸载
$ git credential-manager install 安装
参考博客

git报错 Cannot do a soft resset in the middle of a merge

git reset --merge 取消合并 (亲测有效)
or
git rebase 将当前分支重新设置基线

git提交修改的时候报错: 无法推送refs到远端

运行命令 git pull origin yourBranch -f

git有冲突,解决冲突

1.提交代码时有冲突会把有冲突的版本的更改全拉下来,不要慌
2.在源代码管理会有显示冲突的文件,点开文件可以看到冲突的两版本内容
3.可以选择"now…“(当前版本)或”"(上一版本)解决冲突
4.解决后保存,在源代码管理中暂存解决完冲突的文件
5.最后将所有的更改提交,推送就ok了(完美)

vue相关

引用自定义组件，多次使用组件间会相互影响

同一组件在页面中使用多次，对其中一个进行操作后会对其他组件有影响而产生报错

1、使用组件时绑定了同一变量，试试区分两个组件绑定值
2、引用时只创建里一个组件实例，试试区分两个实例
参考博客

IOS页面会上下弹性滚动

再IOS中一个页面存在一个滑动框,滑动滑动框里内容,会偶尔将整个页面滑动,类似bounce回弹

使用代码 ([参考博客] ()) --亲测不可用!只会禁止整个页面的滚动

document.body.addEventListener('touchmove', function (e) {e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android

亲测可用,只需要再整个页面加个样式
height: 100%; width: 100%; position: fixed; top: 0; left: 0;

复制文本到剪切板

//复制文本copyText(text) {// 直接构建inputconst _input = document.createElement("input");// 设置内容// _input.value = text;_input.setAttribute("value", text);// 添加临时实例document.body.appendChild(_input);// 选择实例内容_input.select();// 执行复制document.execCommand("Copy");// 删除临时实例document.body.removeChild(_input);},

但是还会有个问题… 如果文本是需要发接口查询返回,查完接口success里调用复制方法,会导致复制失败
目前的解决办法: 更换发接口时间,避免发完接口直接复制(还没有完美解决办法)

使用emoji

带有emoji的文本想要保存到后端,但是因为编码问题导致直接传到后台会乱码$*d@&1K(瞎写的)

可以传后端之前将带有emoji的文本编码成字符串
从后端取到后再解码成带有emoji的文本

//emoji编码emojiEncode(e) {var n = /[\ud800-\udbff][\udc00-\udfff]/g;return e = e.replace(n, function (e) {var n, r;return 2 === e.length ? (n = e.charCodeAt(0), r = e.charCodeAt(1), "&#" + (1024 * (n - 55296) + 65536 + r - 56320) + ";") : e})},//emoji解码emojiDecode(e) {var n = /\&#.*?;/g;return e.replace(n, function (e) {var n, r, t;return 9 == e.length ? (t = parseInt(e.match(/[0-9]+/g)), n = Math.floor((t - 65536) / 1024) + 55296, r = (t - 65536) % 1024 + 56320, unescape("%u" + n.toString(16) + "%u" + r.toString(16))) : e})}

在页面显示网络链接图片

需要显示链接图片,例如.png

需要再img标签里添加一个属性

<!--let url = ".png";-->
<imgclass="img":src="url"referrerpolicy="no-referrer"/>

在页面显示base64图片

需要显示base64图片,例如 (base64太长了)

需要在标签里的src属性拼接一下

<!--let url = "bolabolabola(base64)";-->
<imgclass="img":src="'data:image/png;base64,' + url"/>

input想要只输入数字

<input type="number" :maxlength="20"/> 这样安卓没有问题,ios还是能输入其他

<input type="number" pattern="[0-9]*" :maxlength="20"/> 这样ios会弹出是有数字的键盘

input类型为number限制字数

<input type="number" :maxlength="20"/>

字数没有限制,number换成其他就可以

在输入回调里控制 (这里是组件的回调)
@on-change="
() => {
if (idNo.length > 20) idNo = idNo.slice(0, 20);
}
"

实现播放mp3

实现播放MP3文件
参考博客

<template><x-view id="P180301"><!--触发播放音频按钮--><x-view @click.native="playAudio">Play</x-view><audio id="audioPlayer" autoplay="autoplay"><!--音频资源--><sourceid="tts_source_id"src="../../../assets/beinvited.mp3"type="audio/mpeg"/></audio></x-view>
</template>
<script>
export default Page({playAudio() {var ttsAudio = document.getElementById('audioPlayer');ttsAudio.play(); //播放音频},
})
</script>

样式还没有实现(凑合)

运行程序时报错'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序

切换分支后运行程序报错了↓

原因还不太清楚，突然就不行了（难道突然版本就不对了？？）
解决方法：重新下载安装最新的 webpack-dev-server
命令：npm install webpack-dev-server --save-dev

地图&搜索

这里使用的sdk已被弃用，无法限制搜索类型,最新需要使用WebService
需求：进入页面显示当前定位，搜索展示位置列表

参考文档：腾讯位置服务

<!--xMap组件-->
<template><div :id="id"><slot></slot><div class="x-map-relocate" v-if="local" @click="onLocalClick"><imgwidth="25"height="25"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAYFBMVEUAAABRUVFRUVFSUlJRUVFRUVFRUVFRUVFSUlJSUlJSUlJSUlJSUlJRUVFSUlJSUlJSUlJTU1NSUlJSUlJSUlJOTk5SUlJSUlJSUlJRUVFTU1NSUlJSUlJRUVFSUlJSUlJ5TLkYAAAAH3RSTlMAqhzjh/K7FUTa7T1f1Z2PVCWwLGgNfnY3owjLyL5OoP/65AAAA9RJREFUeNrtm9ly6yAMQAXYxmscr82u///Le6fTQnaEgZJ2cp4TIYOEJBDw5o0TnKVp30E0eIn/KTnEguEnDGKR4icpxAK/ACJvBf6SAlNVz6sMv8hWc11N8FMM46rBOzSrcYDgDHODTxBtDgHhiUAjIuEQhrxHIn2Iacj3aEGzBr9sjmjJoQJ/yC0ugEnwRF3iDQVLxhy/yMeE3THPsvZj+tnN4O1a3u6Ect0WeEUmwZm8vDKveXi8FQ/JlQ7C2RLGq086mWJBxfCCGVzYXUpbcUow6lZ4DnMJOdmFpI4aDbsLvY8TLEQeUFPkNuG4alCzlwvHPxeS7OzygV2CmmaRBtMeFWLzLCkt4R4bcTYH0wL7y8zu3D81M3kuYbcg51ck8IDOUJi0Dr7wgYqP56UZ43QpdHJU1OBAjYoKLJCCMj5dA+sSMqPPHH0tsyVqJ+BMaz+ZsqQobT+dpbT1QEH6B92gtkCiwm824IWNpcCjNgBPJCowWm0BxQ48sVNhLQcze/udg76qB4sJYOARRp8CVX8N4JGO/Flc5X/gFZUncqrBcvBKR3Ut8V3gglf00gqiuebgF23cG9IKNOCdgrQGhUM9Q7SuAp4wOPogSXZnrAS1lkHWYCR4awsBaAk7zHfQWEMA1mYDn/ALSRTJijQtmFKXuMlOxl2goA0vVOCmqSCMYbbWEYO+pPTcpTcmp7MWRx/f/i+z0QlGskVpTvTjnpUxgc7JTq0R9HCQ3S0y8Q5p39EmQLvuMtm8xAeU3Fi8G5J+kmyGD2GkFbjvu3TZKT4khbukDr9UpJQflQEV0LJ7H0vQwDl2sjv/RkiSbXYVxsO5IeOvtBG9ylZsE4wSx2DkHo6TAOG4UutJ4aTsoDg5JCROKdm2SdNma52SvW5SGj8tH5UReEebQP3KpZm5hHUvThuXEjZ8eb4JdkBxUgcUkY5oMqJ9JwZTcT6kmiMd023V6VuUg0rtgyzSUW2vjDvKYbX+qkOk4/pCTUCUCwtdymdRrmzsBW6DXVr9lmu7s4vL1uvF5e+5ug1yeS2kveG6azCiogrVwNB3RCmWMDRbIg/QwqExNLGYe8vl8UxC0Dae9L4ZCVQcpt/YyAQg96gpKhsF8gI1B+mnmS0bqAoM7OJ/k792vm5BO9/2hxsac62z+16ujVlTJOFaOg09aQrRrvmtAnzdCnJTq3tbr+gv23p7Q1tvjMbmrQR/bLJIrd2a6mg1fJD+eoZEmGH4wA8cZg4Ggj7xqCA4Xf3okUvdgYG/8cznJR46vRV4EQVUb3ks+thPPru4j151b/mbNy78A1GCgngNVC3TAAAAAElFTkSuQmCC"/></div></div>
</template><script>
export default {name: 'x-map',data() {return {};},// 接收外部请求props: {// idid: {},// 经度longitude: {default: 116.39747,},// 纬度latitude: {default: 39.908823,},// 缩放级别scale: {default: 16,},// 标记点markers: {},// 路线polyline: {},// 多边形polygons: {},// 圆circles: {},// 缩放视野以包含所有给定的坐标点'include-points': {},// 显示带有方向的当前定位点'show-location': {},// 是否支持缩放'enable-zoom': {default: true,},// 是否支持拖动'enable-scroll': {default: true,},local: {default: true,},},// 监听器watch: {latitude(value) {//this.myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);//this.mapObj.setCenter(this.myLatlng);//this.initMaks(this.myLatlng);},longitude(value) {//this.myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);//this.mapObj.setCenter(this.myLatlng);//this.initMaks(this.myLatlng);},enableScroll(value) {// 设置选项let myOptions = {zoom: this.scale,center: this.myLatlng,// 街道地图mapTypeId: qq.maps.MapTypeId.ROADMAP,// 缩放控件zoomControl: false,// 拖动draggable: value,// 地图类型控件mapTypeControl: false,};// 地图对象this.mapObj.setOptions(myOptions);},},//methods: {onLocalClick() {//this.$emit('bindlocal');},// 返回地图对象getMap() {return this.mapObj;},//initMaks(myLatlng) {// 标记this.marker && this.marker.setMap(null);//this.marker = new qq.maps.Marker({position: myLatlng,animation: qq.maps.MarkerAnimation.DROP,map: this.mapObj,});//if (this.geocoder) {this.geocoder.getAddress(this.myLatlng);this.geocoder.setComplete((result) => {//this.geoInfo = result;this.$emit('bindmaks', result);});}},// 显示地图initMap() {//if (!window.qq) {$Fw.Logger.debug('加载地图组件失败!');return;}// 地址解析this.geocoder = new qq.maps.Geocoder();// 经纬度this.myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);// 设置选项let myOptions = {zoom: this.scale,center: this.myLatlng,// 街道地图mapTypeId: qq.maps.MapTypeId.ROADMAP,// 缩放控件zoomControl: false,// 拖动draggable: this.enableScroll,// 地图类型控件mapTypeControl: false,};// 地图对象this.mapObj = new qq.maps.Map(document.getElementById(this.id),myOptions);// 标记this.initMaks(this.myLatlng);//添加监听事件window.qq.maps.event.addListener(this.mapObj, 'click', (event) => {console.log(11);//event.geoInfo = this.geoInfo || {};//this.$emit('bindtap', event);});},},mounted() {// 移除腾讯地图logothis.$el.addEventListener('DOMNodeInserted', (e) => {let del = e.target.innerHTML;if (del.includes('到腾讯地图查看此区域') || del.includes('map.qq')) {e.target.remove();}});// 初始化地图this.initMap();},//// beforeDestroy(){//   window.qq.maps.event.removeListener(this.mapObj);//   this.$el && this.$el.removeListener('DOMNodeInserted')// }
};
</script><style lang="less">
/* .x-map-relocate {position: absolute;width: 25px;height: 25px;bottom: 10px;left: 15px;z-index: 1;} */
</style>

又包装了一个可以搜索的地图组件

组件里mounted不执行

写组件时mounted不执行 created执行

因为代码里本来就写了一个mounted = =

0和false和''

代码里遇到的，了解并记录一下
0 == false； //true
原理： 布尔值作比较的时候，会先把布尔转为数值，即 true→1 false→0
'' == false； //true
原理： 字符串比较的时候会转为布尔类型，即 空字符''→false 其他→true
0 == ''； //true
原理： 同上

接着
'0' == false; //true
原理： 字符串和数值类型比较的时候string会转化成number
'0' == ''; //false
原理： 字符串和字符串比较，不转类型
!!'0'; //true
原理： 懂？

比较灵异事件

两个值做等于比较，打印出来为"BB1092323"，"BB1092323",false
完全一模一样，但结果是false

第二个字符串开头有个空格！！

ios搜索组件弹出的键盘右下角按键名为“换行”

搜索组件中input中type为search，安卓弹出键盘有“搜索”按键，苹果键盘仍为“换行”

可以在组件内部或组件调用处，外部套一层<form action="javascript:return true"></form>
有的说<form action=""></form>也行，实测后发现不可用，这样点击“搜索”后会跳转页面

ios中input输入过长文字不可滑动

在input中输入过长文字会隐藏并可滑动查看，安卓如此
但ios中隐藏不可滑动，只可以长按选中文字形式滑动内容

暂无解决办法

数字格式修改

根据需求，数字展示万以上以万为单位，亿以上以亿为单位，整数不补0

// 数据格式处理 
// 超过万单位用万，超过亿单位用亿，整数不补0
// defValue--默认值，无value时显示
export function numberDataFormat(value, defValue) {if (!value) return defValue;let reValue = value < 0 ? -Number(value) : Number(value); //修改为整数值if (reValue >= 100000000) { // 亿reValue = Number(parseFloat((Number(value) / 100000000).toFixed(2))).toLocaleString() + '亿';} else if (reValue >= 10000) { // 万reValue = Number(parseFloat((Number(value) / 10000).toFixed(2))).toLocaleString() + '万';} else {reValue = Number(parseFloat(Number(value).toFixed(2))).toLocaleString();}return reValue;
}

数据加密解密

跳转三方链接页面，需要传送敏感字段，需要加密

参考文档
有两种加密引用包，crypto-js和JSEncrypt
可根据所需的不同加密形式进行选择
需要提供秘钥，放到配置中（一般后端提供）

// 使用AES加密
import CryptoJs from 'crypto-js'
getJSEncrypt(cfg, keyString){const key = CryptoJs.enc.Utf8.parse(keyString);const word = CryptoJs.enc.Utf8.parse(cfg);const encrypted = CryptoJs.AES.encrypt(word, key, {mode: CryptoJs.mode.ECB, padding: CryptoJs.pad.Pkcs7});return encrypted.toString();
},

获取本地文件

获取本地文件并上传到OSS

还没做完，写下大概思路吧
选择文件使用<input type="file"/> 加载文件使用FileReader
tips:
数据格式和网上说的不太一样，需要在浏览器查看数据
手机上会有因权限不允许导致触发error
手动触发onerror方法：在读取前debugger住，再修改文件名称，再继续运行
FileReader文档

<!--accept：限制选择类型 multiple：允许多选-->
<input@change="onChangeFile"type="file"accept="*"multipleid="fileInput"
/>
<!--加载状态-->
<x-view>{{ readyStateMap[readyState] }}</x-view>

readyState = 0;
readyStateMap = ["未开始加载", "加载中", "加载结束", "加载失败", "加载成功"];
onChangeFile(e) {console.log("===========onChangeFile", e, e.target.files[0])let files = e.target.files;let that = this;if (!files || !files.length) return false;const fileReader = new FileReader();that.readyState = fileReader.readyState;console.log("========create fileReader", fileReader, fileReader.readyState);fileReader.onloadstart = (p) => {console.log("========loadstart", p, fileReader.readyState);that.readyState = fileReader.readyState;}fileReader.onloadend = (p) => {console.log("========loadend", p, fileReader.readyState);}fileReader.onload = () => {console.log("========onload", fileReader.result);that.readyState = '4';}fileReader.onerror = (err) => {console.log("========onerror", err.target.error.message, err.target.error.code, fileReader.readyState);that.readyState = '3';}// 1表示未找到文件，2表示安全性错误，3表示读取中断，4表示文件不可读，5表示编码错误。fileReader.readAsText(files[0]);},

CSS相关

换行

word-wrap: break-word;

absolute垂直居中

top: 50%;
margin-top: -10px; //10px为高度的一半

图片显示不变形

需要显示图片在正方形容器里，且不改变原比例
比如： 图片是这样滴

直接展示：

.pic {height: 60px;width: 60px;margin: 10px 17px 13px 0;
}

改为根据最大边保持原比例，保留左下角

.pic {height: 60px;width: 60px;margin: 10px 17px 13px 0;object-fit: cover; // 根据最大边保持比例object-position: bottom left; // 显示左下角}

改为根据最小边保持原比例

.pic {height: 60px;width: 60px;margin: 10px 17px 13px 0;object-fit: contain;}