基於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