前端开发中遇到的问题及解决方法
前端开发中遇到的问题及解决方法
1，何为MVVM?
view层：
视觉层；在前端开发中，通常是DOM层；主要作用是给用户展示各种信息；
Model层：
数据层；数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据；
ViewModel层：
视觉模型层；视觉模型层是View和Model沟通的桥梁。一方面它实现了Data Binding,也就是数据绑定，将Model的改变实时的反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击，滚动，touch等）时，可以监听到，并在需要的情况下改变对应的Data。
2，页面跳转路径的传参，及动态设置当前页面的标题
url: ‘…/…/pagesA/aboutArti/collegeArtiList?id=’ + id + ‘&istitle=’ + name
&符号前的是传给【跳转页面】的值，+后是本页面需要传递的值，
data() {
return {
istitle:'',//接收上个页面传过来的值
titleList: {
1: {
name: '页面名称1 '
},
2: {
name: '页面名称2'
}
},
}
},
onLoad(options) {
this.onetitle = options.istitle
uni.setNavigationBarTitle({
title: this.titleList[this.onetitle].name
});
},
接收传递值的页面，this.onetitle 是本页面的接收定义的值，如果在本页面要调用就用这个【onetitle】
❌错误代码：
data() {
return {
istitle:'',//接收上个页面传过来的值
}
},
onLoad(options) {
this.onetitle = options.istitle
uni.setNavigationBarTitle({
if(this.onetitle == 1){
title:"页面名称1"
}else{
title:"页面名称12"
}
});
},
错误原因：uni.setNavigationBarTitle()的参数类型是Obeject ,直接将if判断挪出来同样能解决错误。
3，数据的类型，及数据类型之间的转换
数据类型：
不可改变的原始值（基本数据类型）：number, string, boolean, undefined, null,
引用值：array, object, function
数据类型之间的转换：
Number(mix) 将值转为数字
var num = Number("123") => j结果num = 123
var num = Number(false) =>结果 num = 0
var num = Number(null) =>结果 num = 0
var num = Number(undefined) =>结果 num = NaN
parseInt(string, radix) 可解析一个字符串，并返回整数
var num = parseInt("123.9") => j结果num = 123, 是直接将小数点后的东西直接删除，而非四舍五入
⚠️：radix是基底，非必传，以radix 目标进制为基底，将string转化为10进制
radix的取值范围2-36;radix,当 radix 为 2 时，当前对象是二进制值 数字，当前对象会被转成10进制的数字类型输出
var num = parseInt("b", 16) => j结果num = 11
parseFloat(string) 可解析一个字符串，并返回浮点数
var num = parseFloat("123.977abc") => j结果num = 123.977
toString(radix) 将当前对象以字符串形式返回
var demo = toString(1234);
console.log(typeof(demo) + ":" + demo)
= >结果：string：1234；null 及undefined会报错
⚠️：radix,当 radix 为 2 时，当前对象会被转换为二进制值表示的字符串
String(mix)：将数据类型转换成 字符串
var demo = String(1234);
console.log(typeof(demo) + ":" + demo)
= >结果：string：1234
Boolean() 将值转换为Boolean类型
var b1 = Boolean("");//返回false,空字符串
var b2 = Boolean("s");//返回true，非空字符串
var b3 = Boolean(0);//返回false，数字0
var b4 = Boolean(1);//返回true，非0数字
var b5 = Boolean(-1);//返回true，非0数字
var b6 = Boolean(null);//返回false
var b7 = Boolean(undefined);//返回false
var b8 = Boolean(new Object());//返回true，对象
总结：除 空字符串，数字0，null，undefeated，其他均会返回true
join() 将一个数组的所有元素连接成一个字符串并返回这个字符串，元素是通过指定的分隔符进行分隔的。
const elements = ['qiuqiu01', 'qiuqiu02', 'qiuqiu03'];
console.log(elements.join());
=> 结果：qiuqiu01,qiuqiu02,qiuqiu03
split() 把一个字符串分割成字符串数组。
const elements = "hello";
console.log(elements.split());
=> 结果：["h", "e", "l", "l", "o"]
项目真实数据：
var imgs = "http://oss.woodscm.com/1306111493192159232/e04e83548456415798eba28dfd8bc2b4.jpg,http://oss.woodscm.com/1306111493192159232/dfb80bb7d8914ec78ce63d15d3e0d9c5.jpg"
console.log(imgs.split(","))
==> 结果：["http://oss.woodscm.com/1306111493192159232/e04e83548456415798eba28dfd8bc2b4.jpg", "http://oss.woodscm.com/1306111493192159232/dfb80bb7d8914ec78ce63d15d3e0d9c5.jpg"]
4，封装自定义底部tabbar组件的页面跳转
组件里的页面跳转不能使用uni.switchTab进行跳转，需要使用uni.redirectTo的跳转方式，是uni app的坑
uni.redirectTo({
url:"/teaArchive/pages/archives/archives"
})
❌错误代码：
uni.switchTab({
url:"/teaArchive/pages/archives/archives"
})
➕ 总是被我弄混淆的跳转路径方式及区别
1,uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.navigateTo({
url: 'test?id=1'
});
2,uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
uni.redirectTo({
url: 'test?id=1'
});
3,uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。
uni.reLaunch({
url: 'test?id=1'
});
4,uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({
url: '/pages/index/index'
});
5,uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。
uni.navigateBack({
delta: 1
});
5，解决登录页面中，获取不到 苹果手机中文键盘下 输入的信息
首先对于input输入框事件，采用v-model的双向绑定方法，高效快捷监听输入框的信息；
在input事件中，添加blur()方法 当元素失去焦点时发生 blur 事件,即可解决获取不到 苹果手机中文键盘下 输入的信息
data() {
return {
login: {
acount: '', //输入登录账号
},
}
},
methods:{
acount(e){
this.login.acount = e.detail.value
},
}
6,三目运算符的使用
三元运算符的格式：
[条件语句] ? [表达式1] : [表达式2]
其中如条件语句为真(即问号前面的条件成立)执行表达式1，否则执行表达式2.
productDetail.price ===0 ?'面议':productDetail.price
7，后台上传的富文本图片过大，前端如何保证图片不被裁剪且百分百展示
.isrich img {
max-width: 100%;
}
只需要给富文本的图片加个最大宽度的限制即可
8，保留多行文本框【非富文本】的样式，如首行缩进，及分段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HLlb5xQ-1602257749051)(/Users/mac/Library/Application Support/typora-user-images/image-20201009064830415.png)]
使用textarea 而非 rich-text， rich-text会将空格及断行的样式吃掉
❌错误代码：
9，数据的增加与删除
//1，先写点击事件
+新增
移除
//2，在data中定于需要添加的数据
add: {
id: 0,
name: '',
date: '',
price: 0.00,
count: 0
}
// 3，在methods方法中，定义点击事件
methods: {
addData: function () {
this.add.id = this.books.length + 1
this.books.push(this.add)
this.add = {
id: 0,
name: '',
date: '',
price: 0.00,
count: 0
}
}，
removeData: function (index) {
this.books.splice(index, 1)
}
}
⚠️：splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
array.splice(start[, deleteCount[, item1[, item2[, …]]]]) start 指定修改的开始位置（从0计数）； deleteCount (非必传) 整数，表示要移除的数组元素的个数。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
结果==> Array ["Jan", "Feb", "March", "April", "June"]
⚠️：push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
10，过滤器及数据的计算属性
过滤器的使用方法：
Vue.filter(‘过滤器名字’,function(形参){
return 要返回的值;
}),
//2，在页面中使用过滤器
{{price | showprice}}
方法一：全局使用过滤器
//1,引用过滤器
Vue.filter('showprice', function (price) {
price = parseFloat(price)//string转换为number类型
return '¥' + price.toFixed(2)
})
//方法二：局部使用过滤器
methods: {
filters:{
showprice(price){
return '￥'+price.toFixed(2)
}
}
}
数据的计算属性
书籍名称
出版日期
价格
购买数量
操作
{{item.id}}
{{item.name | namefilter}}
{{item.date}}
{{item.price | showprice}}
{{add.id}}
总价格：{{price}}