webview_flutter
在应用内置组件中加载网页
dependencies:
webview_flutter: ^2.0.9
/// 初始化webview
initWebView() {
return WebView(
//是否允许js执行
javascriptMode: JavascriptMode.unrestricted,
//JS和Flutter通信的Channel
javascriptChannels: <JavascriptChannel>{
_toasterJavascriptChannel(context)
},
//路由委托(可以通过在此处拦截url实现JS调用Flutter部分)
navigationDelegate: (NavigationRequest request) {
print('allowing navigation to $request');
return NavigationDecision.navigate;
},
//手势监听
gestureNavigationEnabled: true,
initialUrl:
"https://www.callmysoft.com/",
//加载进度
onProgress: (int progress) {
print("WebView is loading (progress : $progress%)");
});
}
flutter 与 js 进行交互
flutter
// 监听webview返回值
dubPay(JavascriptMessage resp) {
this.dubPayRes = DubPayModel.fromJson(jsonDecode(resp.message));
print(jsonDecode(resp.message));
setState(() {
priceNum = num.parse(this.dubPayRes.price);
});
}
JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
return JavascriptChannel(name: 'pay', onMessageReceived: dubPay);
}
web
$(".dubPay_list li").click(function(){
$(this).addClass("list_active").siblings("li").removeClass("list_active");
var dubPid = $(this).attr("data-Pid");
var dubPrice = $(this).find("p a").text();
var val = {
p_id:dubPid,
price:dubPrice
}
pay.postMessage(JSON.stringify(val))
})
这样就实现了flutter与网页的数据传输了