はじめに
Cordova ライブラリで QR コード読み取りを実装したので手順をメモしておきます。
環境
1
2
3
4
|
cordova-plugin-qrscanner: 3.0.1
cordova-plugin-qrscanner: 2.6.2
|
ライブラリインストール
https://www.npmjs.com/package/cordova-plugin-qrscanner
1
2
3
4
|
cordova plugin add cordova-plugin-qrscanner
cordova plugin add cordova-plugin-qrscanner@2.6.2
|
XCode が 10.1 以下の場合は 2.6.2 より最新のものだとエラーになるので 2.6.2 を指定してます
Xcode が 10.1 以下の場合
Xcode が 10.1 以下の場合は以下の修正をしないとエラーになります。
エラー
1
2
| note: 'openSettingsURLString' was introduced in Swift 4.2
public class let openSettingsURLString: String
|
修正ファイル
/platforms/ios/pb-wallet/Plugins/cordova-plugin-qrscanner/QRScanner.swift
修正内容
UIApplication.openSettingsURLString
を
UIApplicationOpenSettingsURLString
に置換する。
２箇所あります。
参考
https://github.com/bitpay/cordova-plugin-qrscanner/issues/238
Swift バージョン変更
Xcode を開いて
Build Settings > Swift Compiler - Language
から Swift のバージョンを 4.2 以上にする
js コード
vue のコードですが js の部分を抜き出せば他のフレームワークでも流用できるはずです
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| export default {
mounted() {
document.querySelector("html").classList.add("transparent-body");
document.querySelector("body").classList.add("transparent-body");
QRScanner.prepare(this.onDone);
},
methods: {
onDone(err, status) {
if (err) {
console.log("err: " + err);
this.$router.go(-1);
}
if (status.authorized) {
QRScanner.scan(this.displayContents);
QRScanner.show();
} else {
this.$router.go(-1);
}
},
displayContents(err, text) {
if (err) {
console.log("err: " + err);
} else {
console.log("text: " + text);
}
}
},
destroyed() {
document.querySelector("html").classList.remove("transparent-body");
document.querySelector("body").classList.remove("transparent-body");
if (cordova.platformId == "ios") {
QRScanner.destroy(function(status) {
console.log(status);
});
setTimeout(() => {
window.document.body.style.backgroundColor = "";
}, 500);
}
}
};
|
css
vue の場合、scoped を付けると body タグに css が効かないので以下のように scoped を付けないように注意してください。
1
2
3
4
5
6
| <style>
.transparent-body {
background-color: transparent;
}
</style>
|
おわりに
css で背景を透明にしないといけない所でけっこうハマってツラかったです、、
以上です。