在原生脚本iOS和Android中创建简单的href链接

rqqzpn5f  于 2022-11-19  发布在  iOS
关注(0)|答案(1)|浏览(130)

晚上 好 ,
我 有 一 个 简单 的 问题 , 如何 在 应用 程序 中 创建 一 个 链接 与 VueJs & Nativescript 为 iOS & Android .
我 有 一 个 网上 商店 , 我 希望 用户 能够 访问 这个 商店 , 只需 点击 链接/按钮 , 在 我 的 应用 程序 。 点击 将 启动 手机 上 的 浏览 器 。
假设 我 有 www.shop.com , 我 想要 一 个 这样 的 链接 :是 的 。

  • 谢谢 - 谢谢
baubqpgj

baubqpgj1#

这里有一个StackBlitz example如何你可以做到这一点。
如果你只是想查看而不是运行它,那么这里就是最重要的部分。简而言之,使用Labellink类将其样式化为链接,并使用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>

如果你不想依赖内置的Utils.openUrl(),你可以直接调用原生API,例如在iOS上:

import { Application } from '@nativescript/core';

const app: UIApplication = Application.ios.nativeApp;
const options = NSDictionary.dictionary<string, any>();
const callback = (success) => {
  console.log('openUrl: ', success);
};
app.openURLOptionsCompletionHandler(NSURL.URLWithString('https://nrk.no'), options, callback);

相关问题