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

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

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

跳转到自定义页面

第一步:打开Hbuilder,新建项目

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

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

第二步:创建自定义页面

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

<template>
	<view>
		<page-head :title="title"></page-head>
		<h2>简简单单的晚饭</h2>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'自定义页面'
			}
		}
	}
</script>

<style>
</style>

第三步:注册

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

		{
			"path": "pages/ad/ad",
			"style": {
				"navigationBarTitleText": "好好吃饭"
			}
		}

pages.json的完整代码如下:

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/ad/ad",
			"style": {
				"navigationBarTitleText": "好好吃饭"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

第四步:调用

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

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

	</navigator>

完整代码如下:

<template>
	<view class="container">
		
		<view class="intro">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view>
		<text class="intro">详见:</text>
		<uni-link :href="href" :text="href"></uni-link>
	</view>
	
	<navigator url="/pages/ad/ad?title=ad">
		<button type="default">跳转到新页面</button>
	</navigator>
	
	
</template>

<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

跳转到自定义连接

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

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

<template>
	<view>
		<web-view :webview-styles="webviewStyles" src="我的request的合法授权域名"></web-view>
	</view>
</template>

<script>

</script>

<style>

</style>

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

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

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

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

跳转到小程序内的文章页

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

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

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

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

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

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

uniApp添加连接,跳转到自定义页面、文章、网页
https://localhost:444/#/pages/single/post?id=122934

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

/pages/single/post?id=122934

参考文档

默认分类

如何将PHP的变量传给js?

2022-9-11 14:42:29

国外主题

GutenTag - 100%古登堡博客WordPress主题

2020-1-6 7:01:26

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索