在 Nativescript Ios 和 Android 中创建一个简单的 href 链接答案

【问题标题】：Make a simple href link in Nativescript Ios & Android在 Nativescript Ios 和 Android 中创建一个简单的 href 链接
【发布时间】：2022-10-20 06:03:42
【问题描述】：

晚上好，

我有一个简单的问题，如何在使用 VueJs 和 Nativescript for Ios 和 Android 制作的应用程序中创建链接。

我有一家在线商店，我希望用户只需单击我的应用程序中的链接/按钮即可访问该商店。单击将在移动设备上启动浏览器。

假设我有www.shop.com 我想要这样的链接：My Link。

谢谢。

【问题讨论】：

标签： android ios hyperlink nativescript

【解决方案1】：

这是一个StackBlitz example，告诉你如何做到这一点。

如果您只想查看而不是运行它，那么重要的部分就在这里。简而言之，使用带有类link 的Label 将其设置为链接，并使用openUrl 在浏览器中启动链接。

<template>
  <Page>
    <ActionBar>
      <Label text="Home" class="font-bold text-lg" />
    </ActionBar>

    <GridLayout>
      <Label
        class="text-xl align-middle text-center link"
        :text="linkText"
        @tap="openLink"
      />
    </GridLayout>
  </Page>
</template>

<script lang="ts">
import Vue from 'nativescript-vue';
import { Utils } from '@nativescript/core';

export default Vue.extend({
  computed: {
    linkText() {
      return 'My Link';
    },
  },
  methods: {
    openLink() {
      Utils.openUrl('https://nativescript.org');
    },
  },
});
</script>

<style>
.link {
  color: #0645ad;
  text-decoration: underline;
}
</style>

【讨论】：