前端开发中遇到的问题及解决方法

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 v-model="login.acount" @blur='acount' type="text" placeholder="输入登录账号" placeholder-style="color:rgba(190,191,190,1)" />

在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，后台上传的富文本图片过大，前端如何保证图片不被裁剪且百分百展示

<view class="isrich">
		<rich-text :nodes="productDetail.content"></rich-text>
</view>
.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会将空格及断行的样式吃掉

<textarea  v-model="supplier.remark"  disabled/>

❌错误代码：

<rich-text :nodes="supplier.remark"></rich-text> 

9，数据的增加与删除

//1，先写点击事件
<view class="adddriver" @click="addData">+新增</view>
<view class="remove" @click="removeData(index)">移除</view>
//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，在页面中使用过滤器
<view>{{price | showprice}}</view>

方法一：全局使用过滤器
//1,引用过滤器
Vue.filter('showprice', function (price) {
      price = parseFloat(price)//string转换为number类型
      return '¥' + price.toFixed(2)
})
//方法二：局部使用过滤器
 methods: {
     filters:{
           showprice(price){
            return '￥'+price.toFixed(2)
            }
      }
 }

数据的计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/vue.js"></script>
    <style>
        table {
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }

        th,
        td {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }

        th {
            background-color: #f7f7f7;
            color: #5c6b77;
        }

        .t-input {
            border: none;
            width: 15px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in books">
                    <td>{{item.id}}</td>
                    <td>{{item.name | namefilter}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price | showprice}}</td>
                </tr>
                <tr>
                    <!-- <td v-for="value in item">{{value}}</td>  -->
                    <td>{{add.id}}</td>
                    <td><input type="text" v-model="add.name"></td>
                    <td><input type="text" v-model="add.date"></td>
                    <td><input type="text" v-model="add.price"></td>
                </tr>
            </tbody>
        </table>
        <h2>总价格：{{price}}</h2>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                books: [
                    {
                        id: 1,
                        name: '算法导论',
                        date: "2020/02",
                        price: 85.00,
                        count: 1,
                    },
                    {
                        id: 2,
                        name: '编程艺术',
                        date: "2020/05",
                        price: 30.00,
                        count: 2,
                    },
                    {
                        id: 3,
                        name: '编程珠己',
                        date: "2020/05",
                        price: 55.00,
                        count: 4,
                    },
                    {
                        id: 4,
                        name: '算法导论',
                        date: "2020/05",
                        price: 70.00,
                        count: 1,
                    }
                ]
            computed: {
                price: function () {
                    var jia = 0
                    for (let i = 0; i < this.books.length; i++) {
                        if (this.books[i].count != 0) {
                            jia = jia + (this.books[i].price * this.books[i].count)
                        }
                    }
                    return jia
                }
            },


        })

    </script>

</body>

</html>