# CnBlogsClientMini

**Repository Path**: xu-wanghu/cnblogsclientmini

## Basic Information

- **Project Name**: CnBlogsClientMini
- **Description**: 使用Xamarin实现的博客园安卓客户端，详见md文件介绍。md文件同级目录下放上imgs文件夹，可以在文件内浏览图片。
- **Primary Language**: C#
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-02-10
- **Last Updated**: 2025-02-14

## Categories & Tags

**Categories**: mobile-app

**Tags**: None

## README

### Xamarin Android 开源博客园客户端

*By 在下徐大安  948036947@qq.com*

​		本文主要介绍了一个我在入门Xamarin时做的一个开源小项目，链接地址：https://gitee.com/xu-wanghu/cnblogsclientmini。该项目基于另一个开源Xamarin项目，链接地址：https://github.com/JoesWeek/XamCnblogs。在JoesWeek/XamCnblogs项目的基础上，我精简了很多功能，并把我的这个小项目称为博客园Mini，功能包括了自己比较感兴趣的新闻浏览与知识库文章浏览。 本文目标受众是Xamarin小白或其他对手机端的跨平台应用开发技术有兴趣的人员。

​		在21年初时，我接触了微软的Xamarin（读作['zæmərɪn]），一时被它的Xaml界面设计与支持.NET吸引。由于之前接触过WPF，所以入门Xamarin的学习曲线十分平滑，大赞微软。WPF与Xamarin十分相似，很多特性都通用，比如.NET，Xaml，C#，Mvvm等等，当然Xamarin也有一些独有的特性，比如其支持Android、IOS，所以特定平台也给它带来了区别于windows下的WPF的特性，比如手机端的导航、Shell、Effect与Render，以及一个简单的IOC容器DependencyService等等。

​		另外，如果你想要在windows平台下从事Xamarin开发，并且准备使用虚拟设备，那么一定要使用Intel处理器的机器，原因如下图：

<img src="imgs\intel.bmp" alt="intel" style="zoom: 67%;" />

##### 实现效果介绍

​	先介绍完成效果，使用的是物理测试机，型号是Honor 8。桌面图标如下图：

<img src="imgs\desktop.jpg" alt="desktop" style="zoom:50%;" />

​	点击图标，会展示一个欢迎页，然后进入主界面。主界面是一个拥有两页子页的母Tab页，Tab栏位于界面底部，两个Tab子页的主题分别是新闻与知识库。新闻子页中使用了另一个Tab栏位于顶部的Tab母页，该母页拥有三个Tab子页，分别展示最新新闻、推荐新闻与本周热门新闻。知识库子页中，展示了被收录在知识库中的文章。

<img src="imgs\latestNews.jpg" alt="latestNews" style="zoom: 25%;" />

<img src="imgs\kbarticles.jpg" alt="kbarticles" style="zoom:25%;" />

​		新闻子页与知识库子页都实现了顶部下拉刷新与分页显示，每一页是20条内容，当下拉到列表最下方时，自动获取下一页并填充。点击新闻列表中的一项可以进入这一项的详情浏览界面。

<img src="imgs\newsDetail.jpg" alt="newsDetail" style="zoom:25%;" />



##### 关键技术点介绍		

​		整体采用Xamarin.Forms，它是一个开放源代码 UI 框架。 通过 Xamarin.Forms，开发人员可从单个共享基本代码生成 Xamarin.Android、Xamarin.iOS 和 Windows 应用程序。当前项目采用VS2019社区版作为IDE，创建项目时选择移动应用项目。

![project](imgs\project.bmp)

​		博客园Mini由三个模块构成, 封装了博客园Api调用的CnBlogsCore, 包含了大多数界面与界面逻辑的CnBlogsClient, 包含安卓端的主程序与一些安卓特性实现的CnBlogsClient.Android. 各模块之间的依赖方向如图.

<img src="imgs\depen.bmp" alt="depen" style="zoom: 67%;" />



​		该项目的所有数据都来自博客园开发者中心(https://api.cnblogs.com/), 该web服务采用OAuth 2.0授权机制. 在调用博客园的api之前,需要申请自己的ClientId与ClientSecret. 博客园将资源分为了大概两类,第一类使用开发者的ClientId与ClientSecret即可访问, 另一类则需要博客园账号授权第三方应用才能访问了. 第一类资源采用OAuth 2.0的 Client Credential授权方式, 第二类资源采用 authorization-code授权方式. 博客园Mini的关注点是Xamarin入门, 所以应用内只设计了第一类资源,即新闻与知识库. 博客园开放的api与 clientid等, 都放在CnBlogsCore的Global.CnBlogsUrl.cs.

​		新闻详情页与知识库详情页采用WebView展示内容, 博客园Server提供的详情Body是个格式化过的网页内容. 网页的模板页作为资源的形式放在CnBlogsClient.Android的Assets内, 当前新闻与知识库的模板页都使用kbarticles.html, 在安卓客户端收到Body后, 直接将Body更新到Vue对象中.