小程序(uni-app)跳转H5(React),H5跳转小程序_uniapp中使用react

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

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

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

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

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))}`});
 }
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

附上文件目录结构