原来类组件的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页',
    navigationBarBackgroundColor: '#ffffff',
    backgroundColor: '#eeeeee',
    navigationBarTextStyle: 'black',
    backgroundTextStyle: 'light'
  }

  render () {
    return (
      <View className='index'>
      </View>
    )
  }
}

如果是函数式组件需要换种写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function Index() {
  return (
    <View className='index'>
      <Text>1</Text>
    </View>
  )
}

Index.config = {
  navigationBarTitleText: '首页',
  navigationBarBackgroundColor: '#ffffff',
  backgroundColor: '#eeeeee',
  navigationBarTextStyle: 'black',
  backgroundTextStyle: 'light'
}

export default Index

唠唠嗑

放假在家当咸鱼有一段时间了，也好久没写笔记了，今天逛技术社区的时候遇到了一个有点意思的题目，正好也是我没遇到过的场景，于是记录一下

冲冲冲

最近写接口时，有个新增文章的接口报错了，报错的信息为：

1
2
3

...
SQLSTATE[HY000]: General error: 1366 Incorrect string value: '\xF0\x9F\x98\x8B\xF0\x9F...' for column 'content' at row
...

因为那个页面有富文本编辑器，所以很快的推断出了这是因为数据里有 emoji 表情导致的报错

解决办法如下：

1.设置该字段的字符编码

1

ALTER TABLE 表名 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2.修改 Laravel 配置

config/database.php

1
2
3
4
5
6
7
8
9
10

'mysql' => [
    'driver'    => 'mysql',
    'host'      => env('DB_HOST', 'localhost'),
    'port'      => env('DB_PORT', '3306'),
    'charset'   => 'utf8mb4',
    'collation' => 'utf8mb4_unicode_ci',
    'prefix'    => '',
    'strict'    => true,
    'engine'    => null,
]

直接用正则替换 base64 图片的编码头即可

1
2
3
4
5
6
7
8

public function update(Request $request) {
    $coverImg = $request->get('cover_img');
    preg_match('/^(data:\s*image\/(\w+);base64,)/', $coverImg, $res);
    $coverImg = base64_decode(str_replace($res[1], '', $coverImg));
    $imagePath = str_random(10) . uniqid() . '.png';	// 生成图片名
    Storage::disk('uploads')->put($imagePath, $coverImg);	// 保存图片
    return env('APP_URL') . '/uploads/' . $imagePath;	// 拼接完成路径
}

有几个点要注意：

1.上面代码中的 Storage::disk('uploads') 是我在 config/filesystems.php 文件中定义的，如果直接把代码复制过去执行是不行的

config/filesystems.php

1
2
3
4
5
6
7
8
9
10

'disks' => [
    ...
     // 新建一个本地端uploads空间（目录） 用于存储上传的文件
    'uploads' => [
        'driver' => 'local',
        // 文件将上传到public/uploads目录 如果需要浏览器直接访问 请设置成这个
        'root' => public_path('uploads'),
      ]
    ...
],

2.部署到生产环境后需要给权限 否则无法保存图片

揭开 redux 迷雾，手撸一个 mini redux

最近的一个微信 h5 项目，用到了 微信 jssdk 的 chooseImage 方法，遇到了坑，在这里记一下

需求是用户拍照或上传本地图片，先显示出来，然后再上传图片做其他的事情，弄的过程中发现，安卓可以使用 chooseImage 方法返回的 localId 显示图片，ios 显示不出图片

查了下，找到了解决方法：

ios 微信 6.5.3 版本开始支持开发者手动切换 WKWebview 和 UIWebview，使开发者可提前对 WKWebview 进行适配

WKWebview 不再支持通过使用 chooseImage api 返回的 localld ，如：”img src=wxLocalResource://50114659201332” 的方式预览图片。

在 iOS 微信 6.5.3 版本及之后的版本中，使用新增的 jsapi：getLocalImgData 拿到 LocalID 对应的图片 base64 编码后再在前端页面中显示

也就是说，在 ios 上，chooseImage 拿到图片的 localId 后，再使用 getLocalImgData 方法拿到 localId 对应的图片 base64

栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: (res) => {
    var localIds = res.localIds.toString() // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    this.imgUrl = localIds
    if (isIos()) {
      wx.getLocalImgData({
        localId: localIds, // 图片的localID
        success: (res) => {
          this.imgUrl = res.localData // localData是图片的base64数据，可以用img标签显示
        },
      })
    }
  },
})

参考：https://www.oschina.net/question/1784764_226910?sort=default&p=2

最近的一个微信 h5 项目，有生成分享图的需求，用到了 html2canvas 这个库

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let el = document.querySelector('.xxx');
html2canvas(el, {
  width: el.offsetWidth,
  height: el.offsetHeight,
  scale: 2,
  dpi: window.devicePixelRatio * 2,
  useCORS: true,
})
.then(canvas => {
  this.coverImg = canvas.toDataURL('image/png', 1.0);
})
.catch(err => {
  console.log('报错了', err);
})

安卓能正常生成，ios 报错了，错误信息是：

1
2
3
4

column: 46
line: 150
message: "Maximum call stack size exceeded."
stack: "fromCodePoint consumeStringSlice consumeStringToken consumeUrlToken read parse CSSParsedDeclaration ElementContainer createContainer parseTree step fulfilled promiseReactionJob@[native code]"

为什么会报这个错，咱也不知道，在网上找到一篇文章，说到了这个问题，说是 css 背景图导致的，于是我把背景图换成了 img 标签，就没报错能正常生成了

参考：https://my.oschina.net/ihh/blog/4635402

直接执行命令：

1

apt install git

安装过程中如果出现了以下错误，需要更新一下 apt 包列表

1
2
3
4
5
6
7
8
9
10
11
12
13

Reading package lists... Done
Building dependency tree       
Reading state information... Done
Package git is not available, but is referred to by another package.
This may mean that the package is missing, has been obsoleted, or
is only available from another source

E: Package 'git' has no installation candidate
root@iZ8vbh829ac9d7go2fq5otZ:~# git -V

Command 'git' not found, but can be installed with:

apt install git

更新 apt 包列表：

1
2

apt-get update -y
apt-get upgrade -y

更新之后再 执行 apt install git 安装

最后执行 git --version 检查 git 是否安装成功