React + Taro 小程序跳转公众号

article/2025/9/11 21:47:45

Taro小程序跳转公众号的文章

步骤：登录公众号后台-小程序-小程序管理-添加-关联小程序

关联后就可以在微信的公众平台查看(设置-关联设置-关联公众号)
如图所示：在这里插入图片描述

然后使用web-view

我这个是使用广告轮播实现的代码如下

注意：一个页面使用一个web-view 所以我使用遍历传值到跳转地址的页面

html代码

 {/* 跳转公众号的文章 */}<View><AtCurtainisOpened={this.state.isOpened}onClose={this.onClose.bind(this)}closeBtnPosition:true><SwiperclassName="swip-curtain"indicatorColor="#999"indicatorActiveColor="#333"circularautoplayindicatorDots="true"indicatorActiveColor="#0080ff">{ad.map((item, index) => {return (<Navigator url={`${item.jumpUrl}?webUrl=${item.webUrl}`} key={index}><SwiperItem><View className="demo-text-1"><ImageclassName="swip-image"style="width: 100%;height:500rpx;background: #fff;"src={item.image}/></View></SwiperItem></Navigator>);})}</Swiper></AtCurtain></View>

js代码

//接收传入的文章地址componentDidMount(){// this.getAdImg()const { webUrl } = this.$router.params;this.setState({webUrl: webUrl,});console.log("传入的值")console.log(webUrl);}// 遍历到对应的web-view上render() {return (<View><web-view src={this.state.webUrl}></web-view></View>);}