{"id":13656186,"url":"https://github.com/eva-engine/ali-miniapp-demo","last_synced_at":"2025-03-18T04:26:49.118Z","repository":{"id":45246946,"uuid":"442383672","full_name":"eva-engine/ali-miniapp-demo","owner":"eva-engine","description":"淘宝/支付宝小程序Demo","archived":false,"fork":false,"pushed_at":"2021-12-29T03:39:49.000Z","size":14,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-01-24T11:12:59.352Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eva-engine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-28T07:22:33.000Z","updated_at":"2022-08-29T06:33:23.000Z","dependencies_parsed_at":"2022-09-06T09:40:17.734Z","dependency_job_id":null,"html_url":"https://github.com/eva-engine/ali-miniapp-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eva-engine%2Fali-miniapp-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eva-engine%2Fali-miniapp-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eva-engine%2Fali-miniapp-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eva-engine%2Fali-miniapp-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eva-engine","download_url":"https://codeload.github.com/eva-engine/ali-miniapp-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244155624,"owners_count":20407388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T04:00:52.760Z","updated_at":"2025-03-18T04:26:49.095Z","avatar_url":"https://github.com/eva-engine.png","language":"JavaScript","funding_links":[],"categories":["Quike Start"],"sub_categories":[],"readme":"# 淘宝/支付宝小程序Demo\r\n\r\n\r\n\u003e 目前不支持读取本地资源，可使用cdn资源\r\n\r\n\r\n## Eva.js 小程序组件使用方法\r\n\r\n所有开发语法都与 Eva.js 一致\r\n\r\n[Eva.js 官网](https://eva.js.org/)\r\n\r\n[Eva.js 中文官网](https://eva-engine.gitee.io/)\r\n\r\n\r\n引用npm包的方式需要修改，引用npm包里面的 `dist/miniprogram` 文件\r\n\r\n例如\r\n\r\n```js\r\nimport { resource, GameObject, RESOURCE_TYPE } from \"@eva/eva.js/dist/miniprogram\";\r\nimport { Event, EventSystem, HIT_AREA_TYPE } from '@eva/plugin-renderer-event/dist/miniprogram'\r\nimport { Img, ImgSystem } from '@eva/plugin-renderer-img/dist/miniprogram'\r\n```\r\n\r\n### 开发IDE：\r\n\r\n- 淘宝小程序IDE:[https://miniapp.open.taobao.com/doc.htm?docId=119660\u0026docType=1\u0026tag=dev](https://miniapp.open.taobao.com/doc.htm?docId=119660\u0026docType=1\u0026tag=dev)\r\n\r\n- 支付宝小程序IDE:[https://opendocs.alipay.com/mini/ide/download](https://opendocs.alipay.com/mini/ide/download)\r\n\r\n### 注意：\r\n\r\n- 目前Canvas要求手淘版本 \u003e 9.7.0，项目中需要进行判断版本，进行降级抄底\r\n- Canvas 2d: 要求手淘版本 \u003e 9.7.0\r\n- webGL : 要求手淘版本 \u003e 9.9.0\r\n\r\n\r\n\r\n### 使用方式：\r\n\r\n#### 1.开启使用Canvas:\r\n\r\napp.json 增加配置项：\r\n\r\n\r\n- 手淘：\"enableSkia\": \"true\"\r\n\r\n```javascript\r\n{\r\n  \"pages\": [\r\n    \"pages/index/index\"\r\n  ],\r\n  \"window\": {\r\n    \"defaultTitle\": \"My App\",\r\n    \"enableSkia\": \"true\"\r\n  }\r\n}\r\n```\r\n\r\n- 支付宝开启依赖库2.0编译：\"enableAppxNg\": true\r\n\r\nmini.project.json\r\n\r\n```json\r\n{\r\n  \"enableAppxNg\": true\r\n}\r\n```\r\n\r\n\r\n### 2.安装小程序所需依赖，其他 Eva.js 依赖与官网教程相同\r\n- @eva/miniprogram-adapter\r\n- @eva/miniprogram-pixi\r\n\r\n```javascript\r\nnpm install @eva/miniprogram-adapter\r\nnpm install @eva/miniprogram-adapter\r\n```\r\n\r\n\r\n### 3.引用eva-game组件\r\n\r\n\r\n- index.axml\r\n\r\n\r\n\r\n```javascript\r\n\u003ceva-game id=\"canvas\" options={{// 这里可覆盖RendererSystem参数\r\nappOptions}} destroyAppOnDidUnmount=\"true\" onError=\"onEvaCanvasError\" onDidUnmount=\"onEvaCanvasDidUnmount\" onAppInit=\"onAppInit\"\u003e\u003c/eva-game\u003e\r\n```\r\n\r\n\r\n- index.json\r\n\r\n```javascript\r\n{\r\n  \"usingComponents\":{\r\n      \"eva-game\": \"/components/eva-game/eva-game\"\r\n  }\r\n}\r\n```\r\n\r\n\r\n#### 4.在js中编写eva-game的 事件监听\r\n\r\n```javascript\r\nimport { resource, GameObject, RESOURCE_TYPE } from \"@eva/eva.js/dist/miniprogram\";\r\nimport { Event, EventSystem, HIT_AREA_TYPE } from '@eva/plugin-renderer-event/dist/miniprogram'\r\nimport { Img, ImgSystem } from '@eva/plugin-renderer-img/dist/miniprogram'\r\nPage({\r\n  data: {\r\n    // 这里可覆盖RendererSystem参数\r\n    appOptions: {\r\n      // 手动指定游戏的尺寸\r\n      width: 750,\r\n      height: 1000,\r\n      // 全屏-以窗口宽高作为application的尺寸，当设置此选项后，手动设置的width\\height会失效\r\n      isFullScreen: false,\r\n      // 画布透明\r\n      transparent: false,\r\n      // 背景颜色\r\n      backgroundColor: 0x000000,\r\n      // 是否强制用2d上下文渲染，如果为false,则优先使用webgl渲染\r\n      forceCanvas: false\r\n    }\r\n  },\r\n  onLoad(query) {\r\n    // 页面加载\r\n    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);\r\n    resource.addResource([\r\n      {\r\n        name: 'heart',\r\n        type: RESOURCE_TYPE.IMAGE,\r\n        src: {\r\n          image: {\r\n            type: 'png',\r\n            url:\r\n              'https://gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png',\r\n          },\r\n        },\r\n        preload: true,\r\n      },\r\n    ]);\r\n  },\r\n  onEvaCanvasError(e) {\r\n    console.log(e);\r\n  },\r\n  onEvaCanvasDidUnmount(e) {\r\n    console.log('unmount')\r\n  },\r\n  onAppInit(e) {\r\n    const { game } = e;\r\n    game.addSystem(new ImgSystem())\r\n    game.addSystem(new EventSystem())\r\n    const image = new GameObject('image', {\r\n      origin: { x: 0.5, y: 0.5 },\r\n      size: { width: 200, height: 200 },\r\n      position: {\r\n        x: 300,\r\n        y: 300\r\n      },\r\n    });\r\n    const img = image.addComponent(new Img({\r\n      resource: 'heart'\r\n    }));\r\n    const evt = image.addComponent(new Event({\r\n      // 使用这个属性设置交互事件可以触发的区域，骨骼动画有所变差，可以临时在当前游戏对象下添加一个同类型同属性的Graphic查看具体点击位置。\r\n      hitArea: {\r\n        type: HIT_AREA_TYPE.Polygon,\r\n        style: {\r\n          paths: [109, 48, 161, 21, 194, 63, 193, 104, 65, 176, 8, 86, 38, 40, 90, 33]\r\n        }\r\n      }\r\n    }));\r\n    evt.on('tap', () =\u003e {\r\n      console.log('touch')\r\n    })\r\n    let touched = false;\r\n    evt.on('touchstart', e =\u003e {\r\n      console.log(e);\r\n      console.log('touchstart');\r\n      touched = true;\r\n    });\r\n    evt.on('touchend', e =\u003e {\r\n      console.log('touchend');\r\n      touched = false;\r\n    });\r\n    evt.on('touchendoutside', e =\u003e {\r\n      console.log('touchendoutside');\r\n      touched = false;\r\n    })\r\n    evt.on('touchmove', e =\u003e {\r\n      if (touched) {\r\n        const transform = e.gameObject.transform;\r\n        console.log('touchmove');\r\n        console.log(\r\n          transform.size.width * (1 - transform.origin.x),\r\n          transform.size.height * (1 - transform.origin.y)\r\n        );\r\n        const { x, y } = e.data.position\r\n        transform.position = { x: x, y: y }; // 通过缩放scene来设置游戏界面尺寸时，需要计算真实的点位\r\n      }\r\n    });\r\n    game.scene.addChild(image);\r\n  },\r\n  onReady() {\r\n  },\r\n  onShow() {\r\n    // 页面显示\r\n  },\r\n  onHide() {\r\n    // 页面隐藏\r\n  },\r\n  onUnload() {\r\n    // 页面被关闭\r\n  },\r\n  onTitleClick() {\r\n    // 标题被点击\r\n  },\r\n  onPullDownRefresh() {\r\n    // 页面被下拉\r\n  },\r\n  onReachBottom() {\r\n    // 页面被拉到底部\r\n  },\r\n  onShareAppMessage() {\r\n    // // 返回自定义分享信息\r\n    // return {\r\n    //   title: 'Demo-Text',\r\n    //   desc: 'Demo-Text',\r\n    //   path: 'pages/text/index',\r\n    // };\r\n  },\r\n});\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feva-engine%2Fali-miniapp-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feva-engine%2Fali-miniapp-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feva-engine%2Fali-miniapp-demo/lists"}