{"id":27774304,"url":"https://github.com/tongbanjie/pagego","last_synced_at":"2025-04-30T02:18:09.518Z","repository":{"id":57318094,"uuid":"196380509","full_name":"tongbanjie/PageGo","owner":"tongbanjie","description":"A react based SPA system","archived":false,"fork":false,"pushed_at":"2020-01-07T10:19:28.000Z","size":113,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T02:18:04.315Z","etag":null,"topics":["html5","mobile","pagego","plugin-system","react","react-router","reactjs","routing-engine","spa","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tongbanjie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-11T11:22:04.000Z","updated_at":"2019-11-18T01:52:29.000Z","dependencies_parsed_at":"2022-08-25T20:41:16.644Z","dependency_job_id":null,"html_url":"https://github.com/tongbanjie/PageGo","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tongbanjie%2FPageGo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tongbanjie%2FPageGo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tongbanjie%2FPageGo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tongbanjie%2FPageGo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tongbanjie","download_url":"https://codeload.github.com/tongbanjie/PageGo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251626898,"owners_count":21617744,"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":["html5","mobile","pagego","plugin-system","react","react-router","reactjs","routing-engine","spa","typescript"],"created_at":"2025-04-30T02:18:08.717Z","updated_at":"2025-04-30T02:18:09.506Z","avatar_url":"https://github.com/tongbanjie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 简介\n 一个以页面为核心的适用于wap开发的单页面系统\n\n## Introduction\nThis is a React based SPA system for mobile wap development.\n\n ---\n\n## 安装\n使用npm来安装\n```js\nnpm i pagego\n```\n\n## [这里是详细文档](https://github.com/tongbanjie/PageGo/wiki)\n\n## 示例(DEMO)\n+ [功能展示](https://pagego.github.io/normal/index.html)\n+ [hash路由](https://pagego.github.io/hash/)\n+ [Context](https://pagego.github.io/context/index.html)\n\n## 用法\n\n以下三个步骤可能帮你快速开始使用PageGo, 不过更建议你查看具体[**文档**](https://github.com/tongbanjie/PageGo/wiki)\n\n### 步骤一\n\n定义单页面的入口文件，并使用pagego进行初始化\n\nmain.js:\n```js\n  import PageGo from 'pagego'\n  import pagelist from './pagelist'\n  // 初始化\n  PageGo.init({\n    // pageList是页面组件的引用列表\n    // 步奏二会具体阐明\n    pageList: pagelist\n  }).then(function() {\n    // go方法的第一个参数对应要去前往的页面\n    // 它需要与pagelist中的key相对应\n    PageGo.go('index')\n  });\n```\n+ pagelist是各页面组件的引用列表，步骤二会进行说明\n+ 完成初始化后, 使用PageGo.go方法进入到你的第一个页面\n\n### 步骤二\n\n+ 为了使PageGo.go方法通过页面名称来转换页面视图，需要定义一个页面组件引用列表\n+ 你可以使用直接引用的方式来注册引用列表\n+ 你也可以使用webpack支持的Dynamic Imports方式或其他异步方式来按需加载你的页面\n\n```js\nimport Index from '../pages/Index'\nimport Second from '../pages/Second'\n\nexport default {\n  \"index\": Index,\n  \"detail\": Second\n}\n```\nPageGo在运行时将会用对应的key渲染对应的页面组件\n\n你还可以使用Dynamic Imports方式对页面组件进行按需加载\n```js\nexport default {\n  \"index\": function(){\n    // 通过动态import，webpack打包时会将此页面单独打成chunk包进行异步加载\n    return import(/* webpackChunkName: \"indexPage\" */\"../pages/Index\").then(_ =\u003e {\n      return _.default;\n    })\n  },\n  \"detail\": function(){\n    return import(/* webpackChunkName: \"detailPage\" */\"../pages/Detail\").then(_ =\u003e {\n      return _.default;\n    })\n  }\n}\n```\n\n### 步奏三\n\n定义页面组件:\n```js\nclass Index extends React.Component {\n\n  static defaultProps = {\n    PageTitle: '首页'\n  }\n  // 点击事件响应\n  goNext = () =\u003e {\n    PageGo.next('detail')\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        {/* \u003cdiv\u003e页头\u003c/div\u003e */}\n        \u003cdiv className='innerContainer'\u003e\n          Hello World!\n          \u003cbutton onClick={this.goNext}\u003eNext\u003c/button\u003e\n        \u003c/div\u003e\n        {/* \u003cdiv\u003e页尾\u003c/div\u003e */}\n      \u003c/div\u003e\n      );\n  }\n}\nexport default Index;\n```\n+ 页面组件中需要在defaultProps中定义PageTitle， PageTitle将设置为页面标题\n+ 如果要渲染并跳转到其他页面，使用PageGo.go或者PageGo.next就好\n+ pagego中的页面组件支持页头，页内容，页尾布局；页内容需要包裹在一个className为innerContainer的div中;\n+ 如果你需要定义页头，首页设置innerContainer的style的top值为页头高度，并将页头内容放在innerContainer前\n+ 如果你需要定义页尾，首页设置innerContainer的style的bottom值为页尾高度，并将页尾内容放在innerContainer后\n\n\n另外页面组件支持React Hook写法:\n```js\nfunction Index(props){\n  return (\n    \u003cdiv\u003e\n      {/* \u003cdiv\u003e页头\u003c/div\u003e */}\n      \u003cdiv className='innerContainer'\u003e\n        Hello World!\n      \u003c/div\u003e\n      {/* \u003cdiv\u003e页尾\u003c/div\u003e */}\n    \u003c/div\u003e\n    );\n}\n// 定义页面属性，同class组件的defaultProps\nIndex.hookPage = {\n  PageTitle: '首页'\n}\nexport default Index;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftongbanjie%2Fpagego","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftongbanjie%2Fpagego","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftongbanjie%2Fpagego/lists"}