基于Cordova的博客园三方App

　　一月前换了份工作，正式从.Net开发工程师转型到前端开发工程师, 目前公司主要是用Vue做web站点和Cordova+Vue做移动端App。趁着最近时间比较多。就想着用Cordova+Vue做一个博客园三方App。

【其实很早之前用Ionic做过一次，不过当时由于对NG2不太熟悉。代码写得很糟糕, 那个时候就说要重构，可以一直没时间】

一. 技术选型

UI库使用的是有赞团队的Vant，https://github.com/youzan/vant 功能还是比较齐全常用的组件都有,其实这个库的定位是电商类网站
使用的vue-cli@3.0，快熟方便的构建vue项目。
图片来源阿里巴巴的iconfont. http://www.iconfont.cn/ 这个网站不错, 建议大家团队开发中用这个网站来做图标库管理,自己UI团队设计的图标库也可以转成svg上传上去统一做管理。

二. 数据来源:

博客查询Api: http://wcf.open.cnblogs.com/news/help
新闻查询Api: http://wcf.open.cnblogs.com/blog/help
登录有使用的Api: www.cnblog.com 直接通过fiddler抓取的博客园的api

三. 开发中遇到的问题

　　　 1. 跨域问题:

在开发模式的web站点运行的时候,接口会出现跨域问题，可以通过使用devserver的proxy代理来解决:

module.exports = {baseUrl: './',productionSourceMap: false,devServer: {port: 7878,proxy: {'/blog': {target: 'http://wcf.open.cnblogs.com',changeOrigin: true,secure: false},'/news': {target: 'http://wcf.open.cnblogs.com/',changeOrigin: true,secure: false},'/mvc': {target: 'https://www.cnblogs.com/mvc',changeOrigin: true,secure: false},'/Comment/InsertComment': {target: ' https://news.cnblogs.com',changeOrigin: true,secure: false},'/News/VoteNews': {target: ' https://news.cnblogs.com',changeOrigin: true,secure: false}}},lintOnSave: true
}

　　　 2. 图片无权限访问:

　　博客园的图片添加了权限控制,开发模式为了查看, 我就将图片做了中转代理。所以写了一个filter来处理头像图片。

const imgConvert = (str) => {// 开发模式图片要做中转,不然没有权限访问if (ENV === 'development') {str = str.replace('http://', '')return `https://images.weserv.nl/?url=${str}`} else {return str}
}

3. Cookie的写入

　　 document.cookie 在开发模式的web端可以使用,但是在cordova的app端document.cookie失效。解决方案是引入三方插件. window.cookieMaster就是cordova提供的操作原生cookie方法.

<plugin name="com.cordova.plugins.cookiemaster"  spec="https://github.com/chaoszero6/com.cordova.plugins.cookiemaster.git" />

export function setAuthCookie (cnblogsCookie) {// 存储到缓存setItem('cnblog.cookie', cnblogsCookie)// Cookie中添加if (window.cookieMaster) {window.cookieMaster.setCookieValue('www.cnblogs.com','.CNBlogsCookie',cnblogsCookie)} else {setCookie('.CNBlogsCookie', cnblogsCookie)}
}

四: 效果展示

五. 说明:

1. 登录的时候不是通过账号密码登录的,是直接在PC端登录,然后打开Chrome的开发模式,将cookie中的.CNBlogsCookie复制出来。

2. 登录后只用于博客的评论和推荐，新闻的评论和推荐没有做，是因为新闻的评论和推荐，需要将所有的cookie和sessionCookie都设置上, 不像博客那样只用设置.CNBlogsCookie就OK了。我觉得设置太多cookie麻烦，而且新闻的评论量不大。所以就没有在登录界面提供其他cookie的输入。

五: 代码地址:【安装包只有1.8mb,目前cordova打包的时候没有引用crosswork和腾讯x5引擎来提升app性能.】

github地址(觉得不错的可以给个star,有反馈和意见的可以在github提issue): https://github.com/FourLeafClover/CNBlogApp

下载地址(目前只提供了android的下载地址,后面我会找mac去打包ios的ipa包放上去): https://fir.im/cnblog

测试:

https://github.com/anjoy8/Blog.Vue

转载于:https://www.cnblogs.com/FourLeafCloverZc/p/9380895.html

基于Cordova的博客园三方App相关推荐

基于Cordova的博客园APP
背景: 自从今年下半年接触一个基于ReactJS 的手机APP项目.开始了解到了Corodva这个神奇的东西.后续自己也自作了一些小的APP放到了应用宝上.8月份开始想做一个博客园APP ...
互评Alpha版本—博客园安卓APP
互评Alpha版本-博客园安卓APP 测评人:徐劭斌基于NABCD评论作品 1.根据NABCD评论作品的选题: N(Need,需求):博客园的网页版深受软件开发人员的喜爱.博客园是一个非常好的学 ...
webbrowser中localhost和发布的地址_发布一款android版博客园官方app
1.前言博客园创立于2004年1月,是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益 ...
互评Beta版本--博客园安卓APP
测评人:徐劭斌博客园安卓APP软件说明书地址:http://www.cnblogs.com/wwd1993/p/7880856.html 博客园安卓APP软件下载git地址:https://git. ...
互评Beta版本—博客园安卓APP
互评Beta版本-博客园安卓APP 测评人:刘淑霞一.基于NABCD评论作品 1.根据NABCD评论作品的选题: N(Need,需求):电脑网页版的博客园越来越受使用者的喜爱,但是每次都得打开电 ...
重构博客园Android App
前言第一个全功能的非官方android客户端已经过去一年了...貌似已经不再更新的样子,最近发现,在android 4.1上运行的时候,列表不能滚动了..而且,原界面设计,也并不适合放在androi ...
iOS_CNBlog项目开发 (基于博客园api开发) 上篇
按照惯例, 先上效果图前言做这个项目是因为刚好在逛博客园的时候看到一篇文章博客园第三方客户端-i博客园正式发布App Store, 这里就帮忙贴下链接吧. 整个项目做下来大概做了半个月, 今天算 ...
博客园三款APP的分析
分析对象(仅为安卓端):1.cnblogs-博客园客户端(开发者:张林),以下称为张端:2.博客园(开发者:杭州语程信息技术有限公司),以下称为语端:3.博客园(开发者:陈睿),以下称为陈端. 一.分 ...
【原】博客园第三方客户端-i博客园App开源
[原]博客园第三方客户端-i博客园App开源本文转载请注明出处 -- polobymulberry-博客园 1.前言目前i博客园App已经更新到2.0.0版本了,使用了最新的博客园Web API. ...

基于Cordova的博客园三方App

基于Cordova的博客园三方App相关推荐

最新文章

热门文章