小程序中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>
<webview url="{{state.pagePath}}"></webview>
</view>

• 此時index頁面中不能使用導航組件，應該改成view組件，這是就要給每個導航添加一個點擊事件
• 在點擊事件中寫以下代碼

wx.navigateTo({url:`/pages/webview/webview?${須要傳遞到webview頁面的參數}`})

如此，不出意外，就能夠了

這只是個人用法，有其餘用法歡迎評論