项目简介
目前一期只是为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 () {
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上看看大多数都是高质量的插件，其实很多轮子都有人造好了，选取好的直接拿来用岂不妙哉？
