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

 


 

 

posted @ 2019-10-06 17:41  渣渣辉啊  阅读(1838)  评论(0编辑  收藏  举报