跟原生h5区别是关键问题是如何将vue的方法暴露出来,跟安卓调用一样

mounted() {
    //将要给原生调用的方法挂载到 window 上面
    window.callJsFunction = this.callJsFunction
},
data() {
    return {
        msg: "哈哈"
    }
},
methods: {
    callJsFunction(str) {
        this.msg = "我通过原生方法改变了文字" + str
        return "js调用成功"
    }
}

vue 调用 flutter ,这个跟原生h5调用flutter 一样 ,用webview_flutter

JavascriptChannel(
  name: "share",
  onMessageReceived: (JavascriptMessage message)    {
        print("参数为: ${message.message}");
  }
)
WebView(
            initialUrl: "https://flutterchina.club/",
            //JS执行模式 是否允许JS执行
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (controller) {
              _controller = controller;
            },
            onPageFinished: (url) {
               _controller.evaluateJavascript("document.title").then((result){
                  setState(() {
                    _title = result;
                  });
                }
              );
            },
            navigationDelegate: (NavigationRequest request) {
              if(request.url.startsWith("myapp://")) {
                print("即将打开 ${request.url}");
                
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            } ,
            javascriptChannels: <JavascriptChannel>[
              JavascriptChannel(
                name: "share",
                onMessageReceived: (JavascriptMessage message) {
                  print("参数: ${message.message}");
                }
              ),
            ].toSet(),

          ),
        ),
    );

js里面直接share.postMassage()

此文章部分转载https://blog.csdn.net/solocoder/article/details/81948286

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐