1

dsl.json

+{"assets":[{"name":"loading_bg","ext":".png","uuid":"486d644d-196a-4d71-99fe-bbaf06ecacbf","url":"https://yun.duiba.com.cn/spark/assets/4a232be651feab99b4fba76a9a8359a19eb46219.png"},{"name":"loading_front","ext":".png","uuid":"042d5356-2585-46db-889d-664a8100598e","url":"https://yun.duiba.com.cn/spark/assets/da77308a053bd24455373152d12640cdd56215c8.png"},{"name":"loading_progress","ext":".png","uuid":"97cb2a19-7bb9-4b41-ad0d-2b0f757b97ad","url":"https://yun.duiba.com.cn/spark/assets/be3668797d9e5bbce50bc3c2a905dbe7d65dc8f0.png"},{"name":"loading_icon","ext":".png","uuid":"c2df1a83-e9ea-4627-b376-1ac7f3e87b5c","url":"https://yun.duiba.com.cn/spark/assets/3e280b88318ca603cfd973f81b2238628e543931.png"}],"view":{"name":"加载页-合并","nodeType":"Div","uuid":"6d605298-7b6f-44a2-ae12-016d515165fb","children":[{"name":"loading","properties":{"style":{"width":750,"height":1624,"position":"absolute"},"attrs":{},"className":""},"uuid":"b325d068-5750-48c1-8447-29b6f572e955","nodeType":"Div","children":[{"name":"loading_bg","properties":{"style":{"width":750,"height":1624,"position":"absolute"},"attrs":{"source":"asset://486d644d-196a-4d71-99fe-bbaf06ecacbf"},"className":""},"uuid":"caa1574c-edd4-4b5c-8332-18002df91464","nodeType":"Image"},{"name":"loading_front","properties":{"style":{"width":679,"height":163,"left":27,"top":693,"position":"absolute"},"attrs":{"source":"asset://042d5356-2585-46db-889d-664a8100598e"},"className":""},"uuid":"0fadc807-1e4c-45df-9cb8-db801c1a5426","nodeType":"Image"},{"name":"loading_progress","properties":{"style":{"width":557,"height":37,"left":88,"top":755,"position":"absolute"},"attrs":{"source":"asset://97cb2a19-7bb9-4b41-ad0d-2b0f757b97ad"},"className":""},"uuid":"19f75998-1403-415a-a816-090af61cfc2e","nodeType":"Image"},{"name":"loading_icon","properties":{"style":{"width":101,"height":133,"left":336,"top":623,"position":"absolute"},"attrs":{"source":"asset://c2df1a83-e9ea-4627-b376-1ac7f3e87b5c"},"className":""},"uuid":"fe96070d-8add-43d9-8575-a519d4981222","nodeType":"Image"}],"viewType":"Page"}]}}

project/MD.js

+import MD from 'spark-utils/out/md/index.js';
+
+let appId = CFG.appID;
+const dcm = '202.' + CFG.projectId + '.0.0';
+const domain = '//embedlog.duiba.com.cn';
+
+let MDList = [
+  {
+    ele: `.test-md1`,
+    data: {
+      dpm: `${appId}.110.5.1`,
+      dcm,
+      domain,
+      appId
+    },
+    once: false
+  }
+];
+
+export default () =>
+  MD({
+    show: MDList, // 曝光
+    click: MDList // 点击
+  });

project/mock/collect_0722/index.js

+export const join = {
+  "success": true,
+  "data": {
+    message: "参与成功"
+  }
+};

project/mock/common/index.js

+export * from './rule';

project/mock/common/rule.js

+import { Random } from 'mockjs';
+
+export const rule = {
+  "success": true,
+  "data": `活动规则: ${Random.cparagraph(20, 40)}`
+};

project/mock/index.js

+import Mock from 'mockjs';
+import proxy from './proxy';
+
+Object.keys(proxy).map(method => {
+  Object.keys(proxy[method]).map(URI => {
+    let data = proxy[method][URI];
+    Mock.mock(new RegExp(URI), method, opt => {
+      console.log(`%c[mock] 链接：${opt.url} 类型：${method} 参数：${method === 'post' && JSON.stringify(opt.body) || ''}`, "color: rgb(63, 172, 203)", data);
+      return data
+    });
+  })
+})
\ No newline at end of file

project/mock/proxy.js

+import * as common from './common';
+import * as collect_0722 from './collect_0722';
+let projectId = window.CFG.projectId || '';
+
+export default {
+  get: {
+    [`/projectx/${projectId}/projectRule.query`]: common.rule
+  },
+  post: {
+    [`/projectx/${projectId}/join.do`]: collect_0722.join
+  }
+};
\ No newline at end of file

project/package.json

+{
+  "name": "sparkproject-1608173731754",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "spark dev --type h5",
+    "prod": "spark build --type h5 --env prod",
+    "tb": "spark build --type taobao"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "css-loader": "^3.6.0",
+    "fyge-tbmini": "^1.3.1",
+    "postcss-loader": "^3.0.0",
+    "prettier": "^2.0.5",
+    "qs": "^6.9.4",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0",
+    "style-loader": "^1.2.1",
+    "spark-utils": "^0.0.12",
+    "duiba-utils": "^1.0.2",
+    "@spark/api-base": "^1.0.11",
+    "@spark/projectx": "^1.0.3"
+  },
+  "devDependencies": { "mockjs": "^1.1.0" }
+}

project/public/index.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <title>React App</title>
+  <script src="getTokenKey" id="scriptkey"></script>
+  <script id="scriptjs" src="//yun.duiba.com.cn/js-libs/px-token/0.0.4/px-token.min.js"></script>
+  <script src="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"></script>
+  <script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script>
+  <script>
+    function getApp() {
+      return {
+        cloud: {},
+        cloudName: "clientTemplate2C",
+        requestType: "mock"
+      }
+    }
+
+    var CFG = CFG || {};
+    CFG.projectId = location.pathname.split('/')[2] || '1';
+    function getUrlParam(name) {
+      const search = window.location.search;
+      const matched = search
+        .slice(1)
+        .match(new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'));
+      return search.length ? matched && matched[2] : null;
+    }
+
+    CFG.appID = '${APPID}';
+    if (!getUrlParam("appID")) {
+      alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
+    }
+  </script>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+
+</html>

project/sparkrc.js

+module.exports = {
+	OUTPUT_DIR: "dist",
+	SOURCE_DIR: "src",
+	TEMP_DIR: "./.temp",
+	ENTRY: "src/app.jsx",
+	TEMPLATE: "./public/index.html",
+	MOCK_STATUS: true,
+	PX2REM: true
+};

project/src/api/apicfg.js

+
+const apiCfg = {
+  getRule:`projectRule.query`,
+  doJoin: {
+    uri: `join.do`,
+    method: "post"
+  },
+}
+
+export default apiCfg;

project/src/api/index.js

+import apiCfg from './apicfg';
+import {getPxToken} from "@spark/projectx";
+import {callApi} from '@spark/api-base'
+
+import {isFromShare, newUser} from 'duiba-utils';
+
+let mergeData = {
+  user_type: newUser ? '0' : '1',
+  is_from_share: isFromShare ? '0' : '1',
+}
+
+const apiList = {
+  ...apiCfg
+}
+
+
+const API = generateAPI(apiList);
+export default API;
+
+function getRequestParams(value) {
+  if (typeof value === 'string') {
+    return {
+      uri: value,
+      method: 'get'
+    }
+  } else if (typeof value === 'object') {
+    const {uri, method = 'post', headers, withToken, secret, secretKey} = value;
+    return {
+      uri,
+      method,
+      headers,
+      withToken,
+      secret,
+      secretKey,
+    }
+  } else {
+    console.error('getRequestParams: 传参有误');
+  }
+}
+
+
+function generateAPI(apiList) {
+  const api = {};
+  for (let key in apiList) {
+    let value = apiList[key];
+
+    const {method, uri, headers: mHeaders, withToken, secret, secretKey} = getRequestParams(value);
+    api[key] = async (params = {}, headers) => {
+      let token;
+      if (withToken) {
+        const {type, payload} = await getPxToken();
+        switch (type) {
+          case 'success':
+            token = payload.token;
+            break;
+          case 'failed':
+            location.reload();
+            break;
+        }
+      }
+
+      let mergedHeaders = {...mHeaders, ...headers}
+      if (withToken && token) {
+        params.token = token;
+      }
+
+      params = {...params, ...mergeData};
+
+      const result = await callApi(uri, params, method, mergedHeaders, false, secret, secretKey);
+      if (result.type === 'success') {
+        return result.payload;
+      }
+      throw new Error(result.payload);
+    }
+  }
+
+  return api;
+}

project/src/api/request.js

+import Qs from "qs";
+import axios from "axios";
+// 分享召回工具类
+import { isFromShare, newUser } from 'duiba-utils';
+let mergeData = {
+  user_type: newUser ? '0' : '1',
+  is_from_share: isFromShare ? '0' : '1',
+  _t: Date.now()
+}
+
+const TIMEOUT = 10000;
+
+const instance = axios.create({
+  timeout: TIMEOUT, // 请求超时时间
+});
+
+instance.interceptors.request.use(
+  (config) => {
+    if (config.method === "get") {
+      config.data = true;
+    }
+    config.method === "post"
+    ? (config.data = Qs.stringify({ ...config.data, ...mergeData }))
+    : (config.params = { ...config.params, ...mergeData });
+    config.headers["Content-Type"] = "application/x-www-form-urlencoded";
+
+    return config;
+  },
+  (error) => {
+    //请求错误处理
+    Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+instance.interceptors.response.use(
+  // 请求成功
+  (res) => {
+    const { status } = res || -1000;
+    return (status >= 200 && status <= 400) ? res.data : res
+  }
+);
+
+export default instance;

project/src/app.jsx

+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import "./app.less";
+import { MOCK_STATUS } from '../sparkrc';
+MOCK_STATUS && (require('../mock/index'));
+import MD from '../MD';
+MD();
+//此处为spark-cli动态生成
+import Loading from "./pages/loading/loading.jsx";
+class App extends Component {
+ 
+  render() {
+    return (
+      <Loading></Loading>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));

project/src/app.less

+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  font-size: 24px;
+  width: 100%;
+  height: 100%;
+}

project/src/pages/loading/loading.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './loading.less';
+class Loading extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="loading " uuid="b325d068-5750-48c1-8447-29b6f572e955">
+        <img
+          className="loading_bg "
+          uuid="caa1574c-edd4-4b5c-8332-18002df91464"
+          src={this.state.resList['486d644d-196a-4d71-99fe-bbaf06ecacbf'].url}
+        />
+        <img
+          className="loading_front "
+          uuid="0fadc807-1e4c-45df-9cb8-db801c1a5426"
+          src={this.state.resList['042d5356-2585-46db-889d-664a8100598e'].url}
+        />
+        <img
+          className="loading_progress "
+          uuid="19f75998-1403-415a-a816-090af61cfc2e"
+          src={this.state.resList['97cb2a19-7bb9-4b41-ad0d-2b0f757b97ad'].url}
+        />
+        <img
+          className="loading_icon "
+          uuid="fe96070d-8add-43d9-8575-a519d4981222"
+          src={this.state.resList['c2df1a83-e9ea-4627-b376-1ac7f3e87b5c'].url}
+        />
+      </div>
+    );
+  }
+}
+export default Loading;

project/src/pages/loading/loading.less

+.loading {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  .loading_bg {
+    width: 750px;
+    height: 1624px;
+    position: absolute;
+  }
+  .loading_front {
+    width: 679px;
+    height: 163px;
+    left: 27px;
+    top: 693px;
+    position: absolute;
+  }
+  .loading_progress {
+    width: 557px;
+    height: 37px;
+    left: 88px;
+    top: 755px;
+    position: absolute;
+  }
+  .loading_icon {
+    width: 101px;
+    height: 133px;
+    left: 336px;
+    top: 623px;
+    position: absolute;
+  }
+}

project/src/resconfig/res.js

+
+/**
+ * 目前没有用到
+ * @param {*} resList 
+ * @param {*} uuid 
+ */
+const getSrcByUuid = (resList, uuid) => {
+    resList = resList || [];
+    for (let i = 0; i < resList.length; i++) {
+        if (resList[i].uuid == uuid) {
+            return resList[i].url
+        }
+    }
+}
+module.exports = {
+    getSrcByUuid
+}
\ No newline at end of file

project/src/resconfig/resList.js

+const resList = {
+  '486d644d-196a-4d71-99fe-bbaf06ecacbf': {
+    name: 'loading_bg',
+    ext: '.png',
+    uuid: '486d644d-196a-4d71-99fe-bbaf06ecacbf',
+    url: 'https://yun.duiba.com.cn/spark/assets/4a232be651feab99b4fba76a9a8359a19eb46219.png',
+  },
+  '042d5356-2585-46db-889d-664a8100598e': {
+    name: 'loading_front',
+    ext: '.png',
+    uuid: '042d5356-2585-46db-889d-664a8100598e',
+    url: 'https://yun.duiba.com.cn/spark/assets/da77308a053bd24455373152d12640cdd56215c8.png',
+  },
+  '97cb2a19-7bb9-4b41-ad0d-2b0f757b97ad': {
+    name: 'loading_progress',
+    ext: '.png',
+    uuid: '97cb2a19-7bb9-4b41-ad0d-2b0f757b97ad',
+    url: 'https://yun.duiba.com.cn/spark/assets/be3668797d9e5bbce50bc3c2a905dbe7d65dc8f0.png',
+  },
+  'c2df1a83-e9ea-4627-b376-1ac7f3e87b5c': {
+    name: 'loading_icon',
+    ext: '.png',
+    uuid: 'c2df1a83-e9ea-4627-b376-1ac7f3e87b5c',
+    url: 'https://yun.duiba.com.cn/spark/assets/3e280b88318ca603cfd973f81b2238628e543931.png',
+  },
+};
+export default resList;