1

fallingfood.json

+{
+	"view": {
+		"children": [
+			{
+				"name": "frontpage",
+				"properties": {
+					"style": {
+						"top": 0,
+						"left": 0,
+						"width": 750,
+						"height": 1624,
+						"display": "block",
+						"position": "absolute"
+					},
+					"attrs": {},
+					"className": ""
+				},
+				"uuid": "efe029a6-03a3-48d0-9c63-c18e576bec5b",
+				"rect": {
+					"x": 0,
+					"y": 0,
+					"width": 300,
+					"height": 300
+				},
+				"componentName": "Div",
+				"viewType": "Scene",
+				"children": [
+					{
+						"name": "背景",
+						"properties": {
+							"style": {
+								"width": 750,
+								"height": 1624,
+								"opacity": 1,
+								"top": "__m%",
+								"position": "absolute"
+							},
+							"attrs": {
+								"source": "asset://7217f405-184d-449d-8f30-aa9f3e2935b5"
+							},
+							"className": ""
+						},
+						"uuid": "9d08a977-09ab-4de8-987e-cc17a35b3036",
+						"rect": {
+							"x": 0,
+							"y": "__m%",
+							"width": 750,
+							"height": 1624
+						},
+						"componentName": "Image"
+					},
+					{
+						"name": "按钮",
+						"properties": {
+							"style": {
+								"width": 750,
+								"height": 1147,
+								"opacity": 1,
+								"verticalCenter": -8.5,
+								"top": 142,
+								"position": "absolute"
+							},
+							"attrs": {
+								"source": "asset://c9a962d2-df8e-4d01-8353-d9d20fa860c8"
+							},
+							"className": ""
+						},
+						"uuid": "7dc9839b-62f7-42f8-8960-521ffc2da81a",
+						"rect": {
+							"x": 0,
+							"y": 142,
+							"width": 750,
+							"height": 1147
+						},
+						"componentName": "Image"
+					},
+					{
+						"name": "标题",
+						"properties": {
+							"style": {
+								"width": 569,
+								"height": 119,
+								"opacity": 1,
+								"top": "__m%",
+								"left": 99,
+								"position": "absolute"
+							},
+							"attrs": {
+								"source": "asset://e46a7197-4d94-4816-9580-c7d8b01c0f91"
+							},
+							"className": ""
+						},
+						"uuid": "5c42041b-27c7-4589-b92f-29fc4b56864f",
+						"rect": {
+							"x": 99,
+							"y": "__m%",
+							"width": 569,
+							"height": 119
+						},
+						"componentName": "Image"
+					}
+				]
+			}
+		]
+	},
+	"assets": [
+		{
+			"name": "背景",
+			"ext": ".png",
+			"uuid": "7217f405-184d-449d-8f30-aa9f3e2935b5",
+			"url": "//yun.duiba.com.cn/spark/assets/808ee1bec7fd270d396dca19f742a69d80ee0508.png"
+		},
+		{
+			"name": "按钮",
+			"ext": ".png",
+			"uuid": "c9a962d2-df8e-4d01-8353-d9d20fa860c8",
+			"url": "//yun.duiba.com.cn/spark/assets/438fa9e6a39938dd7263a5038d30e55518473a7a.png"
+		},
+		{
+			"name": "标题",
+			"ext": ".png",
+			"uuid": "e46a7197-4d94-4816-9580-c7d8b01c0f91",
+			"url": "//yun.duiba.com.cn/spark/assets/17b9bc766788c5c861cf7c0156217e99d0b70ba4.png"
+		}
+	]
+}
\ No newline at end of file

project/.gitignore

+.DS_Store
+node_modules/
+coverage/
+dist/
+npm-debug.log
+selenium-debug.log
+.idea
+.builds
+.project
+.vscode
+yarn-error.log
+.yarn
+.package-lock
+yarn.lock
+.cache
+packages/**/package-lock.json

project/.npmrc

+package-lock=false
+registry = http://registry.npm.taobao.org/
\ No newline at end of file

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": "spark-project-create",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'"
+  },
+  "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": "git+ssh://git@gitlab2.dui88.com:spark/spark-utils.git"
+  },
+  "devDependencies": {
+    "mockjs": "^1.1.0"
+  }
+}

project/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <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>
+      !(function(e, i) {
+        var t = e.documentElement,
+          n = navigator.userAgent.match(/iphone|ipod|ipad/gi),
+          a = n ? Math.min(i.devicePixelRatio, 3) : 1,
+          m = 'orientationchange' in window ? 'orientationchange' : 'resize';
+        t.dataset.dpr = a;
+        for (
+          var d, l, c = !1, o = e.getElementsByTagName('meta'), r = 0;
+          r < o.length;
+          r++
+        )
+          (l = o[r]), 'viewport' == l.name && ((c = !0), (d = l));
+        if (c)
+          d.content =
+            'width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no';
+        else {
+          var o = e.createElement('meta');
+          (o.name = 'viewport'),
+            (o.content =
+              'width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no'),
+            t.firstElementChild.appendChild(o);
+        }
+        var s = function() {
+          var e = t.clientWidth;
+          e / a > 750 && (e = 750 * a),
+            (window.remScale = e / 750),
+            (t.style.fontSize = 200 * (e / 750) + 'px');
+        };
+        s(), e.addEventListener && i.addEventListener(m, s, !1);
+      })(document, window);
+    </script>
+     <script>
+      function getApp(){
+        return {
+          cloud:{},
+          cloudName:"clientTemplate2C",
+          requestType:"mock"
+        }
+      }
+
+      var CFG = CFG || {};
+      CFG.projectId = location.pathname.split('/')[2] || '1';
+    </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>
+  <script src="//yun.duiba.com.cn/db_games/activity/md5/zepto_security_downloadApp.min.js"></script>
+
+
+</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
+};

project/src/api/apicfg.js

+let projectId = window.CFG.projectId || '';
+
+const apiCfg = {
+    getRule:`/projectx/${projectId}/projectRule.query`,
+    doJoin: {
+      uri: `/projectx/${projectId}/join.do`,
+      method: "post"
+    }
+}
+
+export default apiCfg;
\ No newline at end of file

project/src/api/index.js

+
+
+import apiCfg from './apicfg';
+import request from './request';
+
+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' } = value;
+    return {
+      uri,
+      method
+    }
+  } else {
+    console.error('getRequestParams: 传参有误');
+  }
+};
+
+
+function generateAPI(apiList) {
+  const api = {};
+  Object.entries(apiList).forEach(([key, value]) => {
+    const { method, uri } = getRequestParams(value);
+    api[key] = params => request[method](uri, method === 'post' ? params : { params });
+  });
+  return api;
+
+}
+

project/src/api/request.js

+import Qs from "qs";
+import axios from "axios";
+
+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 }))
+      : (config.params = { ...config.params });
+    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 Pagefrontpage from "./pages/pagefrontpage/pagefrontpage.jsx";
+class App extends Component {
+ 
+  render() {
+    return (
+      <Pagefrontpage></Pagefrontpage>
+    );
+  }
+}
+
+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/canvas/game/resCanvasList.js

+const resCanvasList = {};
+export default resCanvasList;

project/src/pages/pagefrontpage/pagefrontpage.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagefrontpage.less';
+
+class Pagefrontpage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="frontpage">
+        <img className="bei_jing" src={this.state.resList['7217f405-184d-449d-8f30-aa9f3e2935b5'].url} />
+        <img className="an_niu" src={this.state.resList['c9a962d2-df8e-4d01-8353-d9d20fa860c8'].url} />
+        <img className="biao_ti" src={this.state.resList['e46a7197-4d94-4816-9580-c7d8b01c0f91'].url} />
+      </div>
+    );
+  }
+}
+export default Pagefrontpage;

project/src/pages/pagefrontpage/pagefrontpage.less

+.frontpage {
+  top: 0px;
+  left: 0px;
+  width: 750px;
+  height: 1624px;
+  display: block;
+  position: absolute;
+  .bei_jing {
+    width: 750px;
+    height: 1624px;
+    opacity: 1;
+    top: __m%;
+    position: absolute;
+  }
+  .an_niu {
+    width: 750px;
+    height: 1147px;
+    opacity: 1;
+    vertical-center: -8.5;
+    top: 142px;
+    position: absolute;
+  }
+  .biao_ti {
+    width: 569px;
+    height: 119px;
+    opacity: 1;
+    top: __m%;
+    left: 99px;
+    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 = {
+  '7217f405-184d-449d-8f30-aa9f3e2935b5': {
+    name: '背景',
+    ext: '.png',
+    uuid: '7217f405-184d-449d-8f30-aa9f3e2935b5',
+    url: '//yun.duiba.com.cn/spark/assets/808ee1bec7fd270d396dca19f742a69d80ee0508.png',
+  },
+  'c9a962d2-df8e-4d01-8353-d9d20fa860c8': {
+    name: '按钮',
+    ext: '.png',
+    uuid: 'c9a962d2-df8e-4d01-8353-d9d20fa860c8',
+    url: '//yun.duiba.com.cn/spark/assets/438fa9e6a39938dd7263a5038d30e55518473a7a.png',
+  },
+  'e46a7197-4d94-4816-9580-c7d8b01c0f91': {
+    name: '标题',
+    ext: '.png',
+    uuid: 'e46a7197-4d94-4816-9580-c7d8b01c0f91',
+    url: '//yun.duiba.com.cn/spark/assets/17b9bc766788c5c861cf7c0156217e99d0b70ba4.png',
+  },
+};
+export default resList;