基於Cordova的博客園三方App

　　一月前換了份工作，正式從.Net開發工程師轉型到前端開發工程師, 目前公司主要是用Vue做web站點和Cordova+Vue做移動端App。趁着最近時間比較多。就想着用Cordova+Vue做一個博客園三方App。

【其實很早之前用Ionic做過一次，不過當時由於對NG2不太熟悉。代碼寫得很糟糕, 那個時候就說要重構，可以一直沒時間】

        一. 技術選型

1. UI庫使用的是有贊團隊的Vant，https://github.com/youzan/vant  功能還是比較齊全常用的組件都有,其實這個庫的定位是電商類網站
2.  使用的vue-cli@3.0，快熟方便的構建vue項目。
3. 圖片來源阿里巴巴的iconfont. http://www.iconfont.cn/  這個網站不錯, 建議大家團隊開發中用這個網站來做圖標庫管理,自己UI團隊設計的圖標庫也可以轉成svg上傳上去統一做管理。

       二. 數據來源:

1. 博客查詢Api:  http://wcf.open.cnblogs.com/news/help
2. 新聞查詢Api:  http://wcf.open.cnblogs.com/blog/help
3. 登錄有使用的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