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