flutter入门开发的一些坑

flutter入门开发的一些坑

很久没写博客了，最近在准备物联网比赛，顺便抽出时间学习了一下flutter，花了近2周完成了一个查看博客博文的一个小的APPdemo，随便截了两张图，如下：

首页	博客园的页面，必须登录才有这些东西

总的来说项目还是比较简单的，（项目地址）没有什么复杂的逻辑和界面（毕竟是刚学，也没有能力去弄复杂的逻辑和界面），目前来说就这样吧。接下来我将记录一下开发中遇到的一些困难以及解决方法。

flutter博客园

认证解决方法

这里是博客园的api网址（https://api.cnblogs.com/），这里说一下博客园文档比较坑的地方，博客园的登录是基于OAuth 2.0认证的，不了解这个认证的同学查一下就知道了，简单点来说就是用户登录博客园后返回一个code给你，然后你通过这个code拿到token，通过token你就可以拿到用户的信息。

在博客园中，token有两种获取方式，第一种你就别想了，是不可能获取数据的，2.1和2.2才是正确获取数据的方式，emm，那么为什么1出现在博客园的官方文档中呢？

 

OK，那么我们讨论下第二种的获取方式，第二种获取方式是当用户输入账号密码后，点击登录，博客园会跳转到一个界面，这个界面里面显示着code。那么我们在flutter中间应该怎么做呢？

思路是这样的，首先我们打开博客园的登录界面，然后监听当前网址是否发生变化，如果发生了变化，那么代表着已经进行跳转了，然后我们在跳转的页面通过执行js代码拿到code就行。

 

通过执行code_value js代码就可以拿到code

 

在页面初始化init中，我们可以监听页面是否跳转。

// 监听页面跳转
flutterWebViewPlugin.onUrlChanged.listen((url) {
    // 该页面会接收code，然后根据code换取AccessToken，并将获取到的token及其他信息，通过js的get()方法返回
    if (url != null && url.length > 0 && url.contains("code=")) {
        // 在parseReslut中，我们获得code，然后再去获取token
        parseResult();
    }
});

然后我们就可以通过执行js代码获得code了

  /// 通过code获得token
  parseResult() {
      // 执行code_value js代码获得code
    flutterWebViewPlugin.evalJavascript("code_value").then((code) {
      if (code != null && code.length != 0) {
          // 下面是获取token，不需要管
        _cnblogNetService.getToken(code, storageToken);
      }
    });
  }

获得登录用户的信息

这里就顺便提一下博客园获取用户的基本信息的api吧，可以吐槽一下，博客园的api官方文档是我见过第二坑的api文档，第一是百度统计的api文档。（不过博客园的官方还是蛮给力的，凌晨在博问上面提问都马上给了回答）

在这里，不能缺少bearer。

 

博客园获取首页数据

在博客园的API中，它是这样写的，但是实际上，这样你是无法获得首页的数据的。因为你缺少了header，header的数据和上面的一样（别忘记了Bearer），同时pageIndex不是从0开始的，而是从1开始的。

 

flutter 加载内置HTML

在项目中，需要制作一个AboutMe的页面，但是不想写一个新的一个页面，就直接将Markdown转成html，然后加载就行了。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

/// aboutme的页面
class AboutMePage extends StatefulWidget {
  @override
  AboutMePageState createState() {
    return AboutMePageState();
  }
}

class AboutMePageState extends State<AboutMePage> {
  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('关于')),
      body: WebView(
        initialUrl: '',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
            // 加载本地html
          _loadHtmlFromAssets();
        },
      ),
    );
  }

  // 从本地加载html文件，需要使用异步操作
  _loadHtmlFromAssets() async {
    String fileText = await rootBundle.loadString('image/README.html');
    _controller.loadUrl(Uri.dataFromString(fileText,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }
}

当然，我们需要设置assets：

 

目前来说，只遇到了这些问题，因为这个app还仅仅是一个简单的demo，还没有复杂的页面，所以基本上没有什么控件的问题。

这个项目还是很多bug的，但是我能怎么办，我也很无奈啊。

这个是app的下载地址～～～～