小程序中webview的使用

Posted 2020-10-17

• 众所周知，小程序在前一段时间发布了一个功能，可以内嵌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>
<webview url="{{state.pagePath}}"></webview>
</view>

• 此时index页面中不能使用导航组件，应该改为view组件，这是就要给每一个导航添加一个点击事件
• 在点击事件中写如下代码

wx.navigateTo({url:`/pages/webview/webview?${需要传递到webview页面的参数}`})

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

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