工作遇到的坑总结（2020 年 9 月）

第四周

25 日：真机白屏、感想

真机白屏***

今天就发生了很奇怪的事情，我在模拟器开发小程序，没啥问题，真机调试也能打开页面，然而！！！ 预览就不行，白屏！！！我提交体验版也是白屏，然而别人用我的代码生成的体验版就不白平。
于是我就想，为什么会这样呢？？？
首先检查所有的链接 是不是 https 打头的，未果。
然后我想，mpvue 是 webpack 打包的，最后生成一个 dist 的文件夹。于是，我把原先备份的 dist_08_17 文件夹修改成 dist，有问题的dist 改成别的名字先放在一边，然后从新跑真机，果然，页面复活了！
所以定位到是 dist 的问题，于是，我把原先有问题的 dist 文件夹改个名字，然后重新npm run server
一下（重新生成 dist），这里提一句，我原先就愿意把文件都删了，这样的习惯很不好，一定要记得备份

感想

做功能一定要分析他的用户群，站在他们的年龄和使用方法上考虑，比方说我做的这小程序，他是给年纪较大的人用的，所以步骤一定要精简。做多了真的费力不讨好啊，如果想练习 demo，先自己开一个小的程序练练手。

先介绍一下我做了啥吧，就是上传一个证件照，我原先是引入了个裁切的组件，本意是让图片更规范一些，然而真机上并不太好用。

而且我的上传功能有 bug，我在onshow里放了图片的链接修改操作，导致用户选择图片的时候，选择完毕弹回页面时，也会执行onshow，然而模拟器上选择图片后没执行onshow，所以开发的时候真要仔细的考虑每个步骤啊。

以后开发要想好流程，多思考！！！

23 日：

日期+1，字符串补全 padStart()

• 今天学到个字符串的一个方法，当然也是为了解决需求嘛

需求：后端要一个年月日的日期，日期的格式必须是这样的 2020-01-01，正常我们获取到的 data 是 2020-1-1，所以想有没有简单的方法处理字符串，记得有这么一个方法，就是自动按需补全的，没遇到波折，很快就查到了，叫 padStart

var date = new Date('2020-01-31');	
// var date = new Date('2020-01-32');       // 如果传递的值是无效的那么就会变成(Nan-Nan-Nan)
date.setDate(date.getDate() + 1);       	// 这一步用来把 date 设置成我们传递进去的那天，并且往前推一天
var year =  date.getFullYear();		
var month = String(date.getMonth() + 1).padStart(2,"0");	// 把月份变成字符串，并且自动在左边填充0，最后的长度为2
var day = String(date.getDate()).padStart(2,0);			// day 同理 month
console.log('date:>>', `${year}-${month}-${day}`);		

22 日

对象中以字符串排序

• 今天解决个需求，就是根据字符串的时间来排序对象数组，这里用到了字符串的排序 localeCompare()

let sortByTimeEvaluateInfoList = res.data.data.sort((x,y)=>{
  return y.createtime.localeCompare(x.createtime);
  // 从最新的评论开始排序
  // 其中的 createtime 的格式类似 '2020-09-22' 这样
})

删除所有的 console.log() **

如何把文件内所有的 console.log() 删除掉呢？

我们可以通过正则表达式 console\.log\(.*?\); 删除。

正则

如何把字符串内所有的<br/> 换成 \n呢？

强大的正则表达式！！！！一定要好好学啊。

str.replace(/<br\/>/g>,`\n`)

小程序图片加载

问题描述：小程序主页上有很多课程图片，如果没有对图片高度进行规范，那么在加载的时候图片会有拉伸，导致文字也会反复横跳
我的解决办法是，给图片一个高度然后图片的 mode="scaleToFill"

sort

今天使用了数组的方法 sort，记录一下老忘的我，其实只需要记住一点，那就是 sort 它返回的是一个数!!! 并不是什么布尔值。

var a = [1, 2, 4, 234, 43, 2, 1, 23];
var rst = a.sort((x, y) => { return y - x; })
console.log('y - x :>>', rst);       // y - x :>> (8) [234, 43, 23, 4, 2, 2, 1, 1]
var rst = a.sort((x, y) => { return x - y; })
console.log('x - y :>>', rst);        // x - y :>> (8) [1, 1, 2, 2, 4, 23, 43, 234]
// 原理：返回一个大于0的数，那么是从大到小排序
// 反之，返回小于0的书，是从小到大 
// 假设 x小 y大， 想象 减号 - 变成 箭头 ->
// x -> y 从小到大
// y -> x 从大到小
// 总之 sort 要返回一个数字，并不是 boolean

str.localeCompare()

这个是解决一个需求：根据时间来排序一个数组对象

let sortByTimeEvaluateInfoList = res.data.data.sort((x, y) => { return y.createtime.localeCompare(x.createtime); })

localeCompare

杂谈

响应式编程，同步到 dom 里是一个比较昂贵的操作，所以是放到虚拟 dom 中操作，等完成改变之后，在一次同步到 dom 中

---

21 日

绝对地址，相对地址

今天想在界面里引用一下静态图片资源，本来写在html 中的image 标签上的 我是这么写的 ../../ ，但是我现在变了 (善变的人哈哈哈，并不是哈，就是想用个占位图，所以放到变量里了)，然后就不好使了，于是我把他写成 ./../../../static/img/ProfilePicture.png 就可以了，区别就是最前面是一个点还是两个点的问题。

自己封装了个 Modal

用 mpvue 开发，原生的 showModal 的文字，在真机上是居中的，但是业务需求不要居中的，官方文档又没有说明配置参数，所以自己写了个 Modal，虽然有点丑吧，有时间给他美化一下哈哈哈哈哈。

不多说，样子如下

代码如下，需要传递的值都在 props 里写的呢。

<template>
    <div class="float" v-if="isShowModal" @tap="controlShowFloat('notShow')">
        <div class="float_c" @tap.stop="controlShowFloat('show')">
            <div class="float_t">{{ hName }}</div>
            <div class="float_content">{{ text }}</div>
            <div class="float_item" @click="hideFloat">确定</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "MyModal",
    props: ["headerName", "content", "btnName", "isShow"],
    data() {
        return {
            isShowModal: false,
            hName: "",
            text: "",
        };
    },
    methods: {
        controlShowFloat(str) {
            // console.log('str',str);
            if (str != "notShow") return;
            this.isShowModal = false;
            this.$emit("changeFlag", false);//一定要传值给父组件，不然不好使
        },
        hideFloat() {
            this.isShowModal = false;
            this.$emit("changeFlag", false);
        },

    },
    onLoad() {},
    // 这个监听传递过来的 props 中的值是否变化，如果变化那么就触发
    // 函数名字是 props 监听的参数的 名字
    watch: {
        isShow(val) {
            //message即为父组件的值，val参数为值
            this.isShowModal = val; //将父组件的值赋给childrenMessage 子组件的值
        },
        headerName(val) {
            this.hName = val;
        },
        content(val) {
            this.text = val;
        },
    },
    // updated() {
    //
    // },
    // onShow() {
    //
    // },
};
</script>

<style lang="scss">
.float {
    z-index: 99;
    display: flex;
    // 原先是absolute
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(1, 1, 1, 0.5);
}
.float_c {
    position: absolute;
    left: 30px;
    right: 30px;
    margin-top: 50px;
    text-align: left;
    background-color: white;
    border-radius: 5px;
}
.float_item {
    color: #333;
    font-size: 16px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-top: 2rpx solid #e0e0e0;
}
.float_t {
    color: #666;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-bottom: 2rpx solid #e0e0e0;
}
.float_content {
    margin: 10px;
    font-size: 30rpx;
    color: #333;
    white-space: pre-wrap;
    display: -webkit-box;
    word-break: break-all;
    max-height: 500rpx;
    overflow-y: auto;
}
</style>

第三周

18 日

• 一般修改页面标题，我的方法是
  

那么如何在脚本中修改小程序当前页面的标题呢？

wx.setNavigationBarTitle({
    title: "签到信息",
});

又发现了新坑，我用mpvue 开发项目嘛，想要自己写个插件，想用 slot 发现不渲染？？查了查语法，用的也没什么问题啊，于是百度了一下，发现了这个博客，mpvue 中插槽 slot 没有渲染出来，说是mpvue 的版本在1.0.13 之后才支持插槽，我的当前版本是 v1.0.0（如何查看 mpvue 的版本）emmm我该不该动版本呢，瑟瑟发抖。

---

16 日

正则表达式删除 console.log()

测试结束之后发现，脚本里的 console.log() 太多怎么办？？
console\.log\(.*?\) 谁用谁知道~

15 日

今天补了补原先写过的 checkbox 组件的回显，顺便复习了组件之间的通信，哎不得不佩服 Vue 实在是太好用了，这个监听者模式，我就不用考虑数据异步的问题了，真的尤大大太厉害了。

mpvue 的话组件里还可以写小程序的生命周期，每次加载这个组件都要更新一下数据，所以可以放到 onShow里，如果放到 mounted 里的话第一遍数据可以回显，以后的数据是不会更新的~（这里可以理解一下 Vue 生命周期的意义），又尝试放到 updated 中，发现数据一致在更新，

第二周

10 日

今天遇到个文件上传的问题，文件上传不上去，说是要用form-data 提交，哎反正是怎么做都提交不上去

09 日

• 理解一下三目运算符的嵌套使用：

customerType == "staff"
	? "报名"
	: item.signUpStatus == -1
	? "填写信息"
	: item.signUpStatus == 0
	? "报 名"
	: item.signUpStatus == 1 && item.audit == 0
	? "报名审核中"
	: item.signUpStatus == 1 && item.audit == 1
	? "报名成功"
	: item.signUpStatus == 1 && item.audit == 2
	? "报名审核失败"
	: "已结束"

08 日

• 今天捡了数据库的知识，用 Navicat 查找词条，我原先是用 Ctrl + F 的，就是下面的这个
  发现查不到我的东西啊，原来是在这里只能查 当前页的信息！！！
  比较靠谱的方法就是用语句查询

#select * from we_user we where we.mobilePhone='156xxxxx879'
select * from we_user we where we.`name` like '%xxx%';

07 日

• 今天解决了个小程序的问题，登录失效的话就自动登录。记录一下 app.js 中的变量如何使用。
  直接getApp() 就可以拿到 app.js 中的东西了，就像如下图这样，当时想把它当作变量写在对象外面了发现并不好使，于是就在代码里直接使用了。
• 又一个新坑，
  这个问题我的解决方法是初始化 data 里的值，为空，为null 都可以，因为我刚开始写了个循环，以后在进这个页面，原有的数据还存在的，我之前写了个数据拼接的操作，导致这个数据越来越大。

第一周

04 日

今天也是接着踩坑啊
首先呢是一个小程序form-data的提交，其实这个功能是一个删除操作，我查阅pc端上的请求，点击删除按钮，提交了form

于是我就查阅小程序里的form-data 如何请求啊，于是得到了如下代码段

wx.request({
  url: `${pic.meetingUrl}/business/busiMeetNotice/${e.recordId}`, //开发者服务器接口地址",
  method: "POST",
  header: {
      "content-type":
          "multipart/form-data; boundary=XXX",
  },
  data:
      "\r\n--XXX" +
      '\r\nContent-Disposition: form-data; name="_method"' +
      "\r\n" +
      "\r\ndelete" +
      "\r\n--XXX",
  success: (res) => {
      console.log(
          "res注意查看form-data里的文件",
          res
      );
  },
});

03 日

小程序授权摄像头权限

小程序授权，打开摄像头的时候需要权限

02 日

mpvue 的生命周期

今天测试一下在 mpvue 中的生命周期，mpvue 中没有 beforeCreate 和 created ，beforeMount 和 mounted 是有的，和小程序的 onload 的顺序是 onload ->beforeMount->mounted

01 日

小程序日历插件：

GIthub：日历插件

咳咳，九月份啦~新的一个月，我决定试图用写日记的方式记录工作，一条条死板的举例实在是没啥码字的动力了，作为一个文艺的、能文能武、文能提笔定乾坤、武能上马安天下的前端程序员，我要改变自己！变成个逗比先。

今天又新家的需求，原先没用过，不过自己学呗，搜了搜，于是发现了这个小程序的日历插件。样子如下所示

肿摸样，这个粉色很nice吧，这是一个插件，叫 极点日历，参考的文档有

1. 一键搞定！小程序调用日历本该如此简单

2. 极点日历-官方Github使用教程

想使用的话可以参考以上手册来试试。

31 日

今天可爽啊，改别人的代码，从周六就开始加需求，我可太难了。

不过今天都干了啥？