<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"
]