文章目录
第四周
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); })
杂谈
响应式编程，同步到 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 日
小程序日历插件：
咳咳，九月份啦~新的一个月，我决定试图用写日记的方式记录工作，一条条死板的举例实在是没啥码字的动力了，作为一个文艺的、能文能武、文能提笔定乾坤、武能上马安天下的前端程序员，我要改变自己！变成个逗比先。
今天又新家的需求，原先没用过，不过自己学呗，搜了搜，于是发现了这个小程序的日历插件。样子如下所示
肿摸样，这个粉色很nice吧，这是一个插件，叫 极点日历，参考的文档有
想使用的话可以参考以上手册来试试。
31 日
今天可爽啊，改别人的代码，从周六就开始加需求，我可太难了。
不过今天都干了啥？
扫一扫
616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
