taro小程序跳转h5页面_taro跳转外部h5

taro微信小程序跳转h5页面

项目架构-tarojs+react+sass+微信开发者工具

项目使用taro官网上面的步骤构建起来的项目架构，之后生成微信端的小程序，由于项目与车险有关，需要多个渠道融合在一起，所以避免不了要调用其他端的页面去实现功能，所以涉及到了taro小程序跳转h5的知识

小程序跳转需求需求

在项目中，有为用户提供了各种快捷服务：“门店查询”、“保单下载”、“电子发票”、"报案理赔"等功能，在这里我需要跳转到h5页面。

项目目录结构

具体实现

第一步：app.js文件
在此文件中有一个组件对象config配置对象，在里面配置小程序需要跳转的其他h5小程序的appid，获得跳转权限

第二步：server.js页面组件
在文件方法中写跳转连接地址

//门店查询  
handleStoreInquiry=(e)=>{    
    this.$preload('path', Api.StoreQuery) //这里的path是配置的小程序跳转地址   
    Taro.navigateTo({      url: '/pages/webview/webview'    })  
   }
1
2
3
4
5

第三步：在微信开发者工具中，会自动生成webview目录结构，在webview.js中已经为你写好了大致的结构，你只需要将你的url键名变为动态传入的值就可以了。

import Taro, { Component } from '@tarojs/taro'
import { View, WebView } from '@tarojs/components'
/**
 * // NOTE Taro 的 RN 端还未提供 WebView 组件，可以引入原生组件来解决 
 * （备注：Taro v1.2.16 已支持，这块代码还是保留作为演示）
 * 
 * Taro 有开启了 tree shaking，对于未用到的内容编译时会自动去除 
 *  因此可以把相应端的内容都 import 进来，再根据环境进行调用即可 
 * 
 * 另外 1.2.17 版本有提供了统一接口方式 https://nervjs.github.io/taro/docs/envs.html 
 * 可以参考 ./src/pages/user-login 中的实现
 */
 import WebViewRN from './rn'import './webview.scss'
export default class extends Component { 
config = {    navigationBarTitleText: ''  }  
url = '' 
title = ''  
componentWillMount() {    
  this.url = this.$router.preload.path    
  this.title = this.$router.preload.tittle || ''    
  Taro.setNavigationBarTitle({ title: this.title })
}  
componentDidMount() {    
   this.url = this.url    
   console.log(this.url)    
   this.setState({      url: this.url    })  }  
   render() {    
      return (      
         <View className='webview'>        
         	<WebView src={this.url} />      
         </View>    )  }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

第四步，在文件webview.wxml中将你的url，也就相当于vue的date数据，在微信小程序页面上使用

<web-view src="{{url}}"></web-view>
1

就这样，小程序跳转h5页面也就完成了。