[flutter] 仿深圳地铁app增加微信分享

阅读该文章需要8分钟。

在上一篇文章仿深圳地铁app项目，简单的使用了一些常用的组件，组件直接的组合，整的一些界面，这里只是在原来的基础上，单纯的增加微信分享功能。

入口在：公告--》随便一个 item--》右上角分享文字
先来看看简短的动态图（里面放gif不会动，尴尬）：https://github.com/niyige/oyy_subway_flutter，点开往下拉，就能看到：看完算我输。。贼卡的动态图。。

image.png

唠嗑下flutter下的微信分享实现（猴急的大兄弟，大妹子可以直接下载项目）。

由于微信分享是第三方提供，android，ios需要分别去处理，
先到pubspec.yaml引入需要用到的package：

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_webview_plugin: "^0.1.6"
  flutter_wechat: "^0.1.5"    //这个

先来看看android端的操作：
做过android端的大朋友，小朋友，男朋友，女朋友都应该知道：接入微信sdk，需要按照它的规则去处理：

清单文件AndroidManifast.xml加入必要的权限：

在mainActivity同级目录下创建wxapi文件夹，在该文件夹下面创建WXEntryActivity.java文件，这个java文件主要是处理分享结果回调（当然功能不只是只有结果回调，还有其他功能，这里不考虑）,下面是实现：

private IWXAPI api;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        api = WXAPIFactory.createWXAPI(this, "wxb25d3dec3db1affc", false);
        onNewIntent(getIntent());
        finish();
    }

        @Override
    public void onReq(BaseReq baseReq) {

    }

    @Override
    public void onResp(BaseResp baseResp) {
        sendBroadcastToWechat(baseResp);
    }

    private void sendBroadcastToWechat(BaseResp baseResp) {
        Intent intent = new Intent();
        intent.setAction("sendResp");
        if (baseResp instanceof SendAuth.Resp) {
            SendAuth.Resp resp = (SendAuth.Resp) (baseResp);
            intent.putExtra("code", resp.errCode == 0 ? resp.code : "-1");
            intent.putExtra("type", "SendAuthResp");
            sendBroadcast(intent);
        } else {
            intent.setAction("sendResp");
            intent.putExtra("code", baseResp.errCode + "");
            intent.putExtra("type", "ShareResp");
            sendBroadcast(intent);
        }
    }
    protected void onNewIntent(Intent intent) {
        api.handleIntent(intent, this);
    }

到这里就完事了？不存在的，APPID记得替换成自己申请的。android特有需要处理的部分就完事了。

剩下的就需要在首页处理了，回到home.dart,需要注册微信相关，否则会爆空指针：
使用到的地方记得import：
import 'package:flutter_wechat/flutter_wechat.dart';

home.dart的initState()方法内：

 // 微信注册，最好是app首页
    FlutterWechat.registerWechat("wx7e2d791ff79cdbd9");

然后在需要触发分享操作的地方添加如下：

child: new FlatButton(
              onPressed: () {
                  //文字分享 type 0 聊天页面 1 朋友圈
                   FlutterWechat.shareText(text: "test", type: 0,); 
                          },
              child: new Text("分享")))

上面是就是简单的文字分享。 FlatButton ，官方解释是普通的按钮，适合很多常用的场景，如果需要好看，按照自己的规则，就需要自定义一个button，其实也不难，后期在封装个组件库，稳如哈士奇。

下面是flutter_wechat包推荐的写法：

注册
await FlutterWechat.registerWechat("wxxxxxx");// 微信注册需要在你需要的地方注册，最好是app首页
分享
await FlutterWechat.shareText(text: "test", type:0,);//文字分享 type 0 聊天页面 1 朋友圈
await FlutterWechat.shareImage(imgUrl: "xxx", type:0,);
await FlutterWechat.shareMusic(imgUrl: "xxx", musicUrl:"",title:"",description:"",musicDataUrl:"",musicLowBandDataUrl:"",musicLowBandUrl:"",type:0,);
await FlutterWechat.shareVideo(imgUrl: "xxx", videoUrl:"",title:"",description:"",videoLowBandUrl:"",type:0,);
await FlutterWechat.shareWebPage(imgUrl: "xxx", webpageUrl:"",title:"",description:"",type:0,);

要使用await，就需要引入另外一个关键字asyn，需要这样做：

child: new FlatButton(
           onPressed: () async{
              await FlutterWechat.shareText(text: "test",type: 0,); 
                          },
           child: new Text("分享")))

ios端的处理，没有过深接触过ios，只会hello world。很多细节都不懂，主要是ios接入微信分享的一些细节步骤。

image.png

然后，我发现这个flutter_wechat，其实内部就是调用原生代码的封装，这个之后在区看看flutter调用原生的实现。

项目地址：https://github.com/niyige/oyy_subway_flutter

参考资料：https://pub.dartlang.org/packages/flutter_wechat#-readme-tab-

[flutter] 仿深圳地铁app增加微信分享

你可能感兴趣的:([flutter] 仿深圳地铁app增加微信分享)