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

     


     
  • 相关阅读:
    C/C++位域(Bitfields)之我见(不错)
    C/C++位域(Bitfields)之我见(不错)
    C语言面试题之一——程序阅读题
    Matlab数据导入导出
    C语言大小端判断程序
    Qt——路径设置问题
    C语言大小端判断程序
    Qt——路径设置问题
    poj3625
    poj3660
  • 原文地址:https://www.cnblogs.com/xiaohuiduan/p/11627827.html
Copyright © 2020-2023  润新知