小程序(uni-app)跳转H5(React),H5跳转小程序

最新推荐文章于 2025-06-18 15:31:18 发布

Teitei90

最新推荐文章于 2025-06-18 15:31:18 发布

阅读量7.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/weixin_43134595/article/details/88593493

本文介绍了小程序(uni-app)如何跳转到H5页面，以及H5(React)如何返回小程序。在小程序中使用web-view标签实现跳转，H5页面通过事件处理进行交互。同时，文章提到了在H5页面中处理token传递的问题，尤其是在iOS上的特殊处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实呢这篇文章应该在几个月前就写完了,可惜懒癌一直发作,外加上公司996了几个月,实在无力更新,本着公司人事的规定,上班时间不得看视频学习,作为菜鸟的我只能总结总结之前项目中的一些坑,这不就写写小程序与H5的交互吧。当然,第一你得有思路,究竟是谁与谁的交互,我这个菜鸟当时写的时候是一脸蒙圈,废话有点多,开始撸代码。

第一步:小程序跳转到H5页面,那么这个代码是要写在小程序里面的,小程序自带web-view标签,实现了跳转

1.点击按钮触发页面的跳转(uni-app编写,无论是weex或者taro原理相通)

 <view @click="handleAction(item.title)">跳转H5</view>

2.点击事件的代码

handleAction(item){
  		let url = item.poster_link		 
         if (url === null) {
              return
        } else {
              let typeform = 'wechat'
      		  url = encodeURIComponent(`${url}?typeform=${typeform}`)
        }
    //以下代码实现跳转,切记记得自己webview的位置在那里，我之前因为这种低级错误找了半天
       uni.navigateTo({url: `/pages/webview/index?url=${encodeURI(encodeURI(item.poster_link))}`});
 }

3.编写webView页面(本次项目使用的是uni-app)

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

<script>
export default {
    name: "index",
    data(){
        return{
            url:''
        }
    },
    onLoad(val){
    	//动态获取的url
        this.url=decodeURIComponent(val.url)
    }
}
</script>

<style scoped>
</style>

附上文件目录结构