{"id":15379680,"url":"https://github.com/yisar/fard2","last_synced_at":"2025-04-14T09:41:03.806Z","repository":{"id":57232829,"uuid":"191679283","full_name":"yisar/fard2","owner":"yisar","description":"🎅 fre 转小程序的新思路 ♂ learn once, write anywhere.","archived":false,"fork":false,"pushed_at":"2023-05-06T01:20:05.000Z","size":7291,"stargazers_count":113,"open_issues_count":6,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T23:32:41.352Z","etag":null,"topics":["fard","fre","mini-program","miniapp","react","taro","wxml"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/yisar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-13T02:48:06.000Z","updated_at":"2024-09-10T06:24:48.000Z","dependencies_parsed_at":"2024-10-22T00:26:01.524Z","dependency_job_id":null,"html_url":"https://github.com/yisar/fard2","commit_stats":{"total_commits":172,"total_committers":3,"mean_commits":"57.333333333333336","dds":"0.19186046511627908","last_synced_commit":"99f1d925c59778e285e0c5b11ec332141e734f73"},"previous_names":["132yse/fard"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Ffard2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Ffard2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Ffard2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Ffard2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yisar","download_url":"https://codeload.github.com/yisar/fard2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248438501,"owners_count":21103409,"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":["fard","fre","mini-program","miniapp","react","taro","wxml"],"created_at":"2024-10-01T14:19:40.393Z","updated_at":"2025-04-14T09:41:03.782Z","avatar_url":"https://github.com/yisar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://ae01.alicdn.com/kf/HTB1gg8cc8aE3KVjSZLeq6xsSFXaQ.jpg\" alt=\"fard logo\" width=\"200px\"\u003e\u003c/p\u003e\n\n# fard [![NPM version](https://img.shields.io/npm/v/fard.svg?style=flat-square)](https://npmjs.com/package/fard) [![NPM downloads](https://img.shields.io/npm/dt/fard.svg?style=flat-square)](https://npmjs.com/package/fard) [![QQ](https://img.shields.io/badge/qq.group-813783512-ff69b4.svg?maxAge=2592000\u0026style=flat-square)](https://jq.qq.com/?_wv=1027\u0026k=5Zyggbc)\n\n:snowman: [fre](https://github.com/132yse/fre) 转小程序的新思路 ♂ learn once, write anywhere.\n\n\u003e 工作日只处理 issue，节假日迭代~\n\n| Package                                                                            | Version                                                      | About          |\n|------------------------------------------------------------------------------------|--------------------------------------------------------------|----------------|\n| [`Fard`](https://github.com/132yse/fard)                                           | ![npm](https://img.shields.io/npm/v/fard.svg)                | fard core      |\n| [`fard-webpack-plugin`](https://github.com/132yse/fard/tree/master/webpack-plugin) | ![npm](https://img.shields.io/npm/v/fard-webpack-plugin.svg) | webpack plugin |\n\n## Usage\n\n```js\nimport { useState } from 'fre'\nimport { h, render } from 'fard'\nimport './index.styl'\n\nfunction App() {\n  const [count, setCount] = useState(0)\n  return (\n    \u003cview\u003e\n      \u003ctext\u003e{count}\u003c/text\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e+\u003c/button\u003e\n    \u003c/view\u003e\n  )\n}\n\nrender(\u003cApp /\u003e)\n```\n\n以上，由于小程序不支持 babel 和 stylus，所以仍然需要借助 webpack\n\n完整的 demo 用例在这里：[webpack-demo](https://github.com/132yse/fard/tree/master/demo/webpack)\n\n### hooks\n\n所有 fre 的 hooks API 都是支持的\n\nhooks 相关行为都发生在 fre 层，和小程序无关，不做赘述，请移步：[fre readme](https://github.com/132yse/fre)\n\n### api \u0026 context\n\nfard 提供 api 对象，用来抹平各个端的差异\n\n```js\nimport { h, render, api, context } from 'fard'\n\nfunction App() {\n  const toJack = () =\u003e {\n    api.navigateTo({\n      url: '../user/user?name=jack',\n    })\n    console.log(context)\n  }\n  return (\n    \u003cview\u003e\n      \u003cbutton onClick={toJack}\u003e+\u003c/button\u003e\n    \u003c/view\u003e\n  )\n}\n\nrender(\u003cApp /\u003e)\n```\n\n如上，api 等同于 wx、my、tt、swan，会根据环境自行更换命名空间\n\ncontext 是 this 实例\n\n### setup\n\n有时候，我们需要自定义一些方法，比如生命周期，和小程序的默认事件\n\n此时需要用到 render 的第二个参数\n\n```js\nconst setup = {\n  onReady() {\n    //生命周期\n    console.log('onReady……')\n  },\n  onShareAppMessage(res) {\n    //微信自带的方法\n    return {\n      title: '转发',\n      path: '/pages/index/index',\n      success(res) {\n        console.log('成功', res)\n      },\n    }\n  },\n}\n\nrender(\u003cApp /\u003e, setup)\n```\n\n注意，只有根组件和原生组件拥有生命周期，而内置的 fre 组件，请使用 `useEffect`\n\n### fard-webpack-plugin\n\n借助 webpack，还可以顺便做一些构建的工作，如 `生成 template bridge`、`复制小程序的配置文件`\n\n`fard-webpack-plugin` 是 fard 唯一一个额外的插件，用来包办 webpack 相关\n\n```js\nconst FardWebpackPlugin = require('fard-webpack-plugin')\n\nplugins: [\n  new FardWebpackPlugin(),\n]\n```\n\n### template bridge\n\n经过 fard-webpack-plugin 声称的 bridge.wxml 是用来桥接的文件，无需关注其内容\n\n我们只需要在我们每个 page 的 wxml 引用它即可：\n\n```xml\n\u003cfard vdom=\"{{vdom}}\"\u003e\n```\n\n写死的，不用修改\n\n## 原理\n\nfard 之所以称之为新思路，是因为它不同于其他编译型框架，它的原理和 RN 类似，是比较好的跨端方案\n\n如图：\n\n![](https://ae01.alicdn.com/kf/HTB1hkZ2Xlv0gK0jSZKbq6zK2FXax.jpg)\n\n它通过 bridge 来桥接 fre 和小程序的 vdom，是在小程序里跑 fre 而不是将 fre 编译成小程序\n\n另外，fard 还在 setData 之前做了一层 diff/防抖/压缩 三连，性能靠谱\n\n这里有一篇详细的文章：[fard：fre 转小程序的新思路](https://zhuanlan.zhihu.com/p/70363354)\n\n## How to contribute\n\nSince `fard` use monorepo managed by [lerna](https://github.com/lerna/lerna) you should install `lerna` at first.\n\n```bash\nnpm i -g lerna\n```\n\nThen install all dependencies:\n\n```bash\nlerna bootstrap\n```\n\nFor example run these commands if you'd like to run fard-demo with Webpack:\n\n```bash\ncd packages/demo-webpack\nyarn start\n```\n\n### Contributors\n\u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\n\u003ctd\u003e\u003ca href=\"https://github.com/132yse\" target=\"_blank\"\u003e\u003cimg width=\"100px\" src=\"https://avatars0.githubusercontent.com/u/12951461?s=300\u0026v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://github.com/malash\" target=\"_blank\"\u003e\u003cimg width=\"100px\" src=\"https://avatars2.githubusercontent.com/u/1812118?s=300\u0026v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://github.com/Jimexist\" target=\"_blank\"\u003e\u003cimg width=\"100px\" src=\"https://avatars2.githubusercontent.com/u/622789?s=300\u0026v=4\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\n### License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisar%2Ffard2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyisar%2Ffard2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisar%2Ffard2/lists"}