Authored by 杨延青

Merge branch 'feature/miniappJump' into 'release/6.8.1'

Feature/miniapp jump



See merge request !1579
@@ -76,7 +76,8 @@ @@ -76,7 +76,8 @@
76 <link rel="apple-touch-startup-image" href="https://cdn.yoho.cn/h5/forios/startup/startup-orange-5.png" media="screen and (max-device-width: 640px)"> 76 <link rel="apple-touch-startup-image" href="https://cdn.yoho.cn/h5/forios/startup/startup-orange-5.png" media="screen and (max-device-width: 640px)">
77 </head> 77 </head>
78 <body class="{{pageStyle}}{{#if isWechat}} wechat-body{{/if}}{{#if width750}} width750{{/if}}{{#if isPassportPage}} passport-body{{/if}}{{#if isStarIndexPage}} star-index-bg{{/if}}{{#if isStarDetailPage}} star-class-body{{/if}}{{#if isInstallmentPage}}{{#unless notOpen}} installment-body{{/unless}}{{/if}}{{#if @root.isMarsApp}} is-mars-app{{/if}}{{#if @root.isNowApp}} is-now-app{{/if}}"> 78 <body class="{{pageStyle}}{{#if isWechat}} wechat-body{{/if}}{{#if width750}} width750{{/if}}{{#if isPassportPage}} passport-body{{/if}}{{#if isStarIndexPage}} star-index-bg{{/if}}{{#if isStarDetailPage}} star-class-body{{/if}}{{#if isInstallmentPage}}{{#unless notOpen}} installment-body{{/unless}}{{/if}}{{#if @root.isMarsApp}} is-mars-app{{/if}}{{#if @root.isNowApp}} is-now-app{{/if}}">
79 - <div class="main-wrap" id="main-wrap" {{#if appPath}}data-apppath='{{{appPath}}}'{{/if}} {{#if miniPath}}data-miniPath='{{{miniPath}}}'{{/if}} {{#if @root.wap.wechat.backDownload}}data-backDownload='{{@root.wap.wechat.backDownload}}'{{/if}}> 79 + <div class="main-wrap" id="main-wrap"{{#if appPath}} data-apppath="{{{appPath}}}"{{/if}}{{#if miniPath}} data-miniPath="{{{miniPath}}}"{{/if}}{{#if @root.wap.wechat.miniAutoJump}} data-miniautojump="1"{{/if}}{{#if @root.wap.wechat.backDownload}} data-backDownload="{{@root.wap.wechat.backDownload}}"{{/if}}>
  80 +
80 {{#if systemUpdate}} 81 {{#if systemUpdate}}
81 {{> updata}} 82 {{> updata}}
82 {{/if}} 83 {{/if}}
@@ -563,6 +563,12 @@ function timedCutProductInit() { @@ -563,6 +563,12 @@ function timedCutProductInit() {
563 }); 563 });
564 } 564 }
565 565
  566 +function miniProgramHandleInit() {
  567 + if (window.__wxjs_environment === 'miniprogram') {
  568 + require('./miniprogram');
  569 + }
  570 +}
  571 +
566 $(function() { 572 $(function() {
567 if ($('.over').length) { 573 if ($('.over').length) {
568 // 过期/删除 状态的 活动 574 // 过期/删除 状态的 活动
@@ -619,8 +625,10 @@ $(function() { @@ -619,8 +625,10 @@ $(function() {
619 timedCutProductInit(); 625 timedCutProductInit();
620 626
621 // 小程序相关处理 627 // 小程序相关处理
622 - if (window.__wxjs_environment === 'miniprogram') {  
623 - require('./miniprogram'); 628 + if (!window.WeixinJSBridge || !window.WeixinJSBridge.invoke) {
  629 + document.addEventListener('WeixinJSBridgeReady', miniProgramHandleInit, false);
  630 + } else {
  631 + miniProgramHandleInit();
624 } 632 }
625 633
626 // 商品曝光事件上报 634 // 商品曝光事件上报
1 /* global wx */ 1 /* global wx */
2 import $ from 'yoho-jquery'; 2 import $ from 'yoho-jquery';
3 import tip from 'js/plugin/tip'; 3 import tip from 'js/plugin/tip';
  4 +import {transToMiniappPath} from 'js/common/miniapp-path-rules';
4 5
5 class LinkHandle { 6 class LinkHandle {
6 constructor() { 7 constructor() {
@@ -39,58 +40,13 @@ class LinkHandle { @@ -39,58 +40,13 @@ class LinkHandle {
39 * 转换为小程序页面地址 40 * 转换为小程序页面地址
40 */ 41 */
41 transToPath(href) { 42 transToPath(href) {
42 - let path = '';  
43 - let openbyParamsArr = href.split(/openby:yohobuy(=|=)/);  
44 - let paramsStr = openbyParamsArr[openbyParamsArr.length - 1];  
45 - let paramsObj = {}; 43 + let transData = transToMiniappPath(href);
46 44
47 - try {  
48 - paramsObj = JSON.parse(paramsStr);  
49 - } catch (error) {  
50 - console.error('paramsStr is: ', paramsStr);  
51 - }  
52 -  
53 - if (paramsObj.action === 'go.productDetail' && paramsObj.params && paramsObj.params.product_skn) { // 商品详情页  
54 - path = `/pages/goodsDetail/goodsDetail?productSkn=${paramsObj.params.product_skn}&page_name=home`;  
55 - } else if (paramsObj.action === 'go.list') { // 列表页、专区  
56 - let queryParams = this.transOpenbyParams(paramsObj.params);  
57 -  
58 - path = `/pages/goodsList/goodsList${queryParams}`;  
59 - } else if (paramsObj.action === 'go.poollist') { // 商品池  
60 - let queryParams = this.transOpenbyParams(paramsObj.params);  
61 -  
62 - path = `/pages/goodsList/productPool${queryParams}`;  
63 - } else if (paramsObj.action === 'go.h5' && paramsObj.params && paramsObj.params.url) { // 活动模板  
64 - let queryParams = this.transOpenbyParams(paramsObj.params.param);  
65 - let url = `${paramsObj.params.url}${queryParams}`;  
66 -  
67 - path = `/pages/webview/webview?page_name=home&url=${url}`;  
68 - } else if (paramsObj.action === 'go.shop') { // 店铺  
69 - path = `/pages/goodsList/brandStore?shopId=${paramsObj.params.shop_id}`;  
70 - } else { 45 + if (!transData.path) {
71 tip.show('暂不支持,请使用Yoho!buy有货APP选购'); 46 tip.show('暂不支持,请使用Yoho!buy有货APP选购');
72 } 47 }
73 48
74 - return path;  
75 - }  
76 -  
77 - /**  
78 - * 转换 openby 参数  
79 - */  
80 - transOpenbyParams(params) {  
81 - let paramsArr = [];  
82 -  
83 - if (params && $.isPlainObject(params)) {  
84 - for (let key in params) {  
85 - if (params.hasOwnProperty(key)) {  
86 - paramsArr.push(`${key}=${params[key]}`);  
87 - }  
88 - }  
89 - } else {  
90 - console.info('params is:', params);  
91 - }  
92 -  
93 - return paramsArr.length ? `?${paramsArr.join('&')}` : ''; 49 + return transData.path || '';
94 } 50 }
95 } 51 }
96 52
@@ -288,6 +288,8 @@ $.extend({ @@ -288,6 +288,8 @@ $.extend({
288 // 尝试打开 APP 288 // 尝试打开 APP
289 require('./common/open-app'); 289 require('./common/open-app');
290 290
  291 + // 尝试打开 MINIAPP
  292 + require('./common/open-miniapp');
291 }()); 293 }());
292 294
293 $header.on('touchstart', 'a', function() { 295 $header.on('touchstart', 'a', function() {
  1 +const _isPlainObject = (obj) => {
  2 + if (typeof(obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) { // eslint-disable-line
  3 + return false;
  4 + }
  5 +
  6 + if (obj.constructor &&
  7 + !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
  8 + return false;
  9 + }
  10 +
  11 + return true;
  12 +};
  13 +
  14 +const _qsStringfy = (params) => {
  15 + let paramsArr = [];
  16 +
  17 + if (params && _isPlainObject(params)) {
  18 + for (let key in params) {
  19 + if (params.hasOwnProperty(key)) {
  20 + paramsArr.push(`${key}=${params[key]}`);
  21 + }
  22 + }
  23 + } else {
  24 + console.info('params is:', params);
  25 + }
  26 +
  27 + return paramsArr.length ? `?${paramsArr.join('&')}` : '';
  28 +};
  29 +
  30 +
  31 +// 有货跳转规则转化为有货精选路由
  32 +const transToMiniappPath = (href) => {
  33 + let path = '';
  34 + let openbyParamsArr = href.split(/openby:yohobuy(=|=)/);
  35 + let paramsStr = openbyParamsArr[openbyParamsArr.length - 1];
  36 + let paramsObj = {};
  37 +
  38 + try {
  39 + paramsObj = JSON.parse(paramsStr);
  40 + } catch (error) {
  41 + console.error('paramsStr is: ', paramsStr);
  42 + }
  43 +
  44 + switch (paramsObj.action) {
  45 + case 'go.productDetail': // 商品详情页
  46 + if (paramsObj.params && paramsObj.params.product_skn) {
  47 + path = `/pages/goodsDetail/goodsDetail?productSkn=${paramsObj.params.product_skn}&page_name=home`;
  48 + }
  49 + break;
  50 + case 'go.list': // 列表页、专区
  51 + path = `/pages/goodsList/goodsList${_qsStringfy(paramsObj.params)}`;
  52 + break;
  53 + case 'go.poollist': // 商品池
  54 + path = `/pages/goodsList/productPool${_qsStringfy(paramsObj.params)}`;
  55 + break;
  56 + case 'go.h5':
  57 + if (paramsObj.params && paramsObj.params.url) {
  58 + path = `/pages/webview/webview?page_name=home&url=${paramsObj.params.url}${_qsStringfy(paramsObj.params.param)}`; // eslint-disable-line
  59 + }
  60 + break;
  61 + case 'go.shop':
  62 + path = `/pages/goodsList/brandStore?shopId=${paramsObj.params.shop_id}`;
  63 + break;
  64 + default:
  65 + break;
  66 + }
  67 +
  68 + return {
  69 + path: path,
  70 + action: paramsObj.action
  71 + };
  72 +};
  73 +
  74 +module.exports = {
  75 + transToMiniappPath
  76 +};
  1 +import {transToMiniappPath} from './miniapp-path-rules';
  2 +
  3 +const jumpAction = ['go.productDetail', 'go.list', 'go.shop', 'go.poollist'];
  4 +let retry = 6;
  5 +
  6 +function goMiniapp(apppath) {
  7 + retry--;
  8 +
  9 + if (!window.wx) {
  10 + if (retry > 0) {
  11 + setTimeout(function() {
  12 + goMiniapp(apppath);
  13 + }, 300);
  14 + }
  15 +
  16 + return;
  17 + }
  18 +
  19 + let transData = transToMiniappPath(apppath);
  20 +
  21 + if (transData.path && jumpAction.indexOf(transData.action) >= 0) {
  22 + window.wx.miniProgram.redirectTo({url: transData.path});
  23 + }
  24 +}
  25 +
  26 +function init() {
  27 + if (window.__wxjs_environment !== 'miniprogram') {
  28 + return;
  29 + }
  30 +
  31 + // 添加小程序webview页面标识
  32 + const bodyClass = 'miniapp-body';
  33 + const $body = document.getElementsByTagName('body')[0];
  34 + let classNames = ($body.className || '').split(' ');
  35 +
  36 + if (classNames.indexOf(bodyClass) < 0) {
  37 + classNames.push(bodyClass);
  38 + }
  39 +
  40 + $body.className = classNames.join(' ');
  41 +
  42 + // 自动跳转至小程序对应页面
  43 + const appInfo = document.getElementById('main-wrap').dataset;
  44 +
  45 + if (appInfo.miniautojump && appInfo.apppath) {
  46 + goMiniapp(appInfo.apppath);
  47 + }
  48 +}
  49 +
  50 +if (!window.WeixinJSBridge || !window.WeixinJSBridge.invoke) {
  51 + document.addEventListener('WeixinJSBridgeReady', init, false);
  52 +} else {
  53 + init();
  54 +}