Taro小程式跳轉公衆号文章

Taro小程式跳轉公衆号的文章

步驟：登入公衆号背景-小程式-小程式管理-添加-關聯小程式

關聯後就可以在微信的公衆平台檢視(設定-關聯設定-關聯公衆号)

如圖所示：

然後使用web-view

我這個是使用廣告輪播實作的代碼如下

注意：一個頁面使用一個web-view 是以我使用周遊傳值到跳轉位址的頁面

html代碼

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

html代碼

//接收傳入的文章位址
 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>
    );
  }
           

如果覺得文章還行的話，可以給我一顆小星星嘛，謝謝啦 ~~

加油元芳，明天會更好的 ~~