uni-app开发h5点击跳转到h5,微信小程序跳转到h5

<image
		class="tvcBu"
		@click="toUrl"
		mode="aspectFit"
		src="../../static/img/button.png"
		>
</image>

点击跳转,并传递url

export default {
		data() {
			return {
				url: ''
			}
		},
		methods: {
			toUrl() {
				uni.navigateTo({
					url: '../toUrl/toUrl?url='+ this.url
				})
			}
		}
	}

在第二个页面中,接收url,并显示h5页面

<template>
	<web-view :src="url"></web-view>
</template>

<script>
	export default {
		data() {
			return {
				url: ''
			}
		},
		methods: {
			
		},
		onLoad(options) {
			this.url = options.url;
		}
	}
</script>

<style>

</style>

参考:
https://blog.csdn.net/a18792627168/article/details/108964628
https://blog.csdn.net/caicai1171523597/article/details/90326583

这种方式,h5跳h5是没问题的,但是微信小程序跳h5就不太行了
请添加图片描述
拿不到第三方的服务器

因为当时是需要跳到京东的一个h5上,那肯定没有服务器呀,最后决定跳到京东微信小程序上。
小程序跳小程序就方便很多了

target设置为miniProgram,app-id设置成要跳转的小程序app-id,path是要跳转的小程序的具体页面,open-type为跳转方式

<navigator 
	target="miniProgram" 
	app-id="wx91d27dbf599dff74"
	path="pages/item/detail/detail?cover=https%3A%2F%2Fm.360buyimg.com%2Fmobilecms%2Fs300x300_jfs%2Ft1%2F213853%2F13%2F6659%2F118519%2F61a9da54E9b037fc1%2F6a7055a0e7888a74.jpg!q70.jpg&from=wxshare_3&fb=0&name=%E6%B0%B4%E4%BA%95%E5%9D%8A%C2%B7%E5%85%B8%E8%97%8F%EF%BC%88%E4%B8%AD%E5%9B%BD%E5%86%B0%E9%9B%AA%E7%BA%AA%E5%BF%B5%E6%AC%BE%EF%BC%89%2052%E5%BA%A6500mL&price=1499&sku=10041573979476"
	open-type="navigate">
</navigator>

注意:复制后的路径中带有的html后缀要去掉!不然页面会找不到!!!
可以去官方文档再详细阅读

获取app-id:在小程序的更多里就可以找到
在这里插入图片描述
获取页面path:
小程序后台

1.点击小程序管理后台右上角的生成小程序码
在这里插入图片描述
2.查找要获取页面路径的小程序,可以输入APPID/名称/账号原始ID
在这里插入图片描述
3.鼠标移到获取更多页面路径,跟流程走就可以了,开启入口后,手机端被开启入口的用户就可以通过小程序右上角的更多复制路径了。
在这里插入图片描述
app.json也要写上要跳转小程序的app-id。

"navigateToMiniProgramAppIdList": [
	    "wx91d27dbf599dff74"
]

参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值