Decorative image frame

小鑫の随笔

Taro3 不使用 TypeScript 的情况下使用 taro-ui 时报错

踩坑记录
  239字   1分钟

最近有个小程序的项目，用 taro3 脚手架创建了项目，在组件里引入了 taro-ui 的组件之后，执行 yarn dev:weapp 一直报错，报错内容是无法识别 taro-ui 里面的 ts 语法

报错信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/chenlin/workspace/taro_test/node_modules/taro-ui/dist/weapp/components/swipe-action/index.tsx: Unexpected token, expected "{" (22:54)

20 | import AtSwipeActionOptions from './options/index'
21 |

22 | export default class AtSwipeAction extends AtComponent<
| ^
23 | AtSwipeActionProps,
24 | AtSwipeActionState
25 | > {
...

(node:6474) UnhandledPromiseRejectionWarning: [object Array]
(node:6474) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6474) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

后来搜了下官方 issue，发现有人遇到过这个问题，原因是 taro-ui 2.x 跟 taro 3.x 不兼容，需要安装 3.x 的 taro-ui

issue 地址：https://github.com/NervJS/taro-ui/issues/1179

JS new Date() 报错 Invalid Date

踩坑记录
  115字   1分钟

还原事故现场：

接口返回的数据中，有个时间戳字符串，我拿到之后用 new Date() 实例化时间对象，结果控制台提示：Invalid Date

后来自己试了下，发现时间戳的格式需要是数字，才不会报错，所以转日期的时候加了个类型转换就ok了

1
2
3
4
5
let timestamp = "1515239514230"

new Date(timestamp);  // Invalid Date

new Date(Number(timestamp));  // Sat Jan 06 2018 19:51:54 GMT+0800 (中国标准时间)

小程序 富文本 图片过大问题

踩坑记录
  92字   1分钟

最近的一个项目遇到了这个问题，这个问题也很好处理，一段代码就够了：

1
2
3
4
<!-- 以下是 uni-app 代码 -->
<rich-text
	:nodes="(product.exchangeExplain || '').replace(/\<img/gi, '<img style=\'max-width: 100%;height:auto;display:block;\'')"
></rich-text>

给 img 设置一下最大宽度就可以了

CSS height:100%和height:100vh的区别

学习笔记
  82字   1分钟

vh 是 CSS 中的相对长度单位，相对视口高度（Viewport Height），1vh = 1% * 视口高度

也就是说：height:100vh == height:100%

但是元素没有内容的时候，设置 height:100%，该元素不会被撑开，此时高度为0

但是设置 height:100vh，该元素会被撑开跟屏幕高度一致

wx is not defined no-undef 报错解决方法

踩坑记录
  92字   1分钟

今天用项目里引入了微信的 jssdk，在使用的过程中，一直报 wx is not defined no-undef

后来看了下，是 eslint 的报错，给 eslint 的规则加上全局变量 wx 就可以了

解决方法：在 .eslintrc.js 文件里加入以下内容，就不会报错了

1
2
3
4
5
6
module.exports = {
    // 省略其他配置...
    globals: {
        wx: true
    }
}