1.taro框架使用map标签出现的错误
这个问题困扰很长时间,在频繁切换页面渲染的时候出现左边不显示,我理解的是变量没有到达map标签的属性上,那我就想是不是setState太慢了,然后又用了变量,本地缓存等,都没有效果,最后今天想换一下生命周期,大大降级了这样的一个错误概率问题,我把componentDidmounted改为componentWillMount()
提出两点警示,第一要再多学习react的生命周期函数,第二出现页面切换数据丢失的问题,多从生命周期上去考虑解决
2. 使用AtTabs有自带样式,单个tab都是平均的,但是有的时候想自定义
学会使用变量之间的层级关系去找到相应的标签,这样就可以个性化设置样式。
css还是非常重要的,有空还是要总结一下。
3. 图片被压缩的问题
这个问题就是没有按照图片原来的大小去改变导致出现的错误,一定要按照UI给的,这样页面会非常美观,对于我们也是一样享受
4.关于页面随着各个手机出现的显示问题
记着做适配的时候永远不要忘记,用相对百分比,这样你项目越写越顺,如果使用了某些单位,到时候改样式真是麻烦事
另外一个就是一定要只要作为UI老师的想法,设计师的想法,最好页边左右有一点距离
5. 做农机时候呈现的详情显示,我使用了at-row at-col 平均分块的类名,用起来挺好的
6.获取数据的逻辑一样的话,就放在一个方法里边,不要以为偷懒就可以过去,往往变量污染就是因为偷懒引起的
7.遮罩层这个要有这样的思维,不要忘记了,往往绝对定位出现的交互都需要
8.对于数据信息返回的多的时候需要用方法进行限制,这个不用非得文档写的有才做,一定发现这个就去沟通加上,一切以完美的产品呈现为目的,加油!!!
9.tab栏目内容多,需要滚动,怎么办?出现滚动样式怎么取消呢?
增加属性scroll,另外增加样式
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
10.判断时间是不是今天或者以后
// 比较时间
isNotPastOrToday(dateString) {
// 将输入的日期字符串转换为Date对象
const inputDate = new Date(dateString.replace(/-/g, '/')); // 使用/替换-以兼容更多浏览器
// 获取当前日期,并设置为今天的午夜
const today = new Date();
today.setHours(0, 0, 0, 0);
// 比较两个日期
return inputDate >= today;
}
11.AtInput组件的type类型属性时候会引起输入框框类型的判断
12.必填项小红点(css样式)
.shopType::before{
display: inline-block;
margin-right: 8rpx;
color: #FF4949;
font-size: 28rpx;
font-family: SimSun, sans-serif;
line-height: 1.5;
content: "*";
}
13.前端有个渲染逻辑是尽量不好去更改获取的数据,只是在渲染的时候通过字符串截取的方法去渲染,要不在有些情况下会显示异常。
14.Pc端图片放大可以借助于dialog去实现。
15.小程序上边的路由如果因为收到历史路由的影响,不想看到过去的数据,那么自己就用其他的方法解决这个问题,不用框架封装的config类。
16.在Taro框架中我们使用map组件的时候,我们渲染数据尽量用state数据,不要用自己单独用的变量,还有一个小的逻辑,离开页面的时候一定要数据初始化状态。
17.做工作一定要细心,有几点是最基本的,数据的校验是否准确,数据是不是那成功去渲染,操作修改的前置提示以及成功提示,数据渲染字数过大的展示效果等,这些都是我们必须要考虑的问题。
18.前端访问后端ip的连通性可以通过现在两个常用的指令
ping ip名
telnet ip名 端口号 例如 telnet 73.134.64.139 8088
19.自定义指令复习(局部)
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
20.自定义指令复习(全局)
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
21.思考有些函数的参数是回调函数的原因
今天无事思考了一下有一些函数为什么会使用回调函数的原因,举例arr.find(item => item == 3)
我们想一下arr.find()是调用的,而希望是每一次循环的时候我们在调用arr.find()是一个for循环,当你用item的时候相当于每一次循环的值我们都可以拿到,另外呢我们再通过这个回调返回条件语句,符合条件的把值给新的数组,最终把数组返回给使用者。
Array.prototype.myFind = function(returnItemFunc){
//此时你要了解到,我们平时在调用find方法时,是以arr.find的方式调用函数,故要知道的是,封装函数内的this其实指向的就是要调用该函数的数组
for(let i = 0;i<this.length;i++){
//从这里可以看出,returnItemFunc实际上是一个回调函数。
//那么回调函数的话,最重要的还是当回调函数返回为true的时候,我们把对应符合条件的元素返回出去,我们上面说到this指向的是调用该函数的数组,namethid[i]指的就是该数组对应i下标的元素。
//其次,这里面这个回调函数为什么传入两个实参,都知道arr.find(function(item,index){ return .... })
if(returnItemFunc(this[i],i)){
return this[i]
}
}
}
var arr = [1,2,3,4]
var res = arr.myFind(function(item,index){
return item === 3
})
console.log(res) // 3
22.解决蒙层的滚动穿透问题
给蒙层加上handleTouch事件,阻止穿透
// 处理蒙层上的触摸事件
handleTouch = (event) => {
// 阻止事件进一步传播
event.stopPropagation();
};
23.(in promise)MiniProgramError{'errMsg':'navigateTo':fail:page limit exceeded:10}}
因为栈最多10层,所以把跳转方式改为redirectTo就可以了
24.由于表单的某个组件是通过v-if来判断是否显示的,进行表单验证,然后切换显示的条件,导致该组件的验证结果显示在另外一个组件的情况,将v-if改为v-show就不会出现这种情况。
24.get请求对象的时候记得转JSON
const obj = { name: 'Alice', age: 25 };
// 将对象转换为query string
const queryString = Object.keys(obj)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
.join('&');
// 构造URL
const url = `/api/resource?${queryString}`;
25.vue项目本地可以运行 上线后报错Uncaught SyntaxError: Unexpected token ‘<‘
这个问题本地没有出现,但是打包之后出现控制台报这个错误,原先以为是标签的问题,但是想了一下,如果标签出现问题,没有闭合,也应该是联调阶段就直接报错了。
后来网上查了一下,又回想一下跟上次发包的区别,有没有更改什么地方,思来想去,因为上一次上生产的时候因为部署不同的环境,把index.html里边的标题和图片改了,图片路径改了,又改了回来,重新在新环境部署了一下,无问题了!!!
以上问题记录一下,其实上边并没有解决,缓存问题。
以上问题出现通过昨晚的寻找,最终发现是部署解压文件出现丢包的问题。
出现问题是好事,不要怕出现问题,我们应该正视他,不管是前端的,还是后端的,首先问题不应该往自己身上揽,但是我们一定要学会从问题找到根源,解决的途径有哪些,我们应该去尝试去解决他,对于ngix的配置也要去学习。懂的多了,就什么都会了。
26.git stash
将我们现在更改的内容放置到暂存区,相当去本分支先不用,又要换分支开发。
27.git reset --soft HEAD^
--soft
为软重置,上面的命令表示将当前版本恢复到未提交之前的状态;即当commit之后,需要取消commit恢复未commit的状态;此时Working Copy与Index的状态恢复至未commit之前一致.
28.最近遇到一个小程序显示的问题,我在后台上传了一个政策内容,发布以后,在前台小程序显示异常,样式有些缺失,发现了上传时候有行内样式的直接显示了,有类名的就没有,那我就从modules里边找到相应的样式文件(样式文件一定要对应),搬到小程序上边,在相应的页面引入样式,发现还是没有解决,上网一查richText标签需要带上类名,我才解决这个问题。感谢上天,感谢大地!
29.写一个表单重置得公用方法(取消时重置用)
export function resetForm(refName){
if(this.refs[refName]){
this.$refs[refName].resetFields()
}
}
30.小程序在tabbar页面数据不更新(taro)
最简单的方法就是把你生命周期换成didshow不用didmounted
31.微信小程序提审的问题
1.功能不完整,未开发完导致。
2.页面用户发布留言等,需要用微信相关的接口监听敏感词。
3.部分页面搜集用户信息需要有相关的交互,微信对这一块有严格的判断。
4.域名认证通过,类目认证通过等
32.检查一个对象是不是一个空对象{}
function isEmptyObject(obj) { return Object.keys(obj).length === 0; }
我的项目后端返回的一个属性是一个空对象,用来判断该用户的身份。
33.el-input前后加icon的两种方式
<template>
<div>
<el-input prefix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
</div>
</template>
<template>
<div>
<el-input placeholder="请输入搜索内容">
<template v-slot:prefix>
<i class="el-icon-search"></i>
</template>
</el-input>
</div>
</template>
34.el-input由边框变为下划线样式
.line-input{
.el-input__inner{
border-radius:0px!impotant;
border-top-width:0px!imporatnt;
border-left-width:0px!important;
border-right-width:0px!important;
border-bottom-width:1px!important;
}
}
感谢老铁们的支持,文章后续继续增加中。。。