uniApp 添加连接，跳转到自定义页面、文章、网页

通过 uniApp 添加连接，跳转到自定义页面

最后更新于 2025-06-04

本页目录10 节

在 uniApp 的开发过程中，我们常常需要通过按钮，方便用户跳转到我们需要的页面。

跳转到自定义页面

第一步：打开 Hbuilder，新建项目

我们选择 uni-app，模板选择默认模板，VUE 版本选择 3

第二步：创建自定义页面

我们在项目的 pages 目录下，新建 ad 目录，再在 ad 目录下新建 ad.vue 文件，输入以下代码

1
<template>
2
  <view>
3
    <page-head :title="title"></page-head>
4
    <h2>简简单单的晚饭</h2>
5
  </view>
6
</template>
7

8
<script>
9
  export default {
10
    data() {
11
      return {
12
        title:'自定义页面'
13
      }
14
    }
15
  }
16
</script>
17

18
<style>
19
</style>

第三步：注册

我们在项目的根目录下找到 pages.json，在里面添加以下代码，注册我们的页面

1
    {
2
      "path": "pages/ad/ad",
3
      "style": {
4
        "navigationBarTitleText": "好好吃饭"
5
      }
6
    }

pages.json 的完整代码如下：

1
{
2
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
3
    {
4
      "path": "pages/index/index",
5
      "style": {
6
        "navigationBarTitleText": "uni-app"
7
      }
8
    },
9
    {
10
      "path": "pages/ad/ad",
11
      "style": {
12
        "navigationBarTitleText": "好好吃饭"
13
      }
14
    }
15
  ],
16
  "globalStyle": {
17
    "navigationBarTextStyle": "black",
18
    "navigationBarTitleText": "uni-app",
19
    "navigationBarBackgroundColor": "#F8F8F8",
20
    "backgroundColor": "#F8F8F8"
21
  },
22
  "uniIdRouter": {}
23
}

第四步：调用

我们找到根目录下，pages 目录下的，index 目录下的 index.vue 文件，添加以下代码，跳转到我们的自定义页面

1
  <navigator url="pages/single/post?id=142477&__id__=1">
2
    <button>跳不顾一切的文章吧</button>
3

4
  </navigator>

完整代码如下：

1
<template>
2
  <view class="container">
3

4
    <view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
5
    <text class="intro">详见：</text>
6
    <uni-link :href="href" :text="href"></uni-link>
7
  </view>
8

9
  <navigator url="/pages/ad/ad?title=ad">
10
    <button type="default">跳转到新页面</button>
11
  </navigator>
12

13

14
</template>
15

16
<script>
17
  export default {
18
    data() {
19
      return {
20
        href: 'https://uniapp.dcloud.io/component/README?id=uniui'
21
      }
22
    },
23
    methods: {
24

25
    }
26
  }
27
</script>
28

29
<style>
30
  .container {
31
    padding: 20px;
32
    font-size: 14px;
33
    line-height: 24px;
34
  }
35
</style>

跳转到自定义连接

承接上面的教程，跳转到您指定的自定义页面中，

在您自定义的 pages - ad - ad.vue 页面中添加以下代码：

1
<template>
2
  <view>
3
    <web-view :webview-styles="webviewStyles" src="我的request的合法授权域名"></web-view>
4
  </view>
5
</template>
6

7
<script>
8

9
</script>
10

11
<style>
12

13
</style>

您的域名，可能需要在对象的小程序管理后台经过授权才可使用。（web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url ）

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

注意：使用这种方法在浏览器预览会出错，需要直接运行到手机端，就会正常显示。

跳转到小程序内的文章页

打开项目，找到 pages - index - index.vue

在你想插入的地方插入以下连接：

1
<view @click="go('/pages/single/page?id=144090')" class="about-link flex-center">
2
点我跳到指定ID的文章
3
</view>

代码中的/pages/single/page?id=144090，可通过菜单 - 运行 - 运行到浏览器 - ~~获取

找到你需要跳转的文章，查看器在浏览器中的 URL 连接，例如下面这样

1
https://localhost:444/#/pages/single/post?id=122934

截取其中的一段即可。例如这样

1
/pages/single/post?id=122934

阅读偏好

工具