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