Authored by TaoHuang

add open app

... ... @@ -79,10 +79,9 @@ export default {
if (!this.$yoho.isApp) {
Share.init();
this.$openApp();
}
this.reportEnter();
},
methods: {
... ...
const getAppPath = () => {
let appPath = document.getElementById('main-wrap').dataset.apppath || 'yohobuy://yohobuy.com/goapp?openby:yohobuy={"action":"go.home","params":{"gender":"1","channel":"2"}}';
return appPath;
};
const u = navigator.userAgent;
const isFromYOHO = /m\.yohobuy\.com/i.test(document.referrer);
const isApp = /yoho/i.test(u) ||
!!window.yohoInterface ||
/app_version=/i.test(location.search) ||
/openrefer=/i.test(location.search);
const isiOS = /(iPhone|iPad|iPod|iOS)/i.test(u); // ios终端
const isAndroid = /Android/i.test(u); // android终端
const isWechatDevtool = /wechatdevtools/i.test(u); // 微信开发者工具
const nodownload = document.getElementById('no-download'); // 页面不需要下载
const getIOSVersion = () => {
const verion = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
return verion ? parseInt(verion[1], 10) : 0;
};
const ua = navigator.userAgent;
const isOriginalChrome = /chrome\/[\d.]+ Mobile Safari\/[\d.]+/i.test(ua) &&
isAndroid &&
ua.indexOf('Version') < 0;
const getFallUrl = (schemeUrl) => {
const appPath = (schemeUrl || '').replace('yohobuy://yohobuy.com/goapp?', '') || 'openby:yohobuy={"action":"go.home","params":{"gender":"1","channel":"2"}}';
return `https://union.yoho.cn/union/app-downloads.html?${appPath}`;
};
const checkOpenFall = (url, callFunc, noFall) => {
let time = Date.now();
callFunc();
const fallUrl = getFallUrl(url);
if (noFall) {
return;
}
window.setTimeout(function() {
if (Date.now() - time < 1200) {
window.location.href = fallUrl;
}
}, 1000);
};
const callIframe = (url, noFall) => {
checkOpenFall(url, () => {
const ifr = document.createElement('iframe');
ifr.src = url;
ifr.style.display = 'none';
document.body.appendChild(ifr);
}, noFall);
};
const callUrl = (url, noFall) => {
checkOpenFall(url, () => {
window.location.href = url;
}, noFall);
};
const callA = (url, noFall) => {
checkOpenFall(url, () => {
const ca = document.createElement('a');
ca.setAttribute('href', url);
ca.style.display = 'none';
document.body.appendChild(ca);
ca.click();
}, noFall);
};
const toAppPage = (appUrl, noFall) => {
if (isOriginalChrome) {
callA(appUrl, noFall);
} else if (isiOS) {
if (getIOSVersion() < 9) {
callIframe(appUrl, noFall);
} else {
callUrl(appUrl, noFall);
}
} else {
callIframe(appUrl, noFall);
}
};
const canOpenApp = () => {
if (isWechatDevtool || isApp || isFromYOHO || nodownload) {
return false;
}
return isAndroid || isiOS;
};
export default () => {
return new Promise((resolve) => {
if (canOpenApp()) {
setTimeout(function() {
let appPath = getAppPath();
toAppPage(appPath, true);
resolve();
}, 2000);
} else {
resolve();
}
});
};
... ...
... ... @@ -12,6 +12,8 @@ import {get, find} from 'lodash';
import yoho from 'common/yoho';
import sdk from 'common/sdk';
import links from 'utils/links';
import openApp from 'common/open-app';
import {initClient, getYohoState} from 'utils/init-client';
import 'statics/scss/common.scss';
import 'statics/scss/grass-prompt.scss';
... ... @@ -45,6 +47,8 @@ Vue.prop('auth', function() {
return true;
});
Vue.prop('openApp', openApp);
Vue.prop('bus', bus());
Vue.use(Prompt);
Vue.use(Toast);
... ...
<template>
<Layout class="article-detail">
<ArticleDetailHeader ref="header" class="article-detail-header" :data="articleInfo" :step="headerAnimateStep" :title-step="headerTitleAnimateStep">
<ArticleDetailHeader ref="header" class="article-detail-header" v-if="!share" :data="articleInfo" :step="headerAnimateStep" :title-step="headerTitleAnimateStep">
<div v-if="articleInfo.articleId && !articleInfo.empty" class="title-main">
<div class="title-info" :style="`transform: translate3d(0, ${viewMoreArticles ? '-50%' : '0'}, 0)`">
<ArticleItemHeader class="title-info-author" :share="share" :data="authorData" :more="false" @on-follow="onFollowAuthor"></ArticleItemHeader>
... ... @@ -105,9 +105,6 @@ const {mapState, mapActions, mapMutations} = createNamespacedHelpers('article');
export default {
name: 'ArticleDetailPage',
props: {
share: Boolean
},
data() {
return {
id: 0,
... ... @@ -117,7 +114,8 @@ export default {
colWidthForTwo: 370,
posId: YAS.scene.newsDetail,
previewPage: false,
articleProducts: []
articleProducts: [],
share: false
};
},
created() {
... ... @@ -157,6 +155,7 @@ export default {
mounted() {
this.colWidthForTwo = Math.floor(this.$el.offsetWidth / 2);
this.loadPreData(+this.$route.params.id);
this.share = !this.$yoho.isApp;
},
computed: {
...mapYohoState(['yoho']),
... ...
... ... @@ -12,7 +12,9 @@
export default {
methods: {
toDownloadPage() {
this.$links.toDownloadApp();
this.$openApp().then(() => {
this.$links.toDownloadApp();
});
}
}
};
... ...
... ... @@ -15,7 +15,7 @@ export default {
this.getDownloadElem((elem) => {
const newElem = this.handleElem(elem.cloneNode(true));
elem.parentNode.removeChild(elem);
// elem.parentNode.removeChild(elem);
this.$el.appendChild(newElem);
});
},
... ... @@ -42,13 +42,29 @@ export default {
elem.removeChild(miniElem);
}
elem.addEventListener('click', function(e) {
elem.addEventListener('click', async function(e) {
let target = e.target;
// 点击关闭
if (target.className.toLowerCase() === 'download-close') {
vm.$emit('close');
vm.visible = false;
switch (target.className.toLowerCase()) {
case 'download-close': {
// 点击关闭
vm.$emit('close');
vm.visible = false;
break;
}
case 'download-go': {
// 尝试打开app
vm.$openApp().then(() => {
vm.$links.toDownloadApp();
});
e.stopPropagation();
e.preventDefault();
break;
}
default: {
// pass
}
}
});
... ...
<template>
<div>
<Layout ref="layout" class="article">
<TopicHeader ref="header" :title="topicTitle" :step="headerAnimateStep" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic">
<TopicHeader ref="header" :title="topicTitle" v-if="!share" :step="headerAnimateStep" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic">
<template v-if="tabBlockSuctionTop" v-slot:suctionTop>
<TopicTabBlock :active-type="activeTopicListType" @on-change-tab="onChangeTab"></TopicTabBlock>
<TopicTabBlock :active-type="activeTopicListType" @on-change-tab="onChangeTab"></TopicTabBlock>
</template>
</TopicHeader>
... ... @@ -111,13 +111,7 @@ export default {
}
},
mounted() {
if (this.$route.name === 'topic.share') {
this.share = true;
if (!this.$yoho.isApp) {
Share.init();
}
}
this.share = !this.$yoho.isApp;
this.scrollEvent = throttle(this.onDounceScroll.bind(this), throttleTime);
this.colWidthForTwo = Math.floor(this.$el.offsetWidth / 2);
... ... @@ -200,7 +194,7 @@ export default {
return;
}
this._headerHeight = this._headerHeight || this.$refs.header.$el.offsetHeight;
this._headerHeight = this._headerHeight || (this.$refs.header && this.$refs.header.$el.offsetHeight);
this._topicHeaderHeight = this._topicHeaderHeight || this.$refs.topicBanner.$el.offsetHeight;
let step = Math.round((scrollTop - 4) / (this._topicHeaderHeight - this._headerHeight - 10) * 100);
... ...
... ... @@ -37,7 +37,7 @@ const getDetailShareData = (article) => {
return {
title: `@${article.authorName} 在有货社区上发了一篇内容,快点开看看!`,
imgUrl: handleProtocol(get(shareImage.split('?'), '[0]') || DEFAULT_SHARE_IMAGE),
link: handleProtocol(`${window ? window.location.origin : ''}/grass/article/${article.articleId}`),
link: handleProtocol(`${window ? window.location.origin : ''}/grass/article/${article.articleId}?share=true`),
desc,
hideType: ['7', '8', '9']
};
... ... @@ -47,7 +47,7 @@ const getTopicShareData = (topic) => {
return {
title: topic.topicName,
imgUrl: handleProtocol(topic.topicImageUrl),
link: handleProtocol(`${location.origin}/grass/topic/${topic.topicId}`),
link: handleProtocol(`${location.origin}/grass/topic/${topic.topicId}?share=true`),
desc: '我在有货的社区发现一个热门话题。' + topic.topicDesc,
hideType: ['7', '8', '9']
};
... ... @@ -57,7 +57,7 @@ const getAuthorShareData = (author) => {
return {
title: `@${author.nickName} YO!社区,一起来玩潮流!`,
imgUrl: handleProtocol(get(author, 'headIco', '').split('?')[0] || DEFAULT_SHARE_IMAGE),
link: handleProtocol(`${location.origin}/grass/author/${author.authorType}/${author.authorUid}`),
link: handleProtocol(`${location.origin}/grass/author/${author.authorType}/${author.authorUid}?share=true`),
desc: author.signature || '',
hideType: ['7', '8', '9']
};
... ...
... ... @@ -77,6 +77,15 @@ const getContext = (req) => {
};
};
function getAppPath(req) {
let appPathUrl = req.originalUrl.split('?')[0] || '';
let appPath = 'yohobuy://yohobuy.com/goapp?openby:yohobuy={"action":"go.h5",' +
'"params":{"url":"http://m.yohobuy.com' + appPathUrl +
'","param":' + JSON.stringify(req.query) + '}}';
return appPath;
}
const handlerError = (err = {}, req, res, next) => {
if (err.code === 404) {
return res.redirect('/grass/error/404');
... ... @@ -181,8 +190,9 @@ const render = (route) => {
resources,
states,
zk,
download: req.query.download ? true : false,
routeHash: routeEncode.getRouter(req)
download: req.query.share ? true : false,
routeHash: routeEncode.getRouter(req),
appPath: getAppPath(req)
});
if (config.useCache && route.cache && ck) {
... ... @@ -253,7 +263,8 @@ const devRender = (route) => {
resources,
states,
routeHash: routeEncode.getRouter(req),
download: req.query.download ? true : false,
download: req.query.share ? true : false,
appPath: getAppPath(req)
});
if (config.useCache && route.cache && ck) {
... ...
... ... @@ -30,7 +30,7 @@
{{{html}}}
<div id="degrade-app"></div>
<div id="main-wrap">
<div id="main-wrap" data-apppath="{{{appPath}}}">
{{#unless download}}
<div id="no-download"></div>
{{/unless}}
... ...