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的下载地址～～～～

巴特西

flutter入门开发的一些坑