小程序中webview的使用

  • 众所周知,小程序在前一段时间发布了一个功能,可以内嵌H5页面

首先说明:我的项目用的是labrador框架

webview的使用步骤

  • 现在pages中添加一个页面
  • 在app.json中把这个页加进去
  • 在webview.js中写如下代码
export default class Webview extends Component{
constructor(props){
super(props);
this.state={
pagePath:'
}
}

async onLoad(opt){
//这是从后台拿到的token,并保存在缓存中,此时得到
const Token = ...
let url = 要跳转的网页路径
this.setState({pagePath:url})
}
}

  

  • 在webview.xml中写如下代码
<view>
<web-view src="{{state.pagePath}}"></web-view>
</view>
  • 此时index页面中不能使用导航组件,应该改为view组件,这是就要给每一个导航添加一个点击事件
  • 在点击事件中写如下代码
wx.navigateTo({url:`/pages/webview/webview?${需要传递到webview页面的参数}`})

如此,不出意外,就可以了

这只是我的用法,有其他用法欢迎评论