Taro小程序webview使用API及避坑指南

Taro小程序webview组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。
注意：个人类型的小程序暂不支持使用。客户端 6.7.2 版本开始，navigationStyle: custom 对 webview组件无效，小程序插件中不能使用。
以上意味着：webview的页面无法自定义导航栏，无法自定义高度、样式等，去加载了webview，那么webview中的h5页面将具备最高控制权，
所以小程序开发者如果想在webview组件上做任何修改，只能建议自定义组件。
小程序开发者可以做哪些？
1.可以自定义设置页面标题

最好写在生命周期constructor、willMount、didMount中,仅第一次生效；同时如果加载的h5页面配置了title标题，h5页面的title会覆盖页面级设置的标题。
自定义标题：

Taro.setNavigationBarTitle({
  title: '自定义标题'
})；

2.方法说明，引入及API使用

参数	类型	必填	说明
src	`string`	是	webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
onMessage	`BaseEventOrigFunction<onMessageEventDetail>`	否	网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }
onLoad	`BaseEventOrigFunction<onLoadEventDetail>`	否	网页加载成功时候触发此事件
onError	`BaseEventOrigFunction<onErrorEventDetail>`	否	网页加载失败的时候触发此事件

代码示例：

import Taro, { Component,getCurrentInstance } from '@tarojs/taro'
import { View, WebView } from '@tarojs/components'

export default class extends Component {
  config = {
    navigationBarTitleText: ''
  }

  url = ''
  title = ''

  componentWillMount() {
    //使用decodeURIComponent，是因为如果直接获取url，如果url中含有"?"等携带参数，
    //会导致参数丢失，所以传入url时使用encodeURIComponent做一次转义
    this.url = decodeURIComponent(getCurrentInstance()?.router?.params?.url || '')
    this.title = decodeURIComponent(getCurrentInstance()?.router?.params?.title || '')
    Taro.setNavigationBarTitle({ title: this.title })
  }

  //网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息
  onWebMessage(e){
    const {data} = e.detail;
    console.log("onWebMessage==",data)
  }

  //网页加载成功时候触发此事件
  onWebLoad(e){
    const {src} = e.detail;
    console.log("onWebLoad==",src)
  }

  //网页加载失败的时候触发此事件
  onWebError(e){
    const {errMsg,url} = e.detail;
    console.log("onWebError==",errMsg)
  }

  render () {
    return (
      <View className='webview'>
        <WebView src={this.url}
                 onMessage =  {this.onWebMessage}
                 onLoad=  {this.onWebLoad}
                 onError =  {this.onWebError}
        />
      </View>
    )
  }
}

同时h5页面如何调用原生api，如何向webview页面发送消息，可以参考我的另外一篇博客：Taro webview中的h5页面如何使用原生小程序API

以上即本人使用心得，如有帮助，记得点赞三连~谢谢~

客官且慢~扫一扫个人微信小程序，琳琅街比价，谢谢支持~

Taro小程序webview使用API及避坑指南

猜你喜欢