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