flutter

Flutter与小程序通讯全过程

正向传递:flutter 调用js js调用小程序代码

反向传递:小程序加载webview 通过url传参 和 路由

A.flutter dart调用js通讯
1.dart桥接文件

1
2
3
4
5
6
7
8
9
@JS()
library javascript_bundler;


import 'package:js/js.dart';

// @JS('confirm')
@JS('postMini’)//postMini是js的代码函数
external void showConfirm(String text);

2.dart 去调用桥接文件
showConfirm(“caofuqing66666666666666999999”);

3.index js方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  function postMini() {
    console.log('Installed new service worker.');
    return;
    var obj = {
        'url': '/pages/index/index?shareUserId=213214',
        'shareDesc': '分享的描述',
        'shareImage': 'https://profile.csdnimg.cn/4/6/5/2_qq_35713752',
        'shareTitle': '要分享标题'
    }
    wx.miniProgram.postMessage({
      data: obj
    });
  }
</script>

B.webView js调用微信小程序代码
1.index.html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
  function postMini() {
    console.log('Installed new service worker.');
    return;
    var obj = {
        'url': '/pages/index/index?shareUserId=213214',
        'shareDesc': '分享的描述',
        'shareImage': 'https://profile.csdnimg.cn/4/6/5/2_qq_35713752',
        'shareTitle': '要分享标题'
    }
    wx.miniProgram.postMessage({
      data: obj
    });
  }
</script>

2.小程序代码

1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
    <web-view :src="basewebappURL" @message="bindGetMsg"></web-view>        
</template>

methods: {

bindGetMsg(e){
   console.log("cccccccccccccc");
   console.log(e.mp.detail.data[0]);
   this.shareObj = e.mp.detail.data[0];
   console.log(e.detail.data);
},

C.小程序传递给flutter web 通过加载url
eg:https://webapp.xinling001.cn/#EMSettingsPage?jwt=e&name=aa

js -> 微信小程序传参数 和调用微信小程序特有的API
wx.miniProgram.navigateTo
wx.miniProgram.navigateBack
wx.miniProgram.switchTab
wx.miniProgram.reLaunch
wx.miniProgram.redirectTo
wx.miniProgram.postMessage
wx.miniProgram.getEnv