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