1.封装工具类

utils/jump.js

import Taro from '@tarojs/taro'

const PAGE_WEBVIEW = '/pages/webview/webview'

/**

* // NOTE 后端返回的 url 可能是网页链接，需要在 webview 中打开

* 也可能是小程序自身的链接，只能用 navigate/redirect 之类的打开

* 就需要有个地方统一判断处理

*/

export default function jump(options) {

const { url, title = '', payload = {}, method = 'navigateTo' } = options

if (/^https?:\/\//.test(url)) {

Taro[method]({

url: urlStringify(PAGE_WEBVIEW, { url, title })

})

} else if (/^\/pages\//.test(url)) {

// TODO H5 不支持 switchTab，暂时 hack 下

if (process.env.TARO_ENV === 'h5' && method === 'switchTab') {

Taro.navigateBack({ delta: Taro.getCurrentPages().length - 1 })

setTimeout(() => { Taro.redirectTo({ url }) }, 100)

return

}

Taro[method]({

url: urlStringify(url, payload)

})

}

}

function urlStringify(url, payload, encode = true) {

const arr = Object.keys(payload).map(key =>

`${key}=${encode ? encodeURIComponent(payload[key]) : payload[key]}`

)

// NOTE 注意支付宝小程序跳转链接如果没有参数，就不要带上 ?，否则可能无法跳转

return arr.length ? `${url}?${arr.join('&')}` : url

}

2.webview 页面

src/pages/webview/webview.js

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 = decodeURIComponent(this.$router.params.url || '')

this.title = decodeURIComponent(this.$router.params.title || '')

Taro.setNavigationBarTitle({ title: this.title })

}

render () {

return (

{/* // NOTE 编译时只会保留相应端的内容，因此非 RN 端时不会编译 WebViewRN */}

{process.env.TARO_ENV === 'rn' ?

:

}

)

}

}

src/pages/webview/webview.scss

.webview {

height: 100%;

}

src/pages/webview/rn/index.js

/**

* React Native 原生组件

*/

import Taro, { Component } from '@tarojs/taro'

import { WebView } from 'react-native'

export default class WebViewRN extends Component {

render() {

return (

style={{ height: '100%' }}

originWhitelist={['*']}

source={{ uri: this.props.src }}

/>

)

}

}

.