ios 微信 h5 中的 chooseImage 接口拿到 localId 后无法通过 img 标签显示图片

最近的一个微信 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

html2canvas ios 报错 Maximum call stack size exceeded

最近的一个微信 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

ubuntu 18.04 上安装git

直接执行命令:

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 是否安装成功

Taro -webkit-box-orient: vertical 失效

在使用 taro 写多行文本超出显示省略号时,发现 -webkit-box-orient: vertical; 没起作用

最后去社区查了下,发现有人遇到了同样的问题,最后得到的解决方案是:

第一种

1
2
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

第二种

1
2
3
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

两种方式都是加入 css 注释 去声明忽略下一行,防止编译时被过滤掉

issue:https://github.com/postcss/autoprefixer/issues/776

公告

网站迁移了,之前是托管在 gitee 上,好处是不用买服务器,坏处是不利于 seo 收录

前段时间把域名备案了,买了中国大陆的服务器,用 jenkins + nginx 搭了个自动化部署

新的服务器,新的开始,加油,奥利给 💪

nginx配置ssl实现https

环境说明

服务器系统:Ubuntu 18.04 64位

nginx:1.14

这篇文章主要是记录配置 https 的步骤,就不介绍申请ca证书的相关细节了

这里有免费的 ssl 证书:https://cloud.tencent.com/act/pro/ssl

我是西部数码的域名,在腾讯云申请的证书

申请证书并签发后,把证书先下载到本地

1、安装 nginx

1
2
$ apt-get update // 更新软件
$ apt-get install nginx // 安装nginx

2、配置 ca 证书

2.1 nginx 的安装目录为 /etc/nginx/,进入该目录,增加 cert 文件夹,把刚刚下载的两个文件上传到 cert 文件夹里

2.2 在 /etc/nginx/conf.d/ 文件夹下新增一个 blog.conf 的配置文件,名字随意,nginx 会读取 conf.d/ 文件夹里的所有配置文件

2.3 把下面的配置信息复制到 blog.conf 文件里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
server {
listen 443;
server_name xiaoxina.cc; // 你的域名
ssl on;
root /var/lib/jenkins/workspace/blog; // 你的网站源码目录
index index.html index.htm;
ssl_certificate /etc/nginx/cert/xiaoxina.cc.crt; // 证书地址
ssl_certificate_key /etc/nginx/cert/xiaoxina.cc.key; // 证书地址
ssl_session_timeout 10m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_session_cache builtin:1000 shared:SSL:10m;
ssl_buffer_size 1400;
add_header Strict-Transport-Security max-age=15768000;
ssl_stapling on;
ssl_stapling_verify on;
location / {
index index.html index.htm;
}
}

server {
listen 80;
server_name xiaoxina.cc; // 你的域名
rewrite ^(.*)$ https://$host$1 permanent;
}

配置完成后,检查一下 nginx 配置文件是否可用,有出现 successful 说明配置是正确的

1
$ nginx -t

配置正确后,重新加载配置文件使配置生效:

1
$ service nginx reload