记录个人遇到的问题：pdf、aos动画、微信小程序、css3、CocosCreator、flutter、svg发光文字、node+vue+MongoDB全栈开发（遇到的坑）

​记录一些遇到的问题…

本文大概6000字，阅读大概需要10分钟

**

1、pdf复制出现乱码问号问题

上网一顿搜索，答案五花八门，有的说是pdf加密了，有的说生成pdf的字体是内嵌字体，电脑里缺失这种字体所以出现乱码或者问号的问题。
但是这些方法都解决不了复制文本，黏贴文本的问题，文本少的话当然自己打比较方便，但是文本如果过多了的话，那就是个繁琐的工作了，我们写程序的当然是简化工作。
所以我们解决的方法是将pdf文件截图保存为图片的形式，然后利用ocr以图识字，然后再将识别出来的文字复制下来。
具体操作如下：

上传图片后，点击免费转换：

点击查看：

就可以直接复制黏贴。

---

2、aos动画库反向播放问题

Aos动画库导致元素消失，刷新页面可以看到它时反向播放然后消失了，如下所示：

可以很明显的看到，播放动画相反了，并且元素最后一帧是消失的状态。
那么出现这个问题的原因，你的样式文件写了overflow-x: hidden; height: 100vh;属性，导致了某些样式的冲突，把这属性删了用其他的代替：

删除完之后的效果：

可以看到现在很完美的复现了，并且每次滚动动画都会重新播放。

---

3、微信小程序底部栏联系客服

我们知道微信小程序中默认在app.json中配置底部tabbar，如下：

"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#328EEB",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "images/index1.png",
        "selectedIconPath": "images/index2.png"
      },
      {
        "pagePath": "pages/fruit/fruit",
        "text": "果蔬",
        "iconPath": "images/fruit.png",
        "selectedIconPath": "images/fruit-active.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单",
        "iconPath": "images/order.png",
        "selectedIconPath": "images/order-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/my1.png",
        "selectedIconPath": "images/my2.png"
      }
    ]
  },

可以看出，每个底部按钮对应切换的页面，这就导致不够灵活，比如我想要在底部自定义点击跳转咨询客服上，那么我们知道现在小程序跳转咨询客服是集成wxml在button组件的openType="contact"上，那么利用当前这种写法肯定是达不到的，所以我们在项目的根目录下创建custom-tab-bar文件夹（自定义小程序底部tabbar组件）：

index.js写入：

// pages/custom-tab-bar/custom-tab-bar.js
Component({
  data: {
    selected: 0,
    color: "#000000",
    usingComponents: {},
    selectedColor: "#328EEB",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "主页",
        iconPath: "/images/index1.png",
        selectedIconPath: "/images/index2.png"
      },
      {
        pagePath: "/pages/fruit/fruit",
        text: "果蔬",
        iconPath: "/images/fruit.png",
        selectedIconPath: "/images/fruit-active.png"
      },
      {
        // pagePath: "/pages/order/order",
        text: "客服",
        iconPath: "/images/contact.png",
        selectedIconPath: "/images/contact-active.png"
      },
      {
        pagePath: "/pages/my/my",
        text: "我的",
        iconPath: "../images/my1.png",
        selectedIconPath: "../images/my2.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      const text = data.text
      this.setData({
        selected: data.index
      })
      if (text == '客服') {
        return
      }
      wx.switchTab({url})
      
    }
  }
})

---

index.json写入：

{
  "component": true
}

---

index.css写入：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}
.btn {
  background-color: transparent;
}
.contact-img {
  transform: translateY(5px);
}

---

index.wxml写入：

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" data-text="{{item.text}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    
    <button class="btn" wx:if="{{item.text == '客服'}}" openType="contact">
      <cover-image class="contact-img" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
      <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}
    </cover-view>
    </button>
    <cover-image wx:if="{{item.text != '客服'}}" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view wx:if="{{item.text != '客服'}}" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}
    </cover-view>
    
  </cover-view>
</cover-view>

可以看到我们在客服这里自定义了<button class="btn" wx:if="{{item.text == '客服'}}" openType="contact">可以看到这就更灵活了，可以满足底部为客服咨询的场景。并且为了解决每次点击闪一下高亮显示的问题，在每个对应的底部页面栏中写入如下代码：

 onShow() {
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 3
        })
      }
  },

selected为具体的页面栏索引。

---

4、纯CSS3完成选项卡，不要js完成的选项卡

今天就来敲一敲，选项卡，注意哦，不是一般利用js完成的选项卡，今天是纯用HTML和CSS来完成的，这怎么可能？那你不用js的点击事件，怎么处理？注意CSS3的新属性就可以完成啦，利用单选框的选择状态来查找兄弟元素，来改变下面元素的属性，就可以达到目的了。html的结构就不赘述了。
先看看效果：

点击这查看效果

效果有点丑，功能有就行了，懒得去修饰了，还有更重要的事等着我，好吧，代码给出：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯CSS3选项卡</title>
    <style>
        /* 初始化 */
        body, ul, li, a {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        /* 外面一层容器居中 */
        .wrapper {
            width: 600px;
            margin: 0 auto;
            font-size: 0;
            background-color: #ccc;
        }
        /* 设置导航栏为块级行元素，并将里面的字体垂直居中 */
        .nav .nav-list li {
            display: inline-block;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            user-select: none;
        }
        /* 设置主题新闻样式以及字体大小 */
        .news ul {
            display: none;
            padding: 20px;
            font-size: 18px;
            background-color: #f7f7f7;
        }
        /* 将主题新闻里的每条新闻空开来 */
        .news li {
            padding: 10px;
        }
        /* 设置主题新闻的字体颜色 */
        .news li a {
            color: #888;
        }
        /* 最关键的一步，利用表单元素的属性，选中或者未选中，来设置，展示新闻主题是哪块 */
        #hot:checked ~ .news .hot-news,
        #home:checked ~ .news .home-news,
        #international:checked ~ .news .international-news {
            display: block;
        } 
        /* 当表单元素被选中时，对应的导航栏背景颜色也跟着变 */
        #hot:checked ~ .nav li:nth-of-type(1),
        #home:checked ~ .nav li:nth-of-type(2),
        #international:checked ~ .nav li:nth-of-type(3)
         {
            background-color: #f7f7f7
        }
        /* 将label标签的设置为行级块元素。同时设置大小，这样点击可点击的范围就变大了 */
        .nav .nav-list label {
            display: inline-block;
            width: 200px;
            height: 50px;
            cursor: pointer;
        }
        /* 将单选框给隐藏掉 */
        .wrapper input {
            display: none;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <input type="radio" name="tab" id="hot" checked>
        <input type="radio" name="tab" id="home">
        <input type="radio" name="tab" id="international">
        <div class="nav">
            <ul class="nav-list">
                <li>
                    <label for="hot">热门新闻</label>
                </li>
                <li>
                    <label for="home">国内新闻</label>
                </li>
                <li>
                    <label for="international">国际新闻</label>
                </li>
            </ul>
        </div>
        <div class="news">
            <ul class="hot-news">
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
            </ul>
            <ul class="home-news">
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
            </ul>
            <ul class="international-news">
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

---

5、初识Cocos Creator

5.1 Cocos Creator安装

Cocos Creator中文文档

登陆Cocos creator 官网。

先在官网进行注册账号，下载安装完之后安装对应的sdk

在设置这还可以调成中文：

不过我这里还是使用英文，毕竟英文还不错（哈哈）。

---

5.2 创建项目

如下可以创建项目，或者导入项目，我们这边选择新建项目。

5.3 添加场景

场景、Scene就是一个游戏里的场景。
在左下角右键assets：

5.4 添加图片

资源Asset：指游戏里用到的素材、脚本等数据文件。
比如：图片、音频、程序脚本(js、ts)。
新建文件夹img将图片直接拖拽到项目去管理：

5.5 编辑场景

双击场景：

网格，每一格大小为100像素，分辨率默认为960x640。

5.6 添加节点

将背景图片以及准备好的图片直接拖到左上方Main Camera。

我们点击左边的节点，就可以进行节点的拖动了。

---

6、flutter改变图标和名称及启动图设置

6.1 生成图标

打开图标工厂

上传我们的图标。

点击开始生成。
然后就可以预览ios和android：

我们点击下载所有图标：

下载解压后有ios和android文件夹：

6.2 修改ios图标

在你创建的flutter项目根目录下用Xcode打开ios：

可以看到Display Name就是你app名称。
先将ios\Runner\Assets.xcassets\AppIcon.appiconset下所有文件删除。
然后我们将刚刚下载的ios\AppIcon.appiconset文件夹下的所有文件复制黏贴到ios\Runner\Assets.xcassets\AppIcon.appiconset就好。复制完成之后可以看到这里就是我们的图标了：

6.3 修改andriod图标

在你创建的flutter项目根目录下用Android Studio打开android 。
app名称：

我们将下载的android文件夹下的这六个文件夹全选复制：

黏贴到：flutter项目下的android\app\src\main\res复制替换就可以了。command+点击查看是不是图标：

可以看到已经是我们的图标了。

6.4 android启动图

安卓的启动图就设置好了。效果：

6.5 ios启动图

我们用Xcode打开flutter项目下的ios文件夹：

可以看到这里有1x，2x，3x（像素），我们将图片拖住放进

然后再将模式改成如下：

效果：

---

7、svg制作动态闪光文字

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        text {
            font-size: 50px;
            stroke: red;
            stroke-width: 2;
            stroke-dasharray: 0;
        }
        .text1 {
            stroke: yellow;
            animation: text1 10s infinite;
        }
        .text2 {
            stroke: blue;
            animation: text2 10s infinite;

        }
        .text3 {
            stroke: #CD7F32 ;
            animation: text3 10s infinite;

        }
        @keyframes text1 {
            0%,100% {
                stroke-dasharray: 20;
            }
            50% {
                stroke-dasharray: 250;
            }
        }
        @keyframes text2 {
            0%,100% {
                stroke-dasharray: 233;
            }
            50% {
                stroke-dasharray: 20;
            }
        }
        @keyframes text3 {
            0%,100% {
                stroke-dasharray: 188;
            }
            50% {
                stroke-dasharray: 10;
            }
        }
    </style>
</head>
<body>
    <svg width="400" height="150">
        <g>
            <text x="160" y="75">我爱撸码</text>
            <text class="text1" x="160" y="75">我爱撸码</text>
            <text class="text2" x="160" y="75">我爱撸码</text>
            <text class="text3" x="160" y="75">我爱撸码</text>
        </g>
    </svg>
</body>
</html>

效果：

---

8、node+vue+MongoDB全栈开发（遇到的坑）

一、今天主要说说node+vue+MongoDB的项目初始化遇到的几个坑。
主要有A端（admin端管理员端 ）+ C端（customer用户端） + 后台（node的后端框架express）;
在用mongoose连接数据库的时候主要遇到两个坑，两个非常简单的坑都是自己粗心造成的，今天记录一下报错的信息：

1. 前台发送ajax请求一直请求不成功，返回的信息data对象下，code字段-2，并且显示信息：“ECONNREFUSED”，就是数据库一直连接不上。找了一晚上错误，结果发现在后台入口index.js里面没有引入数据连接的js文件。（ps：被自己蠢到家了。）
2. 在入口index.js文件中引入后，后端终端又报错了，具体报错如下：UnhandledPromiseRejectionWarning: MongoParseError: No hostname or hostnames provided in connection string。 主要原因在mongoose.connect()函数中连接数据库加了空格

OK，简单记录下。

二、记录下使用elementUi，el-menu上router属性，el-menu-item属性index二级路由跳转的坑。在router下index.js路由配置中，在主路由 / 下记录两个二级子路由，children: [ { path: '/categories/create', component: CategoryEdit }, { path: '/categories/list', component: CategoryList } ] 在页面去点击时，第一次会正确解析，第二次点击时，会出现这种怪异现象：/categories/categories/create多拼接了一个字段，纠其原因，在el-menu-item属性index下不能这样写index="categories/create" 改成index="/categories/create"这样就能在根路径去请求。问题解决。

三、记录下在使用node的express时，管理员验证这块，在express后端代码中加入，jwt即jsonwebtoken验证管理员登录模块时，再使用到element-ui组件库中el-upload组件时，图片上传报错，401，unauthorization错误。在el-upload组件上加入headers属性，并且将本地localStorage的token加入到请求头部Authorization中，死活不成，在控制台查看请求报文，也是存在authrization字段，注意出现authrization而不是authorization，所以说是我在设置字段时少写了一个o。

如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。