項目簡介
目前一期只是為App內某個模塊資訊模塊文章的分享和APP下載，后續還會有更多的功能,為了項目可擴展、可伸縮結合了我以前的實踐搭建了此項目項目地址,如果這個簡單的項目能給您帶來幫助請給小哥哥⭐Star好不好（手動筆芯）。
功能
- 根據分享出來的文章ID獲取數據
- 在網頁內可以打開或者下載該APP
- 微信平台的特殊處理
- 微信平台的屏蔽了scheme,文章頁面的打開APP的功能需要出浮窗提示去瀏覽器中打開
- 下載APP頁面在微信中，IOS可以喚起APP Store,安卓則需要提示浮窗
使用技術須知
Vue,VueRouter,Vuex三件套不在多說
Axios
主要用來發起Http請求，想要詳細了解具體使用方式和操作指南可以請參考筆者下面的幾篇文章
Axios全攻略
Vuex2和Axios的開發
注意：因為Axios使用了Promise,適配低版本瀏覽器 一定要配合使用es6-promise
Vuex-router-sync
Vuex-router-sync資料
功能：將Router中的 這些數據注入到Store中，方便我們調用。
在此項目中 我用此插件獲取URL上的文章ID
Vue-meta
Vue-meta資料
功能：改變網頁Head上的一些標簽值。
在此項目中，我用此插件改變文章頁面上的Title，在瀏覽器中標題不那么木訥。
Mobi.css
Mobi.css資料
功能：小而精美的手機端CSS布局庫
在此項目中，不想用太大的UI框架也不想自己寫太多的樣式，選擇了它。
Vue-infinite-loading
Vue-infinite-loading資料
功能：緩解加載數據時頁面空白的尷尬，可自定義loading動畫。
關鍵實現
URL上獲取文章ID
和APP的同學商量了我們就用http://xxxx/article/:id的方式去定義分享出去文章地址，頁面通過獲得URL上的
ID去請求相對應的數據。我是使用Vuex-router-sync直接從Store中獲得ID的rootState.route.params.id
// 文件src/modules/action /** 獲取文章信息 */ export const getArticle = ({ rootState, commit }) => { return new Promise((resolve, reject) => { axios({ method: 'get', url: 'share/news_details', params: { news_id: rootState.route.params.id } }) .then((response) => { commit(types.ARTICLE, response.data.data) resolve(response) }) .catch((error) => { reject(error) }) }) }Store中獲取環境區別
在每個頁面進行操作時，我們需要鑒別當前系統是IOS或者安卓，每次通過正則去鑒別UA里的字符串太麻煩，所以我將此放到Store中，方便所有的組件使用
// 文件src/modules/store const state = { system: (/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) ? 'IOS' : 'Android'), article: {}, isWeixin: (/MicroMessenger/ig).test(navigator.userAgent) }合理的處置異常
我們去加載數據時可能會遇到失敗的情況，這里需要對頁面有一個良好的處理，這里我主要使用Vue-infinite-loading去實現頁面上的效果。
_onInfinite () {
this.getArticle().then(() => { // 完成之后loading消失 this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded') this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete') }) .catch(() => { // 異常之后頁面的展示 執行下方slot="no-results"部分 this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete') }) }<infinite-loading :on-infinite="_onInfinite" ref="infiniteLoading" spinner="bubbles"> <span slot="no-results">好像來到了奇怪的地方~</span> <span slot="no-more"></span> </infinite-loading>keep-alive組件復用
這是一個很能提高頁面性能的標簽，會將已使用過的不活動的組件緩存起來而不是銷毀。在性能不太好的手機上，模版的渲染也是需要一定時間的，我們可以用這個標簽將緩存曾經使用過的組件（頁面），在此組件激活時刷新里面的數據即可。激活時使用activated這個生命周期
activated
activated () {
this.clearArticle() //激活時先清除Store中的數據 因為$InfiniteLoading是根據頁面高度來發起請求的 this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset') }組件代碼的規范
始終基於模塊的方式來構建你的 app，每一個子模塊只做一件事情。
Vue.js 的設計初衷就是幫助開發者更好的開發界面模塊。一個模塊是應用程序中獨立的一個部分。
我們需要將我們*.vue文件按照一定的結構組織，使得組件便於理解，主要有以下幾點比較重要：
- 導出一個清晰、組織有序的組件，使得代碼易於閱讀和理解。同時也便於標准化。
- 按首字母排序屬性，data, computed, watches 和 methods 使得屬性便於查找。
- 合理組織，使得組件易於閱讀。(name; extends; props, data and computed; components; watch and methods; lifecycle methods, 等.);
- 使用 name 屬性。借助於vue devtools可以讓你更方便的測試
- 合理的 CSS 結構，如 BEM 或 rscss - 詳情?;
- 使用單文件 .vue 文件格式來組件代碼
同時配合ESLint將代碼寫的更加規范和閱讀，我這邊使用Standard的風格，在VScode中也開啟了Standard的驗證。
ESLint官網
JavaScript 代碼規范-Standard風格
組件規范也可以參考筆者這篇：Vue.js 組件編碼規范
最后
看起來此項目簡單，實則上用了不少插件去實現需要較強的動手（第三方坑也多，選擇一個好的插件得先去github上看看，作者的代碼質量），需要保持一定的彈性方便日后的擴展也要避免過度的設計。大家若想要加速自己的開發速度，可以多逛逛Vue awesome上看看大多數都是高質量的插件，其實很多輪子都有人造好了，選取好的直接拿來用豈不妙哉？