はじめに

NativeScript(NativeScript-Vue) で、外部ブラウザでリンクを開く方法

TL;DR

  • openUrl 関数を使う
    • import * as utils from "tns-core-modules/utils/utils"
    • utils.openUrl(<url>)

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
  5. まとめ
  6. その他・メモ
    1. 共通
    2. Android
    3. iOS
  7. 参考文献

環境・条件

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
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.5
BuildVersion: 19F101

$ node -v
v12.7.0

$ npm -v
6.14.5

$ tns --version
6.5.0

$ grep -C1 version package.json
"tns-android": {
"version": "6.5.1"
},
"tns-ios": {
"version": "6.5.1"
}

$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────────────────┐
│ Plugin │ Version │
│ @nativescript/theme │ ^2.2.1 │
│ @vue/devtools │ ^5.0.6 │
│ nativescript-socketio │ ^3.2.1 │
│ nativescript-toasty │ ^1.3.0 │
│ nativescript-vue │ ^2.4.0 │
│ nativescript-vue-devtools │ ^1.2.0 │
│ tns-core-modules │ ^6.0.0 │
└───────────────────────────────┴─────────────────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin │ Version │
│ @babel/core │ ^7.0.0 │
│ @babel/preset-env │ ^7.0.0 │
│ babel-loader │ ^8.0.2 │
│ nativescript-dev-webpack │ ^1.0.0 │
│ nativescript-vue-template-compiler │ ^2.0.0 │
│ nativescript-worker-loader │ ~0.9.0 │
│ node-sass │ ^4.9.2 │
│ vue-loader │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

詳細

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<StackLayout>
<Button text="リンクを開く" @tap="onTapButton" />
</StackLayout>
</template>

<script >
import * as utils from "tns-core-modules/utils/utils";

export default {
methods: {
onTapButton() {
utils.openUrl('https://r17n.page/');
},
},
}
</script>

まとめ

  • openUrl 関数を使う
    • import * as utils from "tns-core-modules/utils/utils"
    • utils.openUrl(<url>)

その他・メモ

Utils には他にも便利そうな関数があるのでメモだけ残しておく。

共通

  • isFileOrResourcePath()
  • isDataURI()
  • openUrl()
  • escapeRegexSymbols()
  • convertString()
  • getDisplayDensity()
  • toDevicePixels()
  • toDeviceIndependentPixels()
  • round()
  • executeOnMainThread()
  • mainThreadify()

Android

  • getApplication()
  • getApplicationContext()
  • getInputMethodManager()
  • showSoftInput()
  • dismissSoftInput()
  • stringArrayToStringSet()
  • stringSetToStringArray()
  • getDrawableId()
  • getStringId()
  • getId()
  • getPalleteColor()

iOS

  • jsArrayToNSArray()
  • nsArrayToJSArray()
  • isLandscape()
  • MajorVersion()
  • openFile()

参考文献

関連記事