{"id":28479,"date":"2024-11-25T12:25:57","date_gmt":"2024-11-25T04:25:57","guid":{"rendered":"https:\/\/fwq.ai\/blog\/28479\/"},"modified":"2024-11-25T12:25:57","modified_gmt":"2024-11-25T04:25:57","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e4%b9%8b%e5%ba%94%e7%94%a8%e5%8f%b7%e5%bc%80%e5%8f%91%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/28479\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u5e94\u7528\u53f7\u5f00\u53d1\u8be6\u89e3"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5c0f\u7a0b\u5e8f\uff08\u5e94\u7528\u53f7\uff09\u5f00\u53d1\u4f53\u9a8c\u7684\u76f8\u5173\u8d44\u6599,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b<\/p>\n

\u6628\u5929\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff08\u5e94\u7528\u53f7\uff09\u5185\u6d4b\u7684\u6d88\u606f\u628a\u6574\u4e2a\u6280\u672f\u793e\u533a\u70b8\u5f00\u4e86\u9505\uff0c\u6211\u4e5f\u5fcd\u4e0d\u4f4f\u8ddf\u4e86\u51e0\u6ce2\uff0c\u53ef\u60dc\u6ca1\u6709\u5185\u6d4b\u8d44\u683c\uff0c\u542c\u95fb\u7834\u89e3\u7248\u51fa\u6765\u4e86\uff0c\u4eca\u5929\u65e9\u4e0a\u5c31\u7740\u539f\u6765\u7684\u9879\u76ee\u8d44\u6e90\u8bd5\u5f00\u53d1\u4e86\u4e00\u4e0b\uff0c\u603b\u7ed3\u4e00\u4e0b\u4f53\u9a8c.<\/p>\n

\u603b\u4f53\u4f53\u9a8c<\/strong><\/p>\n

    \n
  1. \n

    \u5f00\u53d1\u6548\u7387\u9ad8\uff0c6\uff1a40\u5de6\u53f3\u7834\u89e3\u5b8cIDE\uff0c7:20\u5de6\u53f3\u70b9\u505a\u5b8c\u4e86\u9996\u9875\u548c\u5bfc\u822a\u680f\u7684\u5e03\u5c40\uff0c\u5fae\u4fe1\u628a\u89c9\u89c1\u7684\u5e03\u5c40\u90fd\u505a\u4e86\u5c01\u88c5\uff0c\u6bd4\u4f20\u7edf\u7684\u524d\u7aef\u5f00\u53d1\u6548\u7387\u9ad8\u3002<\/p>\n<\/li>\n

  2. \n

    \u524d\u7aef\u53ef\u4ee5\u5feb\u901f\u4e0a\u624b\uff1a\u719f\u7ec3\u7684\u524d\u7aef\u53ef\u4ee5\u5f88\u5feb\u4e0a\u624b\uff0c\u53ef\u80fd\u53ea\u8981\u4e00\u5c0f\u65f6\u8bfb\u6587\u6863\u7684\u65f6\u95f4\u52a0\u4e00\u4e2a\u5b98\u65b9\u7684\u4f8b\u5b50\u3002<\/p>\n<\/li>\n

  3. \n

    \u5f00\u53d1\u5de5\u5177\u96be\u7528\uff0c\u5f88\u591a\u76ee\u5f55\u7684\u64cd\u4f5c\u548cIDE\u5e38\u89c1\u7684\u683c\u5f0f\u5316\u4ee3\u7801\uff0chtml\u914d\u5bf9\u7b49\u529f\u80fd\u6682\u4e0d\u652f\u6301\u3002<\/p>\n<\/li>\n

  4. \n

    \u5f00\u53d1\u9650\u5236\u4e86\u5f88\u591a\u524d\u7aef\u5e38\u89c1\u7684Dom,window\u64cd\u4f5c\uff0c\u5f00\u53d1\u7684\u7075\u6d3b\u5ea6\u548c\u96be\u5ea6\u964d\u4f4e\u3002<\/p>\n<\/li>\n

  5. \n

    \u6211\u6ca1\u6709\u5185\u6d4b\u8d44\u683c\uff0c\u5c0f\u7a0b\u5e8f\u8fd8\u4e0d\u80fd\u4e0a\u4f20\u4f53\u9a8c\uff0c\u53ea\u80fd\u4e0b\u8f7d\u4ee3\u7801\u672c\u5730\u4f53\u9a8c\u3002<\/p>\n<\/li>\n<\/ol>\n

    \u672c\u6587\u4ee3\u7801\u653e\u5728github<\/p>\n

    \u4e0a\u622a\u56fe<\/p>\n

    \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u5e94\u7528\u53f7\u5f00\u53d1\u8be6\u89e3\u63d2\u56fe\"<\/p>\n

    \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u5e94\u7528\u53f7\u5f00\u53d1\u8be6\u89e3\u63d2\u56fe1\"<\/p>\n

    \u76f8\u5173\u8d44\u6e90<\/p>\n

    \u7834\u89e3\u7684IDE<\/p>\n

    \u5f00\u53d1\u8d44\u6e90\u96c6\u5408<\/p>\n

    IDE\u6280\u672f\u6808\uff1aNodeWebkit + React<\/strong><\/p>\n

    \u8fdb\u5165\u7684\u5b89\u88c5\u76ee\u5f55\uff1a\u5fae\u4fe1web\u5f00\u53d1\u8005\u5de5\u5177package.nwpp
    \u8fd9\u4e2a*.nw\u5c31\u80fd\u5341\u6709\u516b\u4e5d\u731c\u51fa\u662fNodeWebkit\u5c01\u88c5\u7684Web\u5e94\u7528\uff0c
    \u8be6\u770b\u4f9d\u8d56node_modules\u8bc1\u5b9e\u4e86\u731c\u60f3\u3002
    \u5728package.json “main”: “app\/html\/index.html”\u5b9a\u4e49\u4e86\u5165\u53e3\u3002<\/p>\n

    \u6240\u6709\u7684\u7ec4\u4ef6\u672c\u8d28\u662fReact\u7ec4\u4ef6<\/strong><\/p>\n

    \u5728\u5165\u53e3\u4e2d\u53ef\u4ee5\u770b\u5230\u76f4\u63a5\u5f15\u7528\u4e86React \u548cReact DOM<\/p>\n

    \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u5e94\u7528\u53f7\u5f00\u53d1\u8be6\u89e3\u63d2\u56fe2\"<\/p>\n

    <\/p>\n

    \"use strict\";\r\nfunction init() {\r\n  tools.Chrome = chrome;\r\n  var n = require(\"..\/dist\/lib\/react.js\"),\r\n    e = require(\"..\/dist\/lib\/react-dom.js\"),\r\n    i = require(\"..\/dist\/common\/loadInit\/init.js\"),\r\n    o = require(\"..\/dist\/components\/ContainController.js\"),\r\n    t = require(\"..\/dist\/common\/proxy\/startProxy.js\"),\r\n    r = require(\"..\/dist\/actions\/windowActions.js\"),\r\n    s = require(\"..\/dist\/actions\/webviewActions.js\"),\r\n    d = require(\"..\/dist\/stroes\/webviewStores.js\"),\r\n    u = require(\"..\/dist\/common\/log\/log.js\"), c = require(\"..\/dist\/common\/shortCut\/shortCut.js\"), l = global.appConfig.isDev;\r\n    \/\/...\r\n}<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \u770b\u4e00\u4e0b\u7ec4\u4ef6Dropdown\u7684\u5b9a\u4e49\uff0c\u8fd9\u4e0d\u5c31\u662f\u6211\u4eec\u719f\u6089\u7684React\u5728ES5\u4e2d\u521b\u5efa\u7ec4\u4ef6\u7684\u65b9\u6cd5\u5417\uff1f<\/p>\n
    <\/p>\n
    \"use strict\";\r\nvar React = require(\"..\/..\/lib\/react.js\"), Dropdown = React.createClass({\r\n  displayName: \"Dropdown\", render: function () {\r\n    return React.createElement(\"p\", {className: \"dropdown\"}, React.createElement(\"p\", {className: \"dropdown-item\"}, React.createElement(\"img\", {\r\n      src: \"https:\/\/mmrb.github.io\/avatar\/jf.jpg\",\r\n      alt: \"\",\r\n      className: \"dropdown-item-icon\"\r\n    }), React.createElement(\"p\", {className: \"dropdown-item-info\"}, React.createElement(\"p\", null, \"\u516c\u4f17\u53f7\u540d\u79f0\u5566\")), React.createElement(\"p\", {className: \"dropdown-item-extra\"}, React.createElement(\"img\", {\r\n      src: \"https:\/\/mmrb.github.io\/avatar\/jf.jpg\",\r\n      alt: \"\",\r\n      className: \"dropdown-item-extra-icon\"\r\n    }))), React.createElement(\"p\", {className: \"dropdown-item dropdown-item-active\"}, React.createElement(\"img\", {\r\n      src: \"https:\/\/mmrb.github.io\/avatar\/jf.jpg\",\r\n      alt: \"\",\r\n      className: \"dropdown-item-icon\"\r\n    }), React.createElement(\"p\", {className: \"dropdown-item-info\"}, React.createElement(\"p\", null, \"\u516c\u4f17\u53f7\u540d\u79f0\u5566\u516c\u4f17\u53f7\u540d\u79f0\u5566\u516c\u4f17\u53f7\u540d\u79f0\u5566\"))), React.createElement(\"p\", {className: \"dropdown-item\"}, React.createElement(\"img\", {\r\n      src: \"https:\/\/mmrb.github.io\/avatar\/jf.jpg\",\r\n      alt: \"\",\r\n      className: \"dropdown-item-icon\"\r\n    }), React.createElement(\"p\", {className: \"dropdown-item-info\"}, React.createElement(\"p\", null, \"\u516c\u4f17\u53f7\u540d\u79f0\u5566\"))), React.createElement(\"p\", {className: \"dropdown-item\"}, React.createElement(\"img\", {\r\n      src: \"https:\/\/mmrb.github.io\/avatar\/jf.jpg\",\r\n      alt: \"\",\r\n      className: \"dropdown-item-icon\"\r\n    }), React.createElement(\"p\", {className: \"dropdown-item-info\"}, React.createElement(\"p\", null, \"\u516c\u4f17\u53f7\u540d\u79f0\u5566\"))))\r\n  }\r\n});\r\nmodule.exports = Dropdown;<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \u5fae\u4fe1\u9650\u5236\u4e86\u5c0f\u7a0b\u5e8f\u7684\u5305\u5927\u5c0f<\/p>\n
    \u540c\u65f6\u5fae\u4fe1\u9650\u5236\u4e86\u5c0f\u7a0b\u5e8f\u5305\u7684\u5927\u5c0f\uff0c\u4e3a755kb,\u5bf9\u7f13\u5b58\u548c\u672c\u5730\u6587\u4ef6\u5e94\u8be5\u4e5f\u6709\u63a7\u5236\uff0c\u8fd9\u76f8\u5bf9\u539f\u751f\u5e94\u7528\u52a8\u4e0d\u52a8\u51e0\u5341\u5146\u4e0a\u767e\u5146\u7684\u5927\u5c0f\u6765\u8bf4\uff0c\u7edd\u5bf9\u662f\u4e00\u4e2a\u4eae\u70b9\uff0c\u7ed9\u7f51\u4e0a\u5f88\u591a\u4eba\u8bf4\u88c5\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u540c\u6837\u4f1a\u5360\u7528\u624b\u673a\u5b58\u50a8\u7684\u4eba\u4e00\u4e2a\u54cd\u4eae\u7684\u8033\u5149\u3002<\/p>\n
     \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u5e94\u7528\u53f7\u5f00\u53d1\u8be6\u89e3\u63d2\u56fe3\"<\/p>\n
    \u603b\u7ed3<\/strong><\/p>\n
    \u603b\u7684\u6765\u8bf4\uff0c\u5bf9\u524d\u7aef\u6765\u8bf4\u7edd\u5bf9\u662f\u4e00\u4e2a\u597d\u6d88\u606f\uff0c\u77ed\u671f\u5185\u524d\u7aef\u5f85\u9047\u53ef\u80fd\u4e0a\u6da8\uff0c\u4f46\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95e8\u69db\u8f83\u4f4e\uff08\u6bd4\u524d\u7aef\u7684\u4f4e\uff09\uff0c\u6709\u4e00\u90e8\u5f00\u53d1\u4eba\u5458\u662f\u9762\u5411\u5de5\u8d44\u7f16\u7a0b\uff0c\u968f\u7740\u5f00\u53d1\u4eba\u5458\u7684\u6d41\u52a8\uff0c\u957f\u671f\u8fd8\u662f\u4f1a\u548c\u5176\u5b83\u76f8\u5173\u7684\u7684\u6280\u672f\u5c97\u6301\u5e73\u3002\u6240\u4ee5\uff0c\u5c11\u5e74\uff0c\u4e0d\u8981\u6fc0\u52a8\uff0c\u8fd8\u8981\u662f\u628a\u57fa\u7840\u77e5\u8bc6\u6253\u624e\u5b9e\u3002<\/p>\n
     \u4ee5\u4e0a\u5c31\u662f\u5bf9\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u8d44\u6599\u6574\u7406\uff0c\u540e\u7eed\u7ee7\u7eed\u8865\u5145\u76f8\u5173\u8d44\u6599\uff0c\u8c22\u8c22\u5927\u5bb6\u5bf9\u672c\u7ad9\u7684\u652f\u6301\uff01<\/p>\n
    \u4ee5\u4e0a\u5c31\u662f\u5c0f\u7a0b\u5e8f\u4e4b\u5e94\u7528\u53f7\u5f00\u53d1\u8be6\u89e3\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5c0f\u7a0b\u5e8f\uff08\u5e94\u7528\u53f7\uff09\u5f00\u53d1\u4f53\u9a8c\u7684\u76f8\u5173\u8d44\u6599,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b \u6628\u5929\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff08\u5e94\u7528\u53f7\uff09\u5185\u6d4b\u7684\u6d88\u606f\u628a\u6574\u4e2a\u6280\u672f\u793e\u533a\u70b8\u5f00\u4e86\u9505\uff0c\u6211\u4e5f\u5fcd\u4e0d\u4f4f\u8ddf\u4e86\u51e0\u6ce2\uff0c\u53ef\u60dc\u6ca1\u6709\u5185\u6d4b\u8d44\u683c\uff0c\u542c\u95fb\u7834\u89e3\u7248\u51fa\u6765\u4e86\uff0c\u4eca\u5929\u65e9\u4e0a\u5c31\u7740\u539f\u6765\u7684\u9879\u76ee\u8d44\u6e90\u8bd5\u5f00\u53d1\u4e86\u4e00\u4e0b\uff0c\u603b\u7ed3\u4e00\u4e0b\u4f53\u9a8c. \u603b\u4f53\u4f53\u9a8c \u5f00\u53d1\u6548\u7387\u9ad8\uff0c6\uff1a40\u5de6\u53f3\u7834\u89e3\u5b8cIDE\uff0c7:20\u5de6\u53f3\u70b9\u505a\u5b8c\u4e86\u9996\u9875\u548c\u5bfc\u822a\u680f\u7684\u5e03\u5c40\uff0c\u5fae\u4fe1\u628a\u89c9\u89c1\u7684\u5e03\u5c40\u90fd\u505a\u4e86\u5c01\u88c5\uff0c\u6bd4\u4f20\u7edf\u7684\u524d\u7aef\u5f00\u53d1\u6548\u7387\u9ad8\u3002 \u524d\u7aef\u53ef\u4ee5\u5feb\u901f\u4e0a\u624b\uff1a\u719f\u7ec3\u7684\u524d\u7aef\u53ef\u4ee5\u5f88\u5feb\u4e0a\u624b\uff0c\u53ef\u80fd\u53ea\u8981\u4e00\u5c0f\u65f6\u8bfb\u6587\u6863\u7684\u65f6\u95f4\u52a0\u4e00\u4e2a\u5b98\u65b9\u7684\u4f8b\u5b50\u3002 \u5f00\u53d1\u5de5\u5177\u96be\u7528\uff0c\u5f88\u591a\u76ee\u5f55\u7684\u64cd\u4f5c\u548cIDE\u5e38\u89c1\u7684\u683c\u5f0f\u5316\u4ee3\u7801\uff0chtml\u914d\u5bf9\u7b49\u529f\u80fd\u6682\u4e0d\u652f\u6301\u3002 \u5f00\u53d1\u9650\u5236\u4e86\u5f88\u591a\u524d\u7aef\u5e38\u89c1\u7684Dom,window\u64cd\u4f5c\uff0c\u5f00\u53d1\u7684\u7075\u6d3b\u5ea6\u548c\u96be\u5ea6\u964d\u4f4e\u3002 \u6211\u6ca1\u6709\u5185\u6d4b\u8d44\u683c\uff0c\u5c0f\u7a0b\u5e8f\u8fd8\u4e0d\u80fd\u4e0a\u4f20\u4f53\u9a8c\uff0c\u53ea\u80fd\u4e0b\u8f7d\u4ee3\u7801\u672c\u5730\u4f53\u9a8c\u3002 \u672c\u6587\u4ee3\u7801\u653e\u5728github \u4e0a\u622a\u56fe \u76f8\u5173\u8d44\u6e90 \u7834\u89e3\u7684IDE \u5f00\u53d1\u8d44\u6e90\u96c6\u5408 IDE\u6280\u672f\u6808\uff1aNodeWebkit + React \u8fdb\u5165\u7684\u5b89\u88c5\u76ee\u5f55\uff1a\u5fae\u4fe1web\u5f00\u53d1\u8005\u5de5\u5177package.nwpp\u8fd9\u4e2a*.nw\u5c31\u80fd\u5341\u6709\u516b\u4e5d\u731c\u51fa\u662fNodeWebkit\u5c01\u88c5\u7684Web\u5e94\u7528\uff0c\u8be6\u770b\u4f9d\u8d56node_modules\u8bc1\u5b9e\u4e86\u731c\u60f3\u3002\u5728package.json “main”: “app\/html\/index.html”\u5b9a\u4e49\u4e86\u5165\u53e3\u3002 \u6240\u6709\u7684\u7ec4\u4ef6\u672c\u8d28\u662fReact\u7ec4\u4ef6 \u5728\u5165\u53e3\u4e2d\u53ef\u4ee5\u770b\u5230\u76f4\u63a5\u5f15\u7528\u4e86React \u548cReact DOM “use strict”; function init() {   tools.Chrome = chrome;   var n = require(“..\/dist\/lib\/react.js”),     e = require(“..\/dist\/lib\/react-dom.js”),     i = require(“..\/dist\/common\/loadInit\/init.js”),     o = require(“..\/dist\/components\/ContainController.js”),     t = require(“..\/dist\/common\/proxy\/startProxy.js”),     r = require(“..\/dist\/actions\/windowActions.js”),     s = require(“..\/dist\/actions\/webviewActions.js”),     d = require(“..\/dist\/stroes\/webviewStores.js”),     u = require(“..\/dist\/common\/log\/log.js”), c = require(“..\/dist\/common\/shortCut\/shortCut.js”), l = global.appConfig.isDev;     \/\/… } \u767b\u5f55\u540e\u590d\u5236 \u770b\u4e00\u4e0b\u7ec4\u4ef6Dropdown\u7684\u5b9a\u4e49\uff0c\u8fd9\u4e0d\u5c31\u662f\u6211\u4eec\u719f\u6089\u7684React\u5728ES5\u4e2d\u521b\u5efa\u7ec4\u4ef6\u7684\u65b9\u6cd5\u5417\uff1f “use strict”; var React = require(“..\/..\/lib\/react.js”), Dropdown = React.createClass({   displayName: “Dropdown”, render: function () {     return React.createElement(“p”, {className: “dropdown”}, React.createElement(“p”, {className: “dropdown-item”}, React.createElement(“img”, {       src: “https:\/\/mmrb.github.io\/avatar\/jf.jpg”,       alt: “”,       className: “dropdown-item-icon”     }), React.createElement(“p”, {className: “dropdown-item-info”}, React.createElement(“p”, null, “\u516c\u4f17\u53f7\u540d\u79f0\u5566”)), React.createElement(“p”, {className: “dropdown-item-extra”}, React.createElement(“img”, {       src: “https:\/\/mmrb.github.io\/avatar\/jf.jpg”,       alt: “”,       className: “dropdown-item-extra-icon”     }))), React.createElement(“p”, {className: “dropdown-item dropdown-item-active”}, React.createElement(“img”, {       src: “https:\/\/mmrb.github.io\/avatar\/jf.jpg”,       alt: “”,       className: “dropdown-item-icon”     }), React.createElement(“p”, {className: “dropdown-item-info”}, React.createElement(“p”, null, “\u516c\u4f17\u53f7\u540d\u79f0\u5566\u516c\u4f17\u53f7\u540d\u79f0\u5566\u516c\u4f17\u53f7\u540d\u79f0\u5566”))), React.createElement(“p”, {className: “dropdown-item”}, React.createElement(“img”, { […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-28479","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=28479"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28479\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=28479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=28479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=28479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}