{"id":33373,"date":"2024-11-25T10:08:27","date_gmt":"2024-11-25T02:08:27","guid":{"rendered":"https:\/\/fwq.ai\/blog\/33373\/"},"modified":"2024-11-25T10:08:27","modified_gmt":"2024-11-25T02:08:27","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91%e5%88%9d%e6%ac%a1%e4%bd%93%e9%aa%8c","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/33373\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u521d\u6b21\u4f53\u9a8c"},"content":{"rendered":"<h2><span style=\"font-size: 14px\">\u7ec4\u4ef6\u5b9e\u4f8b<\/span><\/h2>\n<p>this.selectcomponent(&#8216;.classselector&#8217;)<\/p>\n<h2><span style=\"font-size: 14px\">\u5f15\u5165<\/span><\/h2>\n<h3><span style=\"font-size: 14px\">Taro<\/span><\/h3>\n<p><span style=\"font-size: 14px\"><strong>Taro\u4e2d\u5f15\u5165Vant Weapp\uff0c\u4e0d\u80fd\u76f4\u63a5\u901a\u8fc7\u7b2c\u4e09\u65b9<\/strong><strong>NPM\u5305\u7684\u5f62\u5f0f\u76f4\u63a5\u8c03\u7528\u3002<\/strong><\/span><\/p>\n<p>\u9700\u8981\u8fdb\u884c\u4ee5\u4e0b\u51e0\u6b65\uff1a<\/p>\n<ul>\n<li>\u5728github\u4e0a\u627e\u5230Vant-weapp\u4e0b\u8f7d\u6587\u4ef6\u5305\uff0c\u5c06\u5bf9\u5e94\u7684dist\u76ee\u5f55\u590d\u5236\u5230\u9879\u76ee\/src\/components\/vant-weapp\u76ee\u5f55\u4e0b\u3002<\/li>\n<li>\u5728Pages\u5bf9\u5e94\u6587\u4ef6\u7684config.usingComponents\u4e2d\uff0c\u914d\u7f6e\u6bcf\u4e2a\u9875\u9762\u6240\u9700\u8981\u7684\u7ec4\u4ef6\u3002(\u65e0\u6cd5\u5728app.js\u4e2d\u8fdb\u884c\u6240\u8c13\u7684\u5168\u5c40\u6ce8\u518c\u7ec4\u4ef6\u3002)<\/li>\n<\/ul>\n<pre>  config = {\n    navigationBarTitleText: '\u9996\u9875',\n    usingComponents: {\n      \"van-button\": \"..\/..\/components\/vant-weapp\/button\/index\",\n      \"van-popup\": \"..\/..\/components\/vant-weapp\/popup\/index\"\n    }\n  }<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<ul>\n<li>\u5728\u4f7f\u7528Vant-weapp\u7ec4\u4ef6\u540e\uff0ctaro\u6784\u5efa\u4f1a<strong>\u81ea\u52a8<\/strong>\u5c06\u76f8\u5e94\u7684\u7ec4\u4ef6\u590d\u5236\u4e00\u4efd\u5230dist\/components\u4e0b\uff0c\u800cVant-weapp\u7684\u7ec4\u4ef6\u8fd8\u4f9d\u8d56\u5de5\u5177\u5e93\/src\/components\/vant-weapp\/wxs\uff0c\u8be5\u5de5\u5177\u5e93taro<strong>\u4e0d\u4f1a\u81ea\u52a8<\/strong>\u590d\u5236\u5230dist\u4e2d\u3002\u6240\u4ee5\uff0c\u6211\u4eec\u9700\u8981\u4fee\u6539\/config\/index.js\u6587\u4ef6\u4e2d\u7684config.copy.patterns\uff0c\u8ba9\u5176\u5728\u7f16\u8bd1\u65f6\uff0c\u81ea\u52a8\u590d\u5236\u5230dist\u5bf9\u5e94\u76ee\u5f55\u4e0b\u3002<\/li>\n<\/ul>\n<pre>  copy: {\n    patterns: [\n      {\n        from: 'src\/components\/vant-weapp\/wxs\/',\n        to: 'dist\/components\/vant-weapp\/wxs\/'\n      }\n    ],\n    options: {\n    }\n  },<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<ul>\n<li>\u7531\u4e8eVant-weapp\u7684\u6837\u5f0f\u4f7f\u7528\u7684\u5355\u4f4d\u662fpx\uff0c\u6240\u4ee5\u4f1a\u88abtaro\u7f16\u8bd1\u6210rpx\uff0c\u4ee5\u4fbf\u5bf9\u5404\u4e2a\u8bbe\u914d\u8fdb\u884c\u9002\u914d\u3002\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539\/config\/index.js\u6587\u4ef6\u4e2d\u7684config.weapp.module.pxtransform.selectorBlackList\u4e0d\u8ba9\u5176\u5355\u4f4d\u8f6c\u6362\u3002<\/li>\n<\/ul>\n<pre>pxtransform: {\n  enable: true,\n  config: {\n\n  },\n  selectorBlackList: [\n    \/^.van-.*?$\/,  \/\/ \u8fd9\u91cc\u662fvant-weapp\u4e2dclassName\u7684\u5339\u914d\u6a21\u5f0f\n  ]\n},<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3><span style=\"font-size: 14px\">ec-canvas<\/span><\/h3>\n<blockquote><p>\n  ec-canvas\u662f ECharts \u7684\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7248\u672c\u3002\n<\/p><\/blockquote>\n<h3><span style=\"font-size: 14px\">iconfont<\/span><\/h3>\n<p>\u4e0b\u8f7d\u5230\u672c\u5730\uff0c\u4ec0\u4e48\u90fd\u4e0d\u8981\u6539\uff0c\u653e\u5230\u6307\u5b9a\u4f4d\u7f6e\u3002<\/p>\n<p>\u8be5\u8d44\u6e90\u4e0d\u4f1a\u81ea\u52a8\u62f7\u8d1d\u5230dist\/\u6587\u4ef6\u5939\u4e0b\uff0c\u6240\u4ee5\u9700\u8981\u901a\u8fc7\u4fee\u6539\u914d\u7f6e\u6587\u4ef6\u62f7\u8d1d\u3002<\/p>\n<pre>  copy: {\n    patterns: [\n      ...\n      {\n        from: 'src\/assets\/fonts\/',\n        to: 'dist\/assets\/fonts\/'\n      },\n      ...\n    ],\n    options: {\n    }\n  }<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u7136\u540e\uff0c\u5728app.js\u5165\u53e3\u6587\u4ef6\u4e2d\uff0cimport &#8216;.\/assets\/fonts\/iconfont.css&#8217;\u3002<\/p>\n<h2><span style=\"font-size: 14px\">\u81ea\u5b9a\u4e49\u7ec4\u4ef6<\/span><\/h2>\n<h3><span style=\"font-size: 14px\">\u7ec4\u4ef6\u5411\u5916\u4f20\u53c2<\/span><\/h3>\n<pre>this.triggerEvent(\n  'eventType',\n  {\n    key: value, \/\/\u8fd9\u91cc\u5b9a\u4e49\u7684\u952e\u503c\u5bf9\uff0c\u5728\u7236\u7ec4\u4ef6\u4e2d\uff0c\u901a\u8fc7args.detail.key\u83b7\u53d6\uff1b\n  },\n  {\n    bubbles: true, \/\/\u4e8b\u4ef6\u5c5e\u6027:\u662f\u5426\u5192\u6ce1\uff1b\n    capturePhase: true, \/\/\u4e8b\u4ef6\u5c5e\u6027\uff1a \u662f\u5426\u53ef\u6355\u83b7\uff1b\n  }\n)<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3><span style=\"font-size: 14px\">\u63d2\u69fdslot<\/span><\/h3>\n<blockquote><p>\n  \u7528\u6cd5\u540cVue\u3002\n<\/p><\/blockquote>\n<p><strong>\u6ce8\u610f<\/strong>\uff1a\u7ec4\u4ef6\u5185\u90e8\u5bf9slot\u5b9a\u4e49\u7684\u6837\u5f0f\uff0c\u4e0d\u8d77\u4f5c\u7528\u3002\u53ea\u80fd\u5728\u8c03\u7528\u7ec4\u4ef6\u7684\u4f4d\u7f6e\uff0c\u5bf9\u4f20\u5165slot\u5185\u7684\u7ed3\u6784\u8fdb\u884c\u6837\u5f0f\u5b9a\u4e49\u3002<\/p>\n<h2><span style=\"font-size: 14px\">\u5f00\u53d1\u969c\u788d<\/span><\/h2>\n<h3> <span style=\"font-size: 14px\">Taro<\/span><span style=\"font-size: 14px\">\u4e2d\u81ea\u5b9a\u4e49tabBar<\/span> <\/h3>\n<p>\u5207\u6362Tab\u65f6(app.jsx\u4e2dconfig.tabBar.custom = true)\uff0c\u9700\u8981\u5728\u5bf9\u5e94Tab\u9875componentDidShow\u751f\u547d\u5468\u671f\u4e2d\uff1a<\/p>\n<pre>if (typeof this.$scope.getTabBar === 'function' &amp;&amp; this.$scope.getTabBar()) {\n  this.$scope.getTabBar().setData({\n    selected: 1\n  })\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u6ce8\u610f\u662f<span style=\"font-size: 14px\"><strong>this.$scope.getTabBar<\/strong>\u3002<\/span><\/p>\n<h3><span style=\"font-size: 14px\">Canvas\u5f15\u8d77\u7684\u5c42\u7ea7\u8986\u76d6\u95ee\u9898<\/span><\/h3>\n<blockquote><p>\n  canvas\u662f\u7531\u5ba2\u6237\u7aef\u521b\u5efa\u7684\u539f\u751f\u7ec4\u4ef6\uff0c\u800c\u539f\u751f\u7ec4\u4ef6\u7684\u5c42\u7ea7\u662f\u6700\u9ad8\u7684\uff0c\u6240\u4ee5\u9875\u9762\u4e2d\u7684\u5176\u4ed6\u7ec4\u4ef6\u65e0\u8bba\u8bbe\u7f6e z-index \u4e3a\u591a\u5c11\uff0c\u90fd\u65e0\u6cd5\u76d6\u5728\u539f\u751f\u7ec4\u4ef6\u4e0a\u3002\n<\/p><\/blockquote>\n<p>\u6240\u4ee5\uff0c\u5982\u679ccanvas\u548c\u906e\u7f69\u4ea4\u4e92\u540c\u65f6\u5b58\u5728\u65f6\uff0ccanvas\u4f1a\u5728\u906e\u7f69\u7684\u4e0a\u5c42\u3002<\/p>\n<p>\u89e3\u51b3\u65b9\u6848\uff1a<\/p>\n<ul>\n<li>\u5728canvas\u5916\u5305\u88f9\u4e00\u5c42\u7ed3\u6784\uff0c\u901a\u8fc7\u6761\u4ef6(\u906e\u7f69\u7684\u5f00\u5173)\u6765\u8bbe\u7f6ecanvas\u5bb9\u5668\u7684hidden\u5c5e\u6027\u3002<\/li>\n<li>\n<p>\u901a\u8fc7cover-view\u3001cover-image\u81ea\u5b9a\u4e49\u7ec4\u4ef6\uff0ccover-view\u901a\u8fc7\u5b9a\u4f4d\uff0c\u63d0\u5347\u5c42\u7ea7\uff0c\u53ef\u4ee5\u9632\u6b62\u88abcanvas\u8986\u76d6\u3002<\/p>\n<ul>\n<li>\u56e0\u4e3a\u540e\u63d2\u5165\u7684\u539f\u751f\u7ec4\u4ef6\u53ef\u4ee5\u8986\u76d6\u4e4b\u524d\u7684\u539f\u751f\u7ec4\u4ef6\uff0c\u6240\u4ee5\uff0c\u8981\u6ce8\u610f\uff1a<strong>\u7ed3\u6784\u4e0a\uff0ccover-view\u4e00\u5b9a\u8981\u5728canvas\u540e\u8fb9<\/strong>\uff1b<\/li>\n<li>\u53ef\u4ee5\u901a\u8fc7flex\u548corder\u6765\u8c03\u6574\u5c55\u793a\u987a\u5e8f\u3002<\/li>\n<li>\u53ea\u6709<strong>\u6700\u5916\u5c42<\/strong>cover-view\u624d\u652f\u6301position: fixed\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>typeof<\/h3>\n<p>wx:if\u8bed\u53e5\u4e2d\uff0c\u4e0d\u80fd\u4f7f\u7528typeof\u8fd0\u7b97\u7b26\uff0c{{}}\u4e2d\u4e0d\u80fd\u4f7f\u7528typeof\u8fd0\u7b97\u7b26\uff0c\u53ea\u80fd\u5728wxs\u4e2d\u4f7f\u7528\u3002<\/p>\n<h3><span style=\"font-size: 14px\">data\u521d\u59cb\u5316\u8d4b\u503c<\/span><\/h3>\n<p>\u4e0d\u77e5\u9053data\u4ec0\u4e48\u65f6\u673a\u521d\u59cb\u5316\uff0c\u4f46\uff0c\u521d\u59cb\u5316data\u7684\u65f6\u5019\uff0c\u4e0d\u80fd\u4f7f\u7528this\u6307\u5411\u5f53\u524d\u7ec4\u4ef6\u5b9e\u4f8b\uff08\u8fd9\u662fthis === void 0\uff09\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0cdata\u521d\u59cb\u5316\u53ea\u80fd\u7ed9\u4e00\u4e2a<strong>\u5e38\u91cf<\/strong>\u3002<\/p>\n<p>\u9700\u8981properties\u6216methods\u6765\u521d\u59cb\u5316data\u7684\u65f6\u5019\uff0c\u53ea\u80fd\u5728\u751f\u547d\u5468\u671fattached\u4e2d\u901a\u8fc7this.setData\u66f4\u65b0data\u7684\u503c\u3002<\/p>\n<p>\u800c\u4e14\uff0c\u5982\u679cdata.fn = this.methodName\uff0cmethodName\u4e2d\u5982\u679c\u8c03\u7528\u4e86this\u5f15\u7528\uff0c\u8fd9\u65f6this\u6307\u5411\u7684\u662fdata\uff0c\u6240\u4ee5\u9700\u8981\u4f7f\u7528data.fn = this.methodName.bind(this)\u3002<\/p>\n<h3><span style=\"font-size: 14px\">vant-weapp\u5e93\u4e2d\u7684popup\u6837\u5f0f\u8bbe\u7f6e<\/span><\/h3>\n<p>popup\u5185\u5bb9\u7684\u5927\u5c0f\u4e0d\u662f\u7531\u5185\u5bb9\u6491\u8d77\u6765\u7684\uff0c\u9700\u8981\u901a\u8fc7popup\u7ec4\u4ef6\u7684custom-class\u5b9a\u4e49\u4e00\u4e2a\u7c7b\u540d\uff0c\u8bbe\u7f6ewidth\u3001height\u6765\u5b9a\u4e49\u5185\u5bb9\u7684\u5c3a\u5bf8\u3002<\/p>\n<h3><span style=\"font-size: 14px\">vant-tree-select\u4e8b\u4ef6\u89e6\u53d1<\/span><\/h3>\n<p>\u5728Taro\u4e2d\u7684\u4ee3\u7801\u98ce\u683c\u7c7bReact\uff0c\u800cvant-weapp\u5e93\u4e2d\u7684\u4ee3\u7801\u98ce\u683c\u4e3awxml\u548cwxs\u98ce\u683c\u3002React\u7ed1\u5b9a\u4e8b\u4ef6\u662f\u9a7c\u5cf0\u5f0f\uff0cwxml\u7ed1\u5b9a\u4e8b\u4ef6\u662f\u4f7f\u7528-\u8fde\u5b57\u7b26\u5206\u9694\u3002<\/p>\n<p>\u8fd9\u5c31\u9020\u6210\u4e86Taro\u4f7f\u7528vant-tree-select\u7ec4\u4ef6\u65f6\uff0conClickNav\u548conClickItem\u4e0d\u4f1a\u88abvant-tree-select\u8bc6\u522b\uff0c\u4e8b\u4ef6\u65e0\u6cd5\u89e6\u53d1\u3002<\/p>\n<p><strong>\u89e3\u51b3\u65b9\u6848<\/strong>\uff1a\u5bf9vant-tree-select\u8fdb\u884c\u4e8c\u6b21\u5c01\u88c5\uff0c\u4e8b\u4ef6\u539f\u59cb\u89e6\u53d1\u901a\u8fc7this.$triggerEvent\u4f20\u51fa\u9a7c\u5cf0\u5f0f\u7684\u4e8b\u4ef6\u7c7b\u578b\uff0c\u5728Taro\u4e2d\u8c03\u7528\u3002<\/p>\n<hr>\n<p>\u76ee\u524dvant-weapp0.5.20\u4e2d\uff0cvant-tree-select\u4e0d\u652f\u6301\u5355\u9009\u3002<\/p>\n<h3><span style=\"font-size: 14px\">props\u83b7\u53d6\u4e0d\u5230<\/span><\/h3>\n<h3><span style=\"font-size: 14px\">\u9a7c\u5cf0\u5f0f\u547d\u540d\u7684\u4e8b\u4ef6\u65e0\u6cd5\u89e6\u53d1[\u5fae\u4fe1\u5c0f\u7a0b\u5e8f]<\/span><\/h3>\n<p>\u6ce8\u610f@tarojs\/cli\u7684<strong>\u7248\u672c<\/strong>\uff0c\u5982\u6700\u521d\u7528\u76841.2.0\u7248\u672c\u5c31\u83b7\u53d6\u4e0d\u5230\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u4f20\u7684\u53c2\u6570\uff0c\u5347\u7ea7\u5230\u6700\u65b0\u72481.3.15\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n<p>\u6ce8\u610f@tarojs\/cli\u7684<strong>\u7248\u672c<\/strong>\uff0c\u5982\u6700\u521d\u7528\u76841.2.0\u7248\u672c\u65e0\u6cd5\u89e6\u53d1\u9a7c\u5cf0\u5f0f\u547d\u540d\u7684\u4e8b\u4ef6\uff0c\u5347\u7ea7\u5230\u6700\u65b0\u72481.3.15\uff0c\u4f7f\u7528onClick-nav\u5f62\u5f0f\u7ed1\u5b9a\u4e8b\u4ef6\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n<h3> <span style=\"font-size: 14px\">Taro<\/span><span style=\"font-size: 14px\">\u7f16\u8bd1\u5668\u65e0\u6cd5\u81ea\u52a8\u5c06\u7528\u5230\u7ec4\u4ef6\u7684<\/span><span style=\"font-size: 14px\">.wxs<\/span><span style=\"font-size: 14px\">\u6587\u4ef6\u79fb\u52a8\u5230<\/span><span style=\"font-size: 14px\">\/dist<\/span><span style=\"font-size: 14px\">\u76f8\u5e94\u76ee\u5f55\u4e0b<\/span> <\/h3>\n<p>\u624b\u52a8\u79fb\u52a8\u3002<\/p>\n<h3> <span style=\"font-size: 14px\">\u5728<\/span><span style=\"font-size: 14px\">\u5fae\u4fe1\u5f00\u53d1\u8005\u5de5\u5177<\/span><span style=\"font-size: 14px\">\u4e2d\u8fd0\u884c<\/span><span style=\"font-size: 14px\">Taro<\/span><span style=\"font-size: 14px\">\u4ee3\u7801\uff0c\u5982\u679c\u6709<\/span><span style=\"font-size: 14px\">async\/await<\/span><span style=\"font-size: 14px\">\uff0c\u5219regenerator is not defined\u3002<\/span> <\/h3>\n<p>\u5c06\u5fae\u4fe1\u5f00\u53d1\u8005\u5de5\u5177&#8211;&gt; \u53f3\u4e0a\u89d2\u8be6\u60c5&#8211;&gt; \u672c\u5730\u8bbe\u7f6e\u91cc\u7684\u914d\u7f6e\u5168\u90e8\u5173\u6389\uff0c\u5982ES6\u8f6cES5&#8230;\u3002<\/p>\n<h3><span style=\"font-size: 14px\">\u5b9a\u5236echarts\uff0c\u5f15\u5165\u62a5\u9519<\/span><\/h3>\n<p>echarts.js\u4e0d\u9700\u8981\u518d\u6b21\u7f16\u8bd1\uff0c\u914d\u7f6e\u4e2d\u65b0\u589e\u7f16\u8bd1\u65f6\u5ffd\u7565echarts.js\u3002<\/p>\n<pre>weapp: {\n    ...\n    compile: {\n      exclude: ['src\/echarts-for-weixin\/ec-canvas\/echarts.js']\n    }\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3><span style=\"font-size: 14px\">getState()\u83b7\u53d6Store\u5b58\u50a8\u7684\u6570\u636e<\/span><\/h3>\n<p><span style=\"font-size: 14px\">\u53ef\u4ee5\u5728<\/span><span style=\"font-size: 14px\">(dispatch, getState) =&gt; {<\/span><span style=\"font-size: 14px\">\u4e2d\u4f7f\u7528\u3002<\/span><\/p>\n<h3><span style=\"font-size: 14px\">\u771f\u673a\u8c03\u8bd5\u6b63\u5e38\uff0c\u9884\u89c8\/\u4f53\u9a8c\u7248\u7a7a\u767d\uff08\u53ea\u6709tabbar\uff09<\/span><\/h3>\n<p>\u5c06&#8221;\u672c\u5730\u8bbe\u7f6e&#8221;&#8211;&gt; &#8220;\u4e0a\u4f20\u65f6\u8fdb\u884c\u4ee3\u7801\u4fdd\u62a4&#8221;\u53d6\u6d88\u52fe\u9009\u3002<\/p>\n<h3> <span style=\"font-size: 14px\">Taro<\/span><span style=\"font-size: 14px\">\u4e2d<\/span><span style=\"font-size: 14px\">className=&#8221;<\/span><span style=\"font-size: 14px\">\u5355\u5f15\u53f7\u8d4b\u503c\u4e0d\u8d77\u4f5c\u7528\u3002<\/span> <\/h3>\n<p>className\u7684\u503c\u4f7f\u7528\u53cc\u5f15\u53f7\u5305\u88f9\u3002<\/p>\n<h3> <span style=\"font-size: 14px\">Taro<\/span><span style=\"font-size: 14px\">\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5185\u90e8\u4f7f\u7528<\/span><span style=\"font-size: 14px\">iconfont<\/span><span style=\"font-size: 14px\">\uff0c\u4e0d\u663e\u793a\u56fe\u6807<\/span> <\/h3>\n<p>\u53c2\u7167\u5916\u90e8\u6837\u5f0f\u7c7b\u3001\u5168\u5c40\u6837\u5f0f\u7c7b\u3002<br \/>\u6216\u8005\uff0c\u7ec4\u4ef6\u5355\u72ec\u5f15\u5165iconfont.css\u4e5f\u53ef\u4ee5\u3002<\/p>\n<h3><span style=\"font-size: 14px\">\u83b7\u53d6\u8def\u7531\u53c2\u6570<\/span><\/h3>\n<p>this.$router.params<\/p>\n<h3> <span style=\"font-size: 14px\">iconfont<\/span><span style=\"font-size: 14px\">\u5b57\u7b26\u4e32\u6e32\u67d3<\/span> <\/h3>\n<p>\u5982\u679c\u5c06\u5b57\u4f53\u505a\u53d8\u91cf\u4f7f\u7528\uff0c\u901a\u7528\u60c5\u51b5\u4e0b\u65e0\u6cd5\u6b63\u5e38\u663e\u793a\u3002<\/p>\n<ul>\n<li>\u9700\u8981\u5c06icon: [&#8216;\ue61d&#8217;, &#8216;\ue62c&#8217;]\u6539\u5199\u6210icon: [&#8216;ue61e&#8217;, &#8216;ue62d&#8217;]\u3002<\/li>\n<li> <\/li>\n<\/ul>\n<h3><span style=\"font-size: 14px\">\u4f7f\u7528Taro\/\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u540c\u6b65\u63a5\u53e3\uff0c\u4ecd\u5f02\u6b65\u8fd4\u56de\u7ed3\u679c<\/span><\/h3>\n<p>\u5982\u4f7f\u7528Taro.getStorageSync(&#8216;key&#8217;)\u83b7\u53d6\u7f13\u5b58\u6570\u636e\uff0c\u7ed3\u679c\u4ecd\u662f\u5f02\u6b65\u8fd4\u56de\u3002\u540c\u6b65\u63a5\u53e3\u9700\u8981\u7ed3\u5408await\u4f7f\u7528\uff0c\u624d\u662f\u771f\u6b63\u7684\u540c\u6b65\u3002<\/p>\n<h2><span style=\"font-size: 14px\">\u5206\u5305<\/span><\/h2>\n<h3><span style=\"font-size: 14px\">\u5305\u5927\u5c0f\u9650\u5236<\/span><\/h3>\n<ul>\n<li>\u5305\u8d85\u8fc72048KB\uff0c\u65e0\u6cd5\u4e0a\u4f20<\/li>\n<\/ul>\n<h3><span style=\"font-size: 14px\">\u5206\u5305\u64cd\u4f5c<\/span><\/h3>\n<ul>\n<li>\n<p>\u4e3b\u5305\u4e0d\u9700\u8981\u7279\u6b8a\u5904\u7406\u3002<\/p>\n<ul>\n<li>navigateTab\u5bfc\u822a\u7684\u9875\u9762\u5fc5\u987b\u5728\u4e3b\u5305\u4e2d\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u5206\u5305<\/p>\n<ul>\n<li>\u5206\u5305\u5728subPackages\u914d\u7f6e\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre>    pages: [\n      'pages\/login\/login',\n      'pages\/index\/index',\n      'pages\/manage\/manage',\n      'pages\/schedule\/schedule',\n      'pages\/inpidual\/inpidual'\n    ],\n    'subPackages': [\n      {\n         'root': 'pages-main',\n         name: 'main',\n          'pages': [\n            'acs\/acs',\n            'acs-setting\/acs-setting',\n            'setting-details\/setting-details',\n            'current-energy\/current-energy',\n            'history-energy\/history-energy',\n            'electricity\/electricity',\n            'runtime\/runtime',\n            'daily-usage\/daily-usage',\n            'onshift-record\/onshift-record',\n            'schedule-details\/schedule-details'\n        ]\n      },\n    ],<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3><span style=\"font-size: 14px\">\u4f2a\u52a8\u6001\u7ed1\u5b9a\u4e8b\u4ef6<\/span><\/h3>\n<pre>\/\/ index.wxml\n&lt;input\n    wx:if=\"{{metas.type == 'text' || metas.type == 'number' || metas.type == 'idcard' || metas.type == 'digit'}}\"\n    name=\"{{metas.name}}\"\n    type=\"{{metas.type}}\"\n    value=\"{{value}}\"\n    placeholder=\"{{metas.attrs.placeholder}}\"\n    bindchange=\"{{changeValidate}}\"\n    bindinput=\"{{inputValidate}}\"\n    bindblur=\"{{blurValidate}}\"\n\/&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<pre>\/\/ index.js\n\nComponent({\n    data: {\n        changeValidate: '',\n        inputValidate: '',\n        blurValidate: '',\n        eventType: 'input',\n        rules: '',\n        value: '',\n        isRequired: false,\n        validateState: '', \/\/['validating', 'success', 'error']\n        validateMessage: ''\n    },\n    observers: {\n        rules(newV) {\n            console.log('------=======')\n            this.setData({\n                [`${this.data.eventType}Validate`]: 'onBlurValidate'\n            })\n        }\n    },\n    methods: {\n        onBlurValidate (e) {\n            this.onValidate(e, rule)\n        },\n        onValidate (e, rule) {\n\n        }\n    }\n})<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3><span style=\"font-size: 14px\">\u83b7\u53d6\u7ec4\u4ef6\u5b9e\u4f8b<\/span><\/h3>\n<pre>refFormItem =  (node, idx) =&gt; {\n    if(this.formItem) {\n        !this.formItem.includes(node) &amp;&amp;    this.formItem.push(node)\n    } else {\n        this.formItem = [node]\n    }\n}\n...\nclearValidate  () {\n    console.log(this.formItem)\n    this.formItem.forEach(item =&gt; {\n        item.clearValidate()\n    })\n}\n...\nrender  () {\n    const { fieldMetas } = this.props;\n    return (\n        &lt;Form  className=\"form\"  onSubmit={this.submitForm.bind(this)}&gt;\n\n        {\n\n            fieldMetas.map((meta, idx) =&gt; {\n\n                return (\n                    &lt;form-item  ref={this.refFormItem} onValidate={this.gatherValidate.bind(this)} taroKey={meta.name} metas={meta} initialValue={this.findValue.call(this, meta.name)}&gt;\n                    &lt;\/form-item&gt;\n                )\n            })\n        }\n            &lt;Button  form-type=\"submit\"&gt;\u6309\u94ae&lt;\/Button&gt;\n            &lt;Button  onClick={this.clearValidate}&gt;\u6309\u94ae&lt;\/Button&gt;\n        &lt;\/Form&gt;\n    )\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3>styleIsolation: &nbsp;&#8220;apply-shared&#8221;<\/h3>\n<p>\u5bf9\u4e8eoptions.styleIsolation = &nbsp;&#8220;apply-shared&#8221;\u7684\u5e94\u7528\uff1a<br \/>\u5982\u679c\u662f\u7ec4\u4ef6\u5305\u88f9\u7ec4\u4ef6\uff0c\u5185\u90e8\u7ec4\u4ef6\u8bbe\u7f6e\u8be5\u914d\u7f6e\uff0c\u5916\u90e8\u7ec4\u4ef6\u7684\u6837\u5f0f\u4f9d\u65e7\u65e0\u6cd5\u5f71\u54cd\u5185\u90e8\u7ec4\u4ef6\uff0cPage()\u6216Component()\u6ce8\u518c\u7684<strong>\u9875\u9762\u7ea7\u7684\u6837\u5f0f\u624d\u80fd\u5f71\u54cd\u5230\u7ec4\u4ef6\u5185\u90e8\u6837\u5f0f<\/strong>\u3002<\/p>\n<p>\u63a8\u8350\u6559\u7a0b\uff1a\u300a\u300b<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u521d\u6b21\u4f53\u9a8c\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":"<p>\u7ec4\u4ef6\u5b9e\u4f8b this.selectcomponent(&#8216;.classselector&#8217;) \u5f15\u5165 Taro Taro\u4e2d\u5f15\u5165Vant Weapp\uff0c\u4e0d\u80fd\u76f4\u63a5\u901a\u8fc7\u7b2c\u4e09\u65b9NPM\u5305\u7684\u5f62\u5f0f\u76f4\u63a5\u8c03\u7528\u3002 \u9700\u8981\u8fdb\u884c\u4ee5\u4e0b\u51e0\u6b65\uff1a \u5728github\u4e0a\u627e\u5230Vant-weapp\u4e0b\u8f7d\u6587\u4ef6\u5305\uff0c\u5c06\u5bf9\u5e94\u7684dist\u76ee\u5f55\u590d\u5236\u5230\u9879\u76ee\/src\/components\/vant-weapp\u76ee\u5f55\u4e0b\u3002 \u5728Pages\u5bf9\u5e94\u6587\u4ef6\u7684config.usingComponents\u4e2d\uff0c\u914d\u7f6e\u6bcf\u4e2a\u9875\u9762\u6240\u9700\u8981\u7684\u7ec4\u4ef6\u3002(\u65e0\u6cd5\u5728app.js\u4e2d\u8fdb\u884c\u6240\u8c13\u7684\u5168\u5c40\u6ce8\u518c\u7ec4\u4ef6\u3002) config = { navigationBarTitleText: &#8216;\u9996\u9875&#8217;, usingComponents: { &#8220;van-button&#8221;: &#8220;..\/..\/components\/vant-weapp\/button\/index&#8221;, &#8220;van-popup&#8221;: &#8220;..\/..\/components\/vant-weapp\/popup\/index&#8221; } } \u767b\u5f55\u540e\u590d\u5236 \u5728\u4f7f\u7528Vant-weapp\u7ec4\u4ef6\u540e\uff0ctaro\u6784\u5efa\u4f1a\u81ea\u52a8\u5c06\u76f8\u5e94\u7684\u7ec4\u4ef6\u590d\u5236\u4e00\u4efd\u5230dist\/components\u4e0b\uff0c\u800cVant-weapp\u7684\u7ec4\u4ef6\u8fd8\u4f9d\u8d56\u5de5\u5177\u5e93\/src\/components\/vant-weapp\/wxs\uff0c\u8be5\u5de5\u5177\u5e93taro\u4e0d\u4f1a\u81ea\u52a8\u590d\u5236\u5230dist\u4e2d\u3002\u6240\u4ee5\uff0c\u6211\u4eec\u9700\u8981\u4fee\u6539\/config\/index.js\u6587\u4ef6\u4e2d\u7684config.copy.patterns\uff0c\u8ba9\u5176\u5728\u7f16\u8bd1\u65f6\uff0c\u81ea\u52a8\u590d\u5236\u5230dist\u5bf9\u5e94\u76ee\u5f55\u4e0b\u3002 copy: { patterns: [ { from: &#8216;src\/components\/vant-weapp\/wxs\/&#8217;, to: &#8216;dist\/components\/vant-weapp\/wxs\/&#8217; } ], options: { } }, \u767b\u5f55\u540e\u590d\u5236 \u7531\u4e8eVant-weapp\u7684\u6837\u5f0f\u4f7f\u7528\u7684\u5355\u4f4d\u662fpx\uff0c\u6240\u4ee5\u4f1a\u88abtaro\u7f16\u8bd1\u6210rpx\uff0c\u4ee5\u4fbf\u5bf9\u5404\u4e2a\u8bbe\u914d\u8fdb\u884c\u9002\u914d\u3002\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539\/config\/index.js\u6587\u4ef6\u4e2d\u7684config.weapp.module.pxtransform.selectorBlackList\u4e0d\u8ba9\u5176\u5355\u4f4d\u8f6c\u6362\u3002 pxtransform: { enable: true, config: { }, selectorBlackList: [ \/^.van-.*?$\/, \/\/ \u8fd9\u91cc\u662fvant-weapp\u4e2dclassName\u7684\u5339\u914d\u6a21\u5f0f ] }, [&hellip;]<\/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-33373","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33373","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=33373"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33373\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=33373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=33373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=33373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}