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

 

flutter入门开发的一些坑的更多相关文章

  1. Flutter入门教程(二)开发环境搭建

    学习Flutter,首先需要搭建好Flutter的开发环境,下面我将一步步带领大家搭建开发环境并且成功运行flutter项目. Flutter环境配置主要有这几点: 系统配置要求 Java环境 Flu ...

  2. 简述移动端IM开发的那些坑:架构设计、通信协议和客户端

    1.前言 有过移动端开发经历的开发者都深有体会:移动端IM的开发,与传统PC端IM有很大的不同,尤其无线网络的不可靠性.移动端硬件设备资源的有限性等问题,导致一个完整的移动端IM架构设计和实现都充满着 ...

  3. flutter 安装过程遇到的坑

    Flutter是一个移动应用程序的软件开发工具包(SDK),用一个代码库构建高性能.高保真的iOS和Android应用程序.目标是使开发人员能够为Android和iOS提供自然的高质量的应用,在滚动行 ...

  4. Flutter完整开发实战详解

    Flutter完整开发实战详解(一.Dart语言和Flutter基础) Flutter完整开发实战详解(二. 快速开发实战篇) Flutter完整开发实战详解(三. 打包与填坑篇)

  5. Flutter混合开发:Android接入Flutter

    Flutter Google推出已经已经一年多了,单个 Flutter 项目的开发流程已经很成熟了.对与个人开发者来说使用 Flutter 开发一个跨平台的App挺有意思.但是对于现有的项目改造来说还 ...

  6. flutter 入门(Mac)

    背景 近一年时间都在用 React Native 开发公司的 APP,水平基本上可以说是登堂入室了.前一段时间兴起一阵 Flutter 热,后端的同事都有推荐,今年 Google 大会又推出 flut ...

  7. 【Flutter 混合开发】嵌入原生View-Android

    Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-IOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...

  8. 【Flutter 混合开发】嵌入原生View-iOS

    Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-iOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...

  9. 【Flutter 混合开发】与原生通信-MethodChannel

    Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-iOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...

随机推荐

  1. redis中key和value的存储大小限制

    String类型:一个String类型的value最大可以存储512M List类型:list的元素个数最多为2^32-1个,也就是4294967295个. Set类型:元素个数最多为2^32-1个, ...

  2. Eclipse新项目检出后报错第一步:导入lib中的jar包【我】

    新检出项目报错,第一步,先看项目 web-info下的 lib目录里的包是不是都添加到项目构建中了,可以全选先添加到项目构建中,看项目是否还在报错.

  3. IDEA 如何搭建maven 安装、下载、配置(图文)

    1.下载 maven 压缩包 输入网址 www.apache.org 会看到以下界面 住下划看到以下界面 然后看到这个界面 选择下载这个版本 下载后 解压 maven 压缩包 (文件路径不建议用有中文 ...

  4. [ Docker ] 基础概念

    目录- 什么是容器- 虚拟化和容器技术- docker 的基本概念 1. 什么是容器 容器英文:Container,容器是一种基础工具:泛指任何可以用于容纳其他物品的工具,可以部分或者完全封闭,被用于 ...

  5. sonar:默认的扫描规则

    https://blog.csdn.net/liumiaocn/article/details/83550309 https://note.youdao.com/ynoteshare1/index.h ...

  6. .Net Core 1.1 + CentOs 7 环境配置

    centos7下使用yum安装mysql5.7.10 参考:http://www.cnblogs.com/hwd-cnblogs/p/5213337.html http://www.jb51.net/ ...

  7. 面试之leetcode20堆栈-字符串括号匹配,队列实现栈

    1 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合.左括号必须以正确的顺序闭合.注意空字符串可被认 ...

  8. 前端HTML学习心得

    学习最好的效果就是理论加实践--Hanks!!!(给大家打鸡血的哈哈哈) 前面的学习我教大家怎么搭建简单的前端开发环境,现在我教大家怎么使用工具学习(从入门到放弃哈哈,不不不,这是以前的我,现在我下了 ...

  9. Java-Readable

    import java.nio.*; import java.util.*; import static net.mindview.util.Print.*; public class RandomW ...

  10. Docker简易安装及命令实例

    docker ~ ~ ~ Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中, ...