{"id":34266,"date":"2024-11-25T16:17:37","date_gmt":"2024-11-25T08:17:37","guid":{"rendered":"https:\/\/fwq.ai\/blog\/34266\/"},"modified":"2024-11-25T16:17:37","modified_gmt":"2024-11-25T08:17:37","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e8%a7%86%e5%9b%be%e5%b1%82%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/34266\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3"},"content":{"rendered":"

\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u5e26\u6765\u4e86\u5173\u4e8e\u7684\u76f8\u5173\u77e5\u8bc6\uff0c\u5176\u4e2d\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5173\u4e8e\u89c6\u56fe\u5c42\u7684\u76f8\u5173\u95ee\u9898\uff0c\u89c6\u56fe\u5c42\u8d1f\u8d23\u5c06\u903b\u8f91\u5c42\u7684\u6570\u636e\u663e\u793a\u5728\u9875\u9762\u4e0a\uff0c\u540c\u65f6\u5c06\u89c6\u56fe\u5c42\u7684\u4e8b\u4ef6\u53d1\u9001\u7ed9\u903b\u8f91\u5c42\uff0c\u4e0b\u9762\u4e00\u8d77\u6765\u770b\u4e00\u4e0b\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u5e2e\u52a9\u3002<\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe\"<\/p>\n

\u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011<\/p>\n

\u5c0f\u7a0b\u5e8f\u6846\u67b6\u7684\u89c6\u56fe\u5c42\u7531WXML\uff08WeiXin Markup Language\uff0c\u5fae\u4fe1\u6807\u8bb0\u8bed\u8a00\uff09\u4e0eWXSS\uff08WeiXin Style Sheet\uff0c\u5fae\u4fe1\u6837\u5f0f\u8868\uff09\u7f16\u5199\uff0c\u7531\u7ec4\u4ef6\u6765\u8fdb\u884c\u5c55\u793a\u3002\u89c6\u56fe\u5c42\u8d1f\u8d23\u5c06\u903b\u8f91\u5c42\u7684\u6570\u636e\u663e\u793a\u5728\u9875\u9762\u4e0a\uff0c\u540c\u65f6\u5c06\u89c6\u56fe\u5c42\u7684\u4e8b\u4ef6\u53d1\u9001\u7ed9\u903b\u8f91\u5c42\u3002WXML\u7528\u6765\u63cf\u8ff0\u9875\u9762\u7684\u7ed3\u6784\uff0cWXSS\u7528\u4e8e\u63cf\u8ff0\u9875\u9762\u7684\u6837\u5f0f\uff0c\u7ec4\u4ef6\u662f\u89c6\u56fe\u7684\u57fa\u672c\u7ec4\u6210\u5355\u5143\u3002\u8fd9\u4e09\u8005\u7684\u5173\u7cfb\u53ef\u4ee5\u7c7b\u6bd4\u4e3aHTML\uff0cCSS\u4e0eHTML\u91cc\u9762\u5404\u79cd\u6807\u7b7e\u7684\u5173\u7cfb\u3002\u9664\u4e86\u8fd9\u4e09\u8005\u4e4b\u5916\uff0c\u8fd8\u6709\u4e00\u5957\u7528\u4e8e\u5c0f\u7a0b\u5e8f\u7684\u811a\u672c\u8bed\u8a00\u2014\u2014WXS\uff08WeiXin Script\uff09\u3002WXS\u548cWXML\u7ed3\u5408\u8d77\u6765\uff0c\u53ef\u4ee5\u6784\u5efa\u51fa\u9875\u9762\u7ed3\u6784\u3002<\/p>\n

\u4e00\u3001WXML<\/h2>\n

1\u3001\u6570\u636e\u7ed1\u5b9a<\/h2>\n

\uff081\uff09\u7b80\u5355\u7ed1\u5b9a<\/span><\/h2>\n

\u6570\u636e\u7ed1\u5b9a\u7684\u57fa\u672c\u539f\u5219\uff1a
1\uff09\u5728 data \u4e2d\u5b9a\u4e49\u9875\u9762\u7684\u6570\u636e\uff1a\u5728\u9875\u9762\u5bf9\u5e94\u7684 .js \u6587\u4ef6\u4e2d\uff0c\u628a\u6570\u636e\u5b9a\u4e49\u5230 data \u5bf9\u8c61\u4e2d\u5373\u53ef\u3002<\/p>\n

Page({\n  data:{\n    \/\/\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u6570\u636e\n    info: 'init data ' ,\n    \/\/\u6570\u7ec4\u7c7b\u578b\u7684\u6570\u636e\n    msgList: [{msg: 'hello'}\uff0c{msg: \"world '}]\n  }\n})<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2\uff09\u5728 WXML \u4e2d\u4f7f\u7528\u6570\u636e\uff1a\u628adata\u4e2d\u7684\u6570\u636e\u7ed1\u5b9a\u5230\u9875\u9762\u4e2d\u6e32\u67d3\uff0c\u4f7f\u7528 Mustache \u8bed\u6cd5\uff08\u53cc\u5927\u62ec\u53f7\uff09\u5c06\u53d8\u91cf\u5305\u8d77\u6765\u5373\u53ef\u3002\u8bed\u6cd5\u683c\u5f0f\u4e3a\uff1a<\/p>\n
<view>{{\u8981\u7ed1\u5b9a\u7684\u6570\u636e\u540d\u79f0}}<\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
Mustache \u8bed\u6cd5\u7684\u4e3b\u8981\u5e94\u7528\u573a\u666f\u5982\u4e0b\uff1a
 \u2460\u5185\u5bb9\u3002\u76f4\u63a5\u5728\u9875\u9762\u4e0a\u663e\u793a\u6570\u636e\u5185\u5bb9\u3002
 \u2461\u7ec4\u4ef6\u5c5e\u6027\u3002\u7528\u540e\u7aef\u53d8\u91cf\u6765\u8bbe\u7f6e\u524d\u7aef\u90e8\u5206\u7ec4\u4ef6\u7684\u5c5e\u6027\uff0c\u6ce8\u610f\u7531\u53cc\u5927\u62ec\u53f7\u62ec\u8d77\u6765\u7684\u53d8\u91cf\u9700\u8981\u5728\u5c5e\u6027\u7684\u53cc\u5f15\u53f7\u5185\u3002
 \u2462\u63a7\u5236\u5c5e\u6027\u3002\u7528\u540e\u7aef\u53d8\u91cf\u6765\u63a7\u5236\u524d\u7aef\u7ec4\u4ef6\u7684\u663e\u793a\u6548\u679c\uff0c\u6ce8\u610f\u7531\u53cc\u5927\u62ec\u53f7\u62ec\u8d77\u6765\u7684\u53d8\u91cf\u9700\u8981\u5728\u5c5e\u6027\u7684\u53cc\u5f15\u53f7\u5185\u3002
 \u2463\u5173\u952e\u5b57\u3002\u4e3b\u8981\u7528\u4e8e\u903b\u8f91\u5224\u65ad\u3002<\/p>\n
\uff082\uff09\u8fd0\u7b97<\/h3>\n
\u2460\u4e09\u5143\u8fd0\u7b97\u3002\u53ef\u4ee5\u5728\u53cc\u5927\u62ec\u53f7\u5185\u8fdb\u884c\u4e09\u5143\u8fd0\u7b97\u3002
 .js\u4e2d\uff1a<\/p>\n
Page({\n  data: {\n    randomNum:Math.random()*10\n  }\n})<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
.wxml\u4e2d\uff1a<\/p>\n
<view>{{randomNum>=5?'\u6570\u5b57\u5927\u4e8e\u7b49\u4e8e5':'\u6570\u5b57\u5c0f\u4e8e5'}}<\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u2461\u7b97\u672f\u8fd0\u7b97\u3002\u5728\u53cc\u5927\u62ec\u53f7\u5185\uff0c\u53ef\u4ee5\u8fdb\u884c\u57fa\u672c\u7684\u7b97\u672f\u8fd0\u7b97\uff0c\u4f1a\u76f4\u63a5\u663e\u793a\u8fd0\u7b97\u540e\u7684\u7ed3\u679c\u3002
 \u2462\u903b\u8f91\u5224\u65ad\u3002\u5728\u53cc\u5927\u62ec\u53f7\u5185\uff0c\u53ef\u4ee5\u8fdb\u884c\u903b\u8f91\u8fd0\u7b97\uff0c\u8fd4\u56deboolean\u7c7b\u578b\u7684true\u6216false\uff0c\u53ef\u4ee5\u7528\u4e8e\u67d0\u4e9b\u5c5e\u6027\u7684\u63a7\u5236\u3002
 \u2463\u5b57\u7b26\u4e32\u8fd0\u7b97\u3002\u5728\u53cc\u5927\u62ec\u53f7\u5185\uff0c\u53ef\u4ee5\u505a\u5b57\u7b26\u4e32\u7684\u62fc\u63a5\u8fd0\u7b97\u3002
 \u2464\u6570\u636e\u8def\u5f84\u8fd0\u7b97\u3002\u5bf9\u4e8e\u6570\u7ec4\u548cJSON\u5bf9\u8c61\u7c7b\u578b\u7684\u6570\u636e\uff0c\u5728\u53cc\u5927\u62ec\u53f7\u5185\u53ef\u4ee5\u901a\u8fc7\u7d22\u5f15\u7684\u65b9\u5f0f\u53d6\u5176\u503c\u3002<\/p>\n
\uff083\uff09\u7ec4\u5408<\/h3>\n
\u2460\u6570\u7ec4
 \u2461\u5bf9\u8c61<\/p>\n
2.\u5217\u8868\u6e32\u67d3<\/h2>\n
\uff081\uff09wx:for<\/h3>\n
\u901a\u8fc7 wx:for \u53ef\u4ee5\u6839\u636e\u6307\u5b9a\u7684\u6570\u7ec4\uff0c\u5faa\u73af\u6e32\u67d3\u91cd\u590d\u7684\u7ec4\u4ef6\u7ed3\u6784\uff0c\u8bed\u6cd5\u793a\u4f8b\u5982\u4e0b\uff1a
 .js\u4e2d\uff1a<\/p>\n
Page({\n  data: {\n    array:['a','b','c']\n  }\n}\uff09<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
.wxml\u4e2d\uff1a<\/p>\n
<view wx:for=\"{{array}}\">\n \u7d22\u5f15\u662f\uff1a{{index}}\uff0c\u5f53\u524d\u9879\u662f\uff1a{{item}}\n<\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u6548\u679c\u5982\u56fe\uff1a
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe1\"
 \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5f53\u524d\u5faa\u73af\u9879\u7684\u7d22\u5f15\u7528 index \u8868\u793a\uff1b\u5f53\u524d\u5faa\u73af\u9879\u7528 item \u8868\u793a\u3002<\/p>\n
\uff082\uff09\u624b\u52a8\u6307\u5b9a\u7d22\u5f15\u548c\u5f53\u524d\u9879\u7684\u53d8\u91cf\u540d*<\/h3>\n
    \n
  • \u4f7f\u7528 wx:for-index \u53ef\u4ee5\u6307\u5b9a\u5f53\u524d\u5faa\u73af\u9879\u7684\u7d22\u5f15\u7684\u53d8\u91cf\u540d<\/li>\n
  • \u4f7f\u7528 wx:for-item \u53ef\u4ee5\u6307\u5b9a\u5f53\u524d\u9879\u7684\u53d8\u91cf\u540d
     .wxml\u4e2d\uff1a<\/li>\n<\/ul>\n
    <view wx:for=\"{{array}}\" wx:for-index=\"idx\" wx:for-item=\"itemName\">\n \u7d22\u5f15\u662f\uff1a{{idx}}\uff0c\u5f53\u524d\u9879\u662f\uff1a{{itemName}}\n<\/view><\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \u6548\u679c\u5982\u56fe\uff1a
    \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe2\"<\/p>\n
    \uff083\uff09wx:key<\/h3>\n
    \u7c7b\u4f3c\u4e8e Vue \u5217\u8868\u6e32\u67d3\u4e2d\u7684 :key\uff0c\u5c0f\u7a0b\u5e8f\u5728\u5b9e\u73b0\u5217\u8868\u6e32\u67d3\u65f6\uff0c\u4e5f\u5efa\u8bae\u4e3a\u6e32\u67d3\u51fa\u6765\u7684\u5217\u8868\u9879\u6307\u5b9a\u552f\u4e00\u7684 key \u503c\uff0c\u4ece\u800c\u63d0\u9ad8\u6e32\u67d3\u7684\u6548\u7387\uff0c\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a
     .js\u4e2d\uff1a<\/p>\n
    Page({\n  data: {\n    userList:[\n      {id:1,name:'\u51a0\u519b'},\n      {id:2,name:'\u4e9a\u519b'},\n      {id:3,name:'\u5b63\u519b'}\n    ]\n  }\n})<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    .wxml\u4e2d\uff1a<\/p>\n
    <view wx:for=\"{{userList}}\" wx:key=\"id\">{{item.name}}<\/view><\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \u6548\u679c\u5982\u56fe\uff1a
    \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe3\"
     wx:key\u7684\u503c\u4ee5\u5982\u4e0b\u4e24\u79cd\u5f62\u5f0f\u63d0\u4f9b\uff1a
     1\uff09\u5b57\u7b26\u4e32\u3002\u4ee3\u8868\u5728wx:for\u5faa\u73af\u7684\u6570\u7ec4\u4e2d\u67d0\u4e00\u9879\u7684\u67d0\u4e2a\u5c5e\u6027\uff0c\u8be5\u5c5e\u6027\u7684\u503c\u9700\u8981\u662f\u5217\u8868\u4e2d\u552f\u4e00\u7684\u5b57\u7b26\u4e32\u6216\u8005\u6570\u5b57\uff0c\u4e14\u4e0d\u80fd\u52a8\u6001\u6539\u53d8\u3002
     2\uff09\u4fdd\u7559\u5173\u952e\u5b57*this\u3002\u4ee3\u8868\u5728wx:for\u5faa\u73af\u4e2d\u7684\u67d0\u4e00\u9879\u672c\u8eab\uff0c\u8fd9\u79cd\u8868\u793a\u9700\u8981\u8fd9\u4e00\u9879\u672c\u8eab\u662f\u4e00\u4e2a\u552f\u4e00\u7684\u5b57\u7b26\u4e32\u6216\u8005\u6570\u5b57\u3002<\/p>\n
    3.\u6761\u4ef6\u6e32\u67d3<\/h2>\n
    \uff081\uff09wx:if<\/h3>\n
    \u5728\u5c0f\u7a0b\u5e8f\u4e2d\uff0c\u4f7f\u7528 wx:if=”{ {condition}}” \u6765\u5224\u65ad\u662f\u5426\u9700\u8981\u6e32\u67d3\u8be5\u4ee3\u7801\u5757\uff0c\u4e5f\u53ef\u4ee5\u7528 wx:elif \u548c wx:else \u6765\u6dfb\u52a0 else \u5224\u65ad\u3002\u793a\u4f8b\u5982\u4e0b\uff1a
     .js\u4e2d\uff1a<\/p>\n
    Page({\n  data: {\n    type:1\n  }\n})<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    .wxml\u4e2d\uff1a<\/p>\n
    <view wx:if=\"{{type === 1}}\">\u7537<\/view>\n<view wx:elif=\"{{type === 2}}\">\u5973<\/view>\n<view wx:else>\u4fdd\u5bc6<\/view><\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \uff082\uff09\u7ed3\u5408 \u4f7f\u7528 wx:if <\/h3>\n
    \u5982\u679c\u8981\u4e00\u6b21\u6027\u63a7\u5236\u591a\u4e2a\u7ec4\u4ef6\u7684\u5c55\u793a\u4e0e\u9690\u85cf\uff0c\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e2a \u6807\u7b7e\u5c06\u591a\u4e2a\u7ec4\u4ef6\u5305\u88c5\u8d77\u6765\uff0c\u5e76\u5728 \u6807\u7b7e\u4e0a\u4f7f\u7528 wx:if \u63a7\u5236\u5c5e\u6027\uff0c\u793a\u4f8b\u5982\u4e0b\uff1a <\/p>\n
    <block wx:if=\"{{true}}\">\n <view>view1<\/view>\n <view>view2<\/view>\n<\/block><\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \u6ce8\u610f\uff1a \u5e76\u4e0d\u662f\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u5b83\u53ea\u662f\u4e00\u4e2a\u5305\u88f9\u6027\u8d28\u7684\u5bb9\u5668\uff0c\u4e0d\u4f1a\u5728\u9875\u9762\u4e2d\u505a\u4efb\u4f55\u6e32\u67d3\u3002 <\/p>\n
    \uff083\uff09hidden<\/h3>\n
    \u5728\u5c0f\u7a0b\u5e8f\u4e2d\uff0c\u76f4\u63a5\u4f7f\u7528 hidden=”{ { condition }}” \u4e5f\u80fd\u63a7\u5236\u5143\u7d20\u7684\u663e\u793a\u4e0e\u9690\u85cf\uff1a<\/p>\n
    <view hidden=\"{{flag}}\">true\u9690\u85cf\uff0cfalse\u663e\u793a<\/view><\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \uff084\uff09wx:if \u5bf9\u6bd4 hidden<\/h3>\n
    1\uff09\u8fd0\u884c\u65b9\u5f0f\u4e0d\u540c\uff1a
     wx:if \u4ee5\u52a8\u6001\u521b\u5efa\u548c\u79fb\u9664\u5143\u7d20\u7684\u65b9\u5f0f\uff0c\u63a7\u5236\u5143\u7d20\u7684\u5c55\u793a\u4e0e\u9690\u85cf\u3002
     hidden \u4ee5\u5207\u6362\u6837\u5f0f\u7684\u65b9\u5f0f\uff08display: none\/block;\uff09\uff0c\u63a7\u5236\u5143\u7d20\u7684\u663e\u793a\u4e0e\u9690\u85cf\u3002
     2\uff09\u4f7f\u7528\u5efa\u8bae\uff1a
     \u9891\u7e41\u5207\u6362\u65f6\uff0c\u5efa\u8bae\u4f7f\u7528 hidden\u3002
     \u63a7\u5236\u6761\u4ef6\u590d\u6742\u65f6\uff0c\u5efa\u8bae\u4f7f\u7528 wx:if \u642d\u914d wx:elif\u3001wx:else \u8fdb\u884c\u5c55\u793a\u4e0e\u9690\u85cf\u7684\u5207\u6362\u3002<\/p>\n
    4.\u4e8b\u4ef6<\/h2>\n
    \u4e8b\u4ef6\u662f\u89c6\u56fe\u5c42\u5230\u903b\u8f91\u5c42\u7684\u901a\u4fe1\u65b9\u5f0f\uff0c\u5b83\u53ef\u4ee5\u5c06\u7528\u6237\u7684\u884c\u4e3a\u53cd\u9988\u5230\u903b\u8f91\u5c42\u8bb2\u884c\u5904\u7406\u3002\u4e8b\u4ef6\u4e00\u822c\u7ed1\u5b9a\u5728\u7ec4\u4ef6\u4e0a\uff0c\u5f53\u8bbe\u5b9a\u76d1\u542c\u7684\u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\uff0c\u89c6\u56fe\u5c42\u4f1a\u5c06\u643a\u5e26\u4e86id\u3001dataset\u3001touches\u7b49\u4fe1\u606f\u7684\u4e8b\u4ef6\u5bf9\u8c61\u53d1\u9001\u5230\u903b\u8f91\u5c42\u4e2d\uff0c\u6b64\u65f6\u6846\u67b6\u5c31\u4f1a\u6267\u884c\u903b\u8f91\u5c42\u4e2d
     \u5bf9\u5e94\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u6765\u54cd\u5e94\u7528\u6237\u7684\u64cd\u4f5c\u3002<\/p>\n
    \u4e8b\u4ef6\u5206\u4e3a\u5192\u6ce1\u4e8b\u4ef6\u548c\u975e\u5192\u6ce1\u4e8b\u4ef6\u3002<\/p>\n
      \n
    • \u5192\u6ce1\u4e8b\u4ef6\uff1a\u5f53\u4e00\u4e2a\u7ec4\u4ef6\u4e0a\u7684\u4e8b\u4ef6\u88ab\u89e6\u53d1\u540e\uff0c\u8be5\u4e8b\u4ef6\u4f1a\u5411\u7236\u8282\u70b9\u4f20\u9012\u3002<\/li>\n
    • \u975e\u5192\u6ce1\u4e8b\u4ef6\uff1a\u5f53\u4e00\u4e2a\u7ec4\u4ef6\u4e0a\u7684\u4e8b\u4ef6\u88ab\u89e6\u53d1\u540e\uff0c\u8be5\u4e8b\u4ef6\u4e0d\u4f1a\u5411\u7236\u8282\u70b9\u4f20\u9012\u3002<\/li>\n<\/ul>\n
      \uff081\uff09\u4e8b\u4ef6\u7684\u4f7f\u7528\u65b9\u5f0f<\/h3>\n
      .wxml\u4e2d\uff1a<\/p>\n
      <button type=\"primary\" bindtap=\"btnTapHandler\">\u6309\u94ae<\/button><\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      .js\u4e2d\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff1a<\/p>\n
      Page({\n  \/\/ \u5b9a\u4e49\u6309\u94ae\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\n  btnTapHandler(event){\n    console.log(event)\n  }\n})<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u6548\u679c\u5982\u56fe\uff1a
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe4\"
       \u8c03\u8bd5\u5668\u7684Console\u9762\u677f\u8f93\u51fa\u4fe1\u606f\u5927\u81f4\u4e3a\uff1a
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe5\"<\/p>\n
      \uff082\uff09\u4e8b\u4ef6\u7684\u5206\u7c7b<\/h3>\n
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe6\"<\/p>\n
      \uff083\uff09\u4e8b\u4ef6\u7684\u7ed1\u5b9a\u548c\u5192\u6ce1<\/h3>\n
      \uff084\uff09\u4e8b\u4ef6\u7684\u6355\u83b7\u9636\u6bb5<\/h3>\n
      \uff085\uff09\u4e8b\u4ef6\u5bf9\u8c61<\/h3>\n
      \u5f53\u7ec4\u4ef6\u89e6\u53d1\u4e8b\u4ef6\u65f6\u3002\u903b\u8f91\u5c42\u7ed1\u5b9a\u8be5\u4e8b\u4ef6\u7684\u5904\u7406\u51fd\u6570\u4f1a\u6536\u5230\u4e00\u4e2a\u4e8b\u4ef6\u5bf9\u8c61\u3002
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe7\"<\/p>\n
      \uff086\uff09\u5728\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4e2d\u4e3a data \u4e2d\u7684\u6570\u636e\u8d4b\u503c<\/h3>\n
      \u901a\u8fc7\u8c03\u7528 this.setData(dataObject) \u65b9\u6cd5\uff0c\u53ef\u4ee5\u7ed9\u9875\u9762 data \u4e2d\u7684\u6570\u636e\u91cd\u65b0\u8d4b\u503c\u3002\u793a\u4f8b\u5982\u4e0b\uff1a
       .wxml\u4e2d\uff1a<\/p>\n
      <button type=\"primary\" bindtap=\"countChange\">+1<\/button><\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      .js\u4e2d\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff1a<\/p>\n
      Page({\n  data: {\n    count:0\n  },\n  \n  \/\/+1 \u6309\u94ae\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\n  countChange(){\n    this.setData({\n      count:this.data.count +1\n    })\n  }\n})<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u6548\u679c\u5982\u56fe\uff1a
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe8\"
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe9\"<\/p>\n
      \uff087\uff09\u4e8b\u4ef6\u4f20\u53c2<\/h3>\n
      \u5c0f\u7a0b\u5e8f\u4e2d\u7684\u4e8b\u4ef6\u4f20\u53c2\u6bd4\u8f83\u7279\u6b8a\uff0c\u4e0d\u80fd\u5728\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u540c\u65f6\u4e3a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4f20\u9012\u53c2\u6570\u3002\u53ef\u4ee5\u4e3a\u7ec4\u4ef6\u63d0\u4f9b data-* \u81ea\u5b9a\u4e49\u5c5e\u6027\u4f20\u53c2\uff0c\u5176\u4e2d * \u4ee3\u8868\u7684\u662f\u53c2\u6570\u7684\u540d\u5b57\uff0c\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
      .wxml\u4e2d\uff1a\uff08 info \u4f1a\u88ab\u89e3\u6790\u4e3a\u53c2\u6570\u7684\u540d\u5b57\uff0c\u6570\u503c 2 \u4f1a\u88ab\u89e3\u6790\u4e3a\u53c2\u6570\u7684\u503c\u3002\uff09<\/p>\n
      <button type=\"primary\" bindtap=\"binTap2\" data-info=\"{{2}}\">+2<\/button><\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      .js\u4e2d\uff1a\uff08\u5728\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4e2d\uff0c\u901a\u8fc7 event.target.dataset.\u53c2\u6570\u540d<\/strong> \u5373\u53ef\u83b7\u53d6\u5230\u5177\u4f53\u53c2\u6570\u7684\u503c\uff09<\/p>\n
      Page({\n  data: {\n    count:0\n  },\n  \n  \/\/+2 \n  binTap2(event){\n    this.setData({\n      count:this.data.count + event.target.dataset.info\n    })\n  }\n})<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u6548\u679c\u5982\u56fe\uff1a
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe10\"
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe11\"<\/p>\n
      \uff088\uff09bindinput \u7684\u8bed\u6cd5\u683c\u5f0f<\/h3>\n
      \u5728\u5c0f\u7a0b\u5e8f\u4e2d\uff0c\u901a\u8fc7 input \u4e8b\u4ef6\u6765\u54cd\u5e94\u6587\u672c\u6846\u7684\u8f93\u5165\u4e8b\u4ef6\u3002
       .wxml\u4e2d\uff1a<\/p>\n
      <input bindinput=\"inputHandler\"><\/input><\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      .js \u4e2d\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff1a<\/p>\n
      Page({\n  \/\/input\u8f93\u5165\u6846\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\n  inputHandler(event){\n    console.log(event.detail.value)\n  }\n})<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u6548\u679c\u5982\u56fe\uff1a
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe12\"
      \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe13\"<\/p>\n
      \uff089\uff09\u5b9e\u73b0\u6587\u672c\u6846\u548c data \u4e4b\u95f4\u7684\u6570\u636e\u540c\u6b65<\/h3>\n
      \u5b9e\u73b0\u6b65\u9aa4\uff1a\u2460\u5b9a\u4e49\u6570\u636e\uff1b\u2461\u6e32\u67d3\u7ed3\u6784\uff1b\u2462\u7f8e\u5316\u6837\u5f0f\uff1b\u2463\u7ed1\u5b9a input \u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002<\/p>\n
      5.\u6a21\u677f<\/h2>\n
      6.\u5f15\u7528<\/h2>\n
      WXML\u63d0\u4f9b\u4e24\u79cd\u6587\u4ef6\u5f15\u7528\u65b9\u5f0f\uff1aimport \u548c include
       1\uff09import \u53ef\u4ee5\u5728\u8be5\u6587\u4ef6\u4e2d\u4f7f\u7528\u76ee\u6807\u6587\u4ef6\u5b9a\u4e49\u7684\u6a21\u677f\u3002import \u6709\u4f5c\u7528\u57df\u7684\u6982\u5ff5\uff0c\u5373\u53ea\u4f1a\u5bfc\u5165\u76ee\u6807\u6587\u4ef6\u4e2d\u5b9a\u4e49\u7684\u6a21\u677f\uff0c\u800c\u4e0d\u4f1a\u5bfc\u5165\u76ee\u6807\u6587\u4ef6\u5bfc\u5165\u7684\u6a21\u677f\u3002
       2\uff09include \u53ef\u4ee5\u5c06\u76ee\u6807\u6587\u4ef6\u9664\u4e86 \u5916\u7684\u6574\u4e2a\u4ee3\u7801\u5f15\u5165\uff0c\u76f8\u5f53\u4e8e\u590d\u5236\u5230 include \u4f4d\u7f6e\u3002<\/p>\n
      \u4e8c\u3001WXSS<\/h2>\n
      WXSS (WeiXin Style Sheets)\u662f\u4e00\u5957\u6837\u5f0f\u8bed\u8a00\uff0c\u7528\u4e8e\u7f8e\u5316 WXML \u7684\u7ec4\u4ef6\u6837\u5f0f\uff0c\u7c7b\u4f3c\u4e8e\u7f51\u9875\u5f00\u53d1\u4e2d\u7684 CSS\u3002WXSS \u5177\u6709 CSS \u5927\u90e8\u5206\u7279\u6027\uff0c\u540c\u65f6\uff0cWXSS \u8fd8\u5bf9 CSS \u8fdb\u884c\u4e86\u6269\u5145\u4ee5\u53ca\u4fee\u6539\uff0c\u4ee5\u9002\u5e94\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u5f00\u53d1\u3002
       \u4e0e CSS \u76f8\u6bd4\uff0cWXSS \u6269\u5c55\u7684\u7279\u6027\u6709\uff1a<\/p>\n
        \n
      • rpx \u5c3a\u5bf8\u5355\u4f4d<\/li>\n
      • @import \u6837\u5f0f\u5bfc\u5165<\/li>\n<\/ul>\n
        1.\u5c3a\u5bf8\u5355\u4f4d<\/h2>\n
        rpx\uff08responsive pixel\uff09\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u72ec\u6709\u7684\uff0c\u7528\u6765\u89e3\u51b3\u5c4f\u9002\u914d\u7684\u5c3a\u5bf8\u5355\u4f4d\u3002
         rpx \u7684\u5b9e\u73b0\u539f\u7406\u975e\u5e38\u7b80\u5355\uff1a\u9274\u4e8e\u4e0d\u540c\u8bbe\u5907\u5c4f\u5e55\u7684\u5927\u5c0f\u4e0d\u540c\uff0c\u4e3a\u4e86\u5b9e\u73b0\u5c4f\u5e55\u7684\u81ea\u52a8\u9002\u914d\uff0crpx \u628a\u6240\u6709\u8bbe\u5907\u7684\u5c4f\u5e55\uff0c\u5728\u5bbd\u5ea6\u4e0a\u7b49\u5206\u4e3a 750 \u4efd\uff08\u5373\uff1a\u5f53\u524d\u5c4f\u5e55\u7684\u603b\u5bbd\u5ea6\u4e3a 750rpx\uff09\u3002<\/p>\n
          \n
        • \u5728\u8f83\u5c0f\u7684\u8bbe\u5907\u4e0a\uff0c1rpx \u6240\u4ee3\u8868\u7684\u5bbd\u5ea6\u8f83\u5c0f<\/li>\n
        • \u5728\u8f83\u5927\u7684\u8bbe\u5907\u4e0a\uff0c1rpx \u6240\u4ee3\u8868\u7684\u5bbd\u5ea6\u8f83\u5927<\/li>\n<\/ul>\n
          \u5c0f\u7a0b\u5e8f\u5728\u4e0d\u540c\u8bbe\u5907\u4e0a\u8fd0\u884c\u7684\u65f6\u5019\uff0c\u4f1a\u81ea\u52a8\u628a rpx \u7684\u6837\u5f0f\u5355\u4f4d\u6362\u7b97\u6210\u5bf9\u5e94\u7684\u50cf\u7d20\u5355\u4f4d\u6765\u6e32\u67d3\uff0c\u4ece\u800c\u5b9e\u73b0\u5c4f\u5e55\u9002\u914d\u3002<\/p>\n
          \u5728 iPhone6 \u4e0a\uff0c\u5c4f\u5e55\u5bbd\u5ea6\u4e3a375px\uff0c\u5171\u6709 750 \u4e2a\u7269\u7406\u50cf\u7d20\uff0c\u7b49\u5206\u4e3a 750rpx\u3002\u5219\uff1a
           750rpx = 375px = 750 \u7269\u7406\u50cf\u7d20
           1rpx = 0.5px = 1\u7269\u7406\u50cf\u7d20
           \u5b98\u65b9\u5efa\u8bae\uff1a\u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u65f6\uff0c\u8bbe\u8ba1\u5e08\u53ef\u4ee5\u7528 iPhone6 \u4f5c\u4e3a\u89c6\u89c9\u7a3f\u7684\u6807\u51c6\u3002
          \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\u8be6\u89e3\u63d2\u56fe14\"<\/p>\n
          2.\u6837\u5f0f\u5bfc\u5165<\/h2>\n
          \u4f7f\u7528 WXSS \u63d0\u4f9b\u7684 @import \u8bed\u6cd5\uff0c\u53ef\u4ee5\u5bfc\u5165\u5916\u8054\u7684\u6837\u5f0f\u8868\u3002
           @import \u540e\u8ddf\u9700\u8981\u5bfc\u5165\u7684\u5916\u8054\u6837\u5f0f\u8868\u7684\u76f8\u5bf9\u8def\u5f84\uff0c\u7528 ; \u8868\u793a\u8bed\u53e5\u7ed3\u675f\u3002<\/p>\n
          3.\u5185\u8054\u6837\u5f0f<\/h2>\n
          \u5185\u8054\u6837\u5f0f\u662f\u6846\u67b6\u7ec4\u4ef6\u4e0a\u652f\u6301\u4f7f\u7528 style\u3001class \u5c5e\u6027\u6765\u63a7\u5236\u7ec4\u4ef6\u7684\u6837\u5f0f\u3002
           1\uff09style\uff1a\u7528\u4e8e\u63a5\u6536\u52a8\u6001\u6837\u5f0f\uff0c\u5728\u8fd0\u884c\u65f6\u4f1a\u8fdb\u884c\u89e3\u6790\u3002
           2\uff09class\uff1a\u7528\u4e8e\u6307\u5b9a\u6837\u5f0f\u89c4\u5219\u3002\u5176\u503c\u662f\u6837\u5f0f\u89c4\u5219\u4e2d\u7c7b\u9009\u62e9\u5668\u540d\uff08\u6837\u5f0f\u7c7b\u540d\uff09\u7684\u96c6\u5408\u3002\u4e00\u822c\u5c06\u9759\u6001\u6837\u5f0f\u5199\u5230\u5bf9\u5e94\u6837\u5f0f\u7c7b\u540d\u7684\u5b9a\u4e49\u4e2d\u3002\u591a\u4e2a\u6837\u5f0f\u7c7b\u540d\u4e4b\u95f4\u7528\u7a7a\u683c\u5206\u9694\u3002<\/p>\n
          4.\u9009\u62e9\u5668<\/h2>\n
          \u548cCSS\u4e00\u6837\uff0cWXSS\u4e5f\u9700\u8981\u4f7f\u7528\u9009\u62e9\u5668\u6765\u51b3\u5b9a\u6837\u5f0f\u7684\u4f5c\u7528\u5bf9\u8c61\u3002<\/p>\n
          5.\u5168\u5c40\u6837\u5f0f\u4e0e\u5c40\u90e8\u6837\u5f0f<\/h2>\n
          1\uff09\u5168\u5c40\u6837\u5f0f\uff1a\u5b9a\u4e49\u5728 app.wxss \u4e2d\u7684\u6837\u5f0f\u4e3a\u5168\u5c40\u6837\u5f0f\uff0c\u4f5c\u7528\u4e8e\u6bcf\u4e00\u4e2a\u9875\u9762\u3002
           2\uff09\u5c40\u90e8\u6837\u5f0f\uff1a\u5728\u9875\u9762\u7684 .wxss \u6587\u4ef6\u4e2d\u5b9a\u4e49\u7684\u6837\u5f0f\u4e3a\u5c40\u90e8\u6837\u5f0f\uff0c\u53ea\u4f5c\u7528\u4e8e\u5f53\u524d\u9875\u9762\u3002<\/p>\n
          \u6ce8\u610f\uff1a
           \u5f53\u5c40\u90e8\u6837\u5f0f\u548c\u5168\u5c40\u6837\u5f0f\u51b2\u7a81\u65f6\uff0c\u6839\u636e\u5c31\u8fd1\u539f\u5219\uff0c\u5c40\u90e8\u6837\u5f0f\u4f1a\u8986\u76d6\u5168\u5c40\u6837\u5f0f\u3002
           \u5f53\u5c40\u90e8\u6837\u5f0f\u7684\u6743\u91cd\u5927\u4e8e\u6216\u7b49\u4e8e\u5168\u5c40\u6837\u5f0f\u7684\u6743\u91cd\u65f6\uff0c\u624d\u4f1a\u8986\u76d6\u5168\u5c40\u7684\u6837\u5f0f\u3002<\/p>\n
          \u4e09\u3001WXS<\/h2>\n
          1.\u6982\u5ff5<\/h2>\n
          WXS\uff08WeiXin Script\uff09\u662f\u5c0f\u7a0b\u5e8f\u72ec\u6709\u7684\u4e00\u5957\u811a\u672c\u8bed\u8a00\uff0c\u7ed3\u5408 WXML\uff0c\u53ef\u4ee5\u6784\u5efa\u51fa\u9875\u9762\u7684\u7ed3\u6784\u3002<\/p>\n
          2.\u5e94\u7528\u573a\u666f<\/h2>\n
          wxml \u4e2d\u65e0\u6cd5\u8c03\u7528\u5728\u9875\u9762\u7684 .js \u4e2d\u5b9a\u4e49\u7684\u51fd\u6570\uff0c\u4f46\u662f\uff0cwxml \u4e2d\u53ef\u4ee5\u8c03\u7528 wxs \u4e2d\u5b9a\u4e49\u7684\u51fd\u6570\u3002\u56e0\u6b64\uff0c\u5c0f\u7a0b\u5e8f\u4e2d wxs \u7684\u5178\u578b\u5e94\u7528\u573a\u666f\u5c31\u662f\u201c\u8fc7\u6ee4\u5668\u201d\u3002<\/p>\n
          3.wxs \u548c JavaScript \u7684\u5173\u7cfb<\/h2>\n
          \u867d\u7136 wxs \u7684\u8bed\u6cd5\u7c7b\u4f3c\u4e8e JavaScript\uff0c\u4f46\u662f wxs \u548c JavaScript \u662f\u5b8c\u5168\u4e0d\u540c\u7684\u4e24\u79cd\u8bed\u8a00\uff1a
           \uff081\uff09wxs \u6709\u81ea\u5df1\u7684\u6570\u636e\u7c7b\u578b\uff1a<\/p>\n
            \n
          • number \u6570\u503c\u7c7b\u578b<\/li>\n
          • string \u5b57\u7b26\u4e32\u7c7b\u578b<\/li>\n
          • boolean \u5e03\u5c14\u7c7b\u578b<\/li>\n
          • object \u5bf9\u8c61\u7c7b\u578b<\/li>\n
          • function\u51fd\u6570\u7c7b\u578b<\/li>\n
          • array \u6570\u7ec4\u7c7b\u578b<\/li>\n
          • date \u65e5\u671f\u7c7b\u578b<\/li>\n
          • regexp \u6b63\u5219<\/li>\n<\/ul>\n
            \uff082\uff09wxs \u4e0d\u652f\u6301\u7c7b\u4f3c\u4e8e ES6 \u53ca\u4ee5\u4e0a\u7684\u8bed\u6cd5\u5f62\u5f0f<\/p>\n
              \n
            • \u4e0d\u652f\u6301\uff1alet\u3001const\u3001\u89e3\u6784\u8d4b\u503c\u3001\u5c55\u5f00\u8fd0\u7b97\u7b26\u3001\u7bad\u5934\u51fd\u6570\u3001\u5bf9\u8c61\u5c5e\u6027\u7b80\u5199\u3001etc\u2026<\/li>\n
            • \u652f\u6301\uff1avar \u5b9a\u4e49\u53d8\u91cf\u3001\u666e\u901a function\u51fd\u6570\u7b49\u7c7b\u4f3c\u4e8e ES5 \u7684\u8bed\u6cd5<\/li>\n<\/ul>\n
              \uff083\uff09wxs \u9075\u5faa CommonJS \u89c4\u8303<\/p>\n
                \n
              • module \u5bf9\u8c61<\/li>\n
              • require() \u51fd\u6570<\/li>\n
              • module.exports \u5bf9\u8c61<\/li>\n<\/ul>\n
                4.\u5185\u5d4c wxs \u811a\u672c<\/h2>\n
                wxs \u4ee3\u7801\u53ef\u4ee5\u7f16\u5199\u5728 wxml \u6587\u4ef6\u4e2d\u7684 \u6807\u7b7e\u5185\uff0c\u5c31\u50cf Javascript \u4ee3\u7801\u53ef\u4ee5\u7f16\u5199\u5728 html \u6587\u4ef6\u4e2d\u7684 <script> \u6807\u7b7e\u5185\u4e00\u6837\u3002<br\/> wxml \u6587\u4ef6\u4e2d\u7684\u6bcf\u4e2a <wxs><\/script> \u6807\u7b7e\uff0c\u5fc5\u987b\u63d0\u4f9b module \u5c5e\u6027\uff0c\u7528\u6765\u6307\u5b9a\u5f53\u524d wxs \u7684\u6a21\u5757\u540d\u79f0\uff0c\u65b9\u4fbf\u5728 wxml \u4e2d\u8bbf\u95ee\u6a21\u5757\u4e2d\u7684\u6210\u5458\u3002
                 .wxml\u4e2d\uff1a<\/p>\n
                <view>{{m1.toUpper(username)}}<\/view>\n\n<wxs module=\"m1\">\n  \/\/\u5c06\u6587\u672c\u8f6c\u4e3a\u5927\u5199\u5f62\u5f0fzs -> ZS\n  module.exports.toUpper = function(str) {\n    return str.toUpperCase()\n  }\n<\/wxs><\/pre>\n
                 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
                5.\u5b9a\u4e49\u5916\u8054\u7684 wxs \u811a\u672c<\/h2>\n
                wxs \u4ee3\u7801\u8fd8\u53ef\u4ee5\u7f16\u5199\u5728\u4ee5 .wxs \u4e3a\u540e\u7f00\u540d\u7684\u6587\u4ef6\u5185\uff0c\u5c31\u50cf javascript \u4ee3\u7801\u53ef\u4ee5\u7f16\u5199\u5728\u4ee5 .js \u4e3a\u540e\u7f00\u540d\u7684\u6587\u4ef6\u4e2d\u4e00\u6837\u3002\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
                \/\/tools.wxs\u6587\u4ef6\nfunction toLower(str) {\n  return str.toLowerCase()\n}\n\nmodule.exports = {\n  toLower: toLower\n}<\/pre>\n
                 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
                6.\u4f7f\u7528\u5916\u8054\u7684 wxs \u811a\u672c<\/h2>\n
                \u5728 wxml \u4e2d\u5f15\u5165\u5916\u8054\u7684 wxs \u811a\u672c\u65f6\uff0c\u5fc5\u987b\u4e3a \u6807\u7b7e\u6dfb\u52a0 module \u548c src \u5c5e\u6027\uff0c\u5176\u4e2d\uff1a<\/p>\n
                  \n
                • module \u7528\u6765\u6307\u5b9a\u6a21\u5757\u7684\u540d\u79f0<\/li>\n
                • src \u7528\u6765\u6307\u5b9a\u8981\u5f15\u5165\u7684\u811a\u672c\u7684\u8def\u5f84\uff0c\u4e14\u5fc5\u987b\u662f\u76f8\u5bf9\u8def\u5f84<\/li>\n<\/ul>\n
                  \u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
                  <!--\u8c03\u7528m2\u6a21\u5757\u4e2d\u7684\u65b9\u6cd5-->\n<viewr>{{m2.toLower(country)}}<\/view>\n\n<!--\u5f15\u7528\u5916\u8054\u7684tools.wxs\u811a\u672c\uff0c\u5e76\u547d\u540d\u4e3a m2-->\n<wxs src=\" ..\/..\/utils\/tools.wxs \" module=\"m2\"><\/wxs><\/pre>\n
                   \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
                  7.WXS \u7684\u7279\u70b9<\/h2>\n
                  \uff081\uff09\u4e0e JavaScript \u4e0d\u540c
                   \u4e3a\u4e86\u964d\u4f4e wxs\uff08WeiXin Script\uff09\u7684\u5b66\u4e60\u6210\u672c\uff0c wxs \u8bed\u8a00\u5728\u8bbe\u8ba1\u65f6\u501f\u5927\u91cf\u9274\u4e86 JavaScript \u7684\u8bed\u6cd5\u3002\u4f46\u662f\u672c\u8d28\u4e0a\uff0cwxs \u548c JavaScript \u662f\u5b8c\u5168\u4e0d\u540c\u7684\u4e24\u79cd\u8bed\u8a00\uff01
                   \uff082\uff09\u4e0d\u80fd\u4f5c\u4e3a\u7ec4\u4ef6\u7684\u4e8b\u4ef6\u56de\u8c03
                   wxs \u5178\u578b\u7684\u5e94\u7528\u573a\u666f\u5c31\u662f\u201c\u8fc7\u6ee4\u5668\u201d\uff0c\u7ecf\u5e38\u914d\u5408 Mustache \u8bed\u6cd5\u8fdb\u884c\u4f7f\u7528\u3002\u4f46\u662f\uff0c\u5728 wxs \u4e2d\u5b9a\u4e49\u7684\u51fd\u6570\u4e0d\u80fd\u4f5c\u4e3a\u7ec4\u4ef6\u7684\u4e8b\u4ef6\u56de\u8c03\u51fd\u6570\u3002
                   \uff083\uff09\u9694\u79bb\u6027
                   \u9694\u79bb\u6027\u6307\u7684\u662f wxs \u7684\u8fd0\u884c\u73af\u5883\u548c\u5176\u4ed6 JavaScript \u4ee3\u7801\u662f\u9694\u79bb\u7684\u3002\u4f53\u73b0\u5728\u5982\u4e0b\u4e24\u65b9\u9762\uff1a
                   \u2460wxs \u4e0d\u80fd\u8c03\u7528 js \u4e2d\u5b9a\u4e49\u7684\u51fd\u6570
                   \u2461wxs \u4e0d\u80fd\u8c03\u7528\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u7684 API
                   \uff084\uff09\u6027\u80fd\u597d
                   \u2460\u5728 iOS \u8bbe\u5907\u4e0a\uff0c\u5c0f\u7a0b\u5e8f\u5185\u7684 WXS \u4f1a\u6bd4 JavaScript \u4ee3\u7801\u5feb 2 ~ 20 \u500d
                   \u2461\u5728 android \u8bbe\u5907\u4e0a\uff0c\u4e8c\u8005\u7684\u8fd0\u884c\u6548\u7387\u65e0\u5dee\u5f02<\/p>\n
                  \u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011<\/p>\n
                  \u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u5c42\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":"
                  \u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u5e26\u6765\u4e86\u5173\u4e8e\u7684\u76f8\u5173\u77e5\u8bc6\uff0c\u5176\u4e2d\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5173\u4e8e\u89c6\u56fe\u5c42\u7684\u76f8\u5173\u95ee\u9898\uff0c\u89c6\u56fe\u5c42\u8d1f\u8d23\u5c06\u903b\u8f91\u5c42\u7684\u6570\u636e\u663e\u793a\u5728\u9875\u9762\u4e0a\uff0c\u540c\u65f6\u5c06\u89c6\u56fe\u5c42\u7684\u4e8b\u4ef6\u53d1\u9001\u7ed9\u903b\u8f91\u5c42\uff0c\u4e0b\u9762\u4e00\u8d77\u6765\u770b\u4e00\u4e0b\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u5e2e\u52a9\u3002 \u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011 \u5c0f\u7a0b\u5e8f\u6846\u67b6\u7684\u89c6\u56fe\u5c42\u7531WXML\uff08WeiXin Markup Language\uff0c\u5fae\u4fe1\u6807\u8bb0\u8bed\u8a00\uff09\u4e0eWXSS\uff08WeiXin Style Sheet\uff0c\u5fae\u4fe1\u6837\u5f0f\u8868\uff09\u7f16\u5199\uff0c\u7531\u7ec4\u4ef6\u6765\u8fdb\u884c\u5c55\u793a\u3002\u89c6\u56fe\u5c42\u8d1f\u8d23\u5c06\u903b\u8f91\u5c42\u7684\u6570\u636e\u663e\u793a\u5728\u9875\u9762\u4e0a\uff0c\u540c\u65f6\u5c06\u89c6\u56fe\u5c42\u7684\u4e8b\u4ef6\u53d1\u9001\u7ed9\u903b\u8f91\u5c42\u3002WXML\u7528\u6765\u63cf\u8ff0\u9875\u9762\u7684\u7ed3\u6784\uff0cWXSS\u7528\u4e8e\u63cf\u8ff0\u9875\u9762\u7684\u6837\u5f0f\uff0c\u7ec4\u4ef6\u662f\u89c6\u56fe\u7684\u57fa\u672c\u7ec4\u6210\u5355\u5143\u3002\u8fd9\u4e09\u8005\u7684\u5173\u7cfb\u53ef\u4ee5\u7c7b\u6bd4\u4e3aHTML\uff0cCSS\u4e0eHTML\u91cc\u9762\u5404\u79cd\u6807\u7b7e\u7684\u5173\u7cfb\u3002\u9664\u4e86\u8fd9\u4e09\u8005\u4e4b\u5916\uff0c\u8fd8\u6709\u4e00\u5957\u7528\u4e8e\u5c0f\u7a0b\u5e8f\u7684\u811a\u672c\u8bed\u8a00\u2014\u2014WXS\uff08WeiXin Script\uff09\u3002WXS\u548cWXML\u7ed3\u5408\u8d77\u6765\uff0c\u53ef\u4ee5\u6784\u5efa\u51fa\u9875\u9762\u7ed3\u6784\u3002 \u4e00\u3001WXML 1\u3001\u6570\u636e\u7ed1\u5b9a \uff081\uff09\u7b80\u5355\u7ed1\u5b9a \u6570\u636e\u7ed1\u5b9a\u7684\u57fa\u672c\u539f\u5219\uff1a 1\uff09\u5728 data \u4e2d\u5b9a\u4e49\u9875\u9762\u7684\u6570\u636e\uff1a\u5728\u9875\u9762\u5bf9\u5e94\u7684 .js \u6587\u4ef6\u4e2d\uff0c\u628a\u6570\u636e\u5b9a\u4e49\u5230 data \u5bf9\u8c61\u4e2d\u5373\u53ef\u3002 Page({ data:{ \/\/\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u6570\u636e info: ‘init data ‘ , \/\/\u6570\u7ec4\u7c7b\u578b\u7684\u6570\u636e msgList: [{msg: ‘hello’}\uff0c{msg: “world ‘}] } }) \u767b\u5f55\u540e\u590d\u5236 2\uff09\u5728 WXML \u4e2d\u4f7f\u7528\u6570\u636e\uff1a\u628adata\u4e2d\u7684\u6570\u636e\u7ed1\u5b9a\u5230\u9875\u9762\u4e2d\u6e32\u67d3\uff0c\u4f7f\u7528 Mustache \u8bed\u6cd5\uff08\u53cc\u5927\u62ec\u53f7\uff09\u5c06\u53d8\u91cf\u5305\u8d77\u6765\u5373\u53ef\u3002\u8bed\u6cd5\u683c\u5f0f\u4e3a\uff1a <view>{{\u8981\u7ed1\u5b9a\u7684\u6570\u636e\u540d\u79f0}}<\/view> \u767b\u5f55\u540e\u590d\u5236 Mustache \u8bed\u6cd5\u7684\u4e3b\u8981\u5e94\u7528\u573a\u666f\u5982\u4e0b\uff1a \u2460\u5185\u5bb9\u3002\u76f4\u63a5\u5728\u9875\u9762\u4e0a\u663e\u793a\u6570\u636e\u5185\u5bb9\u3002 \u2461\u7ec4\u4ef6\u5c5e\u6027\u3002\u7528\u540e\u7aef\u53d8\u91cf\u6765\u8bbe\u7f6e\u524d\u7aef\u90e8\u5206\u7ec4\u4ef6\u7684\u5c5e\u6027\uff0c\u6ce8\u610f\u7531\u53cc\u5927\u62ec\u53f7\u62ec\u8d77\u6765\u7684\u53d8\u91cf\u9700\u8981\u5728\u5c5e\u6027\u7684\u53cc\u5f15\u53f7\u5185\u3002 \u2462\u63a7\u5236\u5c5e\u6027\u3002\u7528\u540e\u7aef\u53d8\u91cf\u6765\u63a7\u5236\u524d\u7aef\u7ec4\u4ef6\u7684\u663e\u793a\u6548\u679c\uff0c\u6ce8\u610f\u7531\u53cc\u5927\u62ec\u53f7\u62ec\u8d77\u6765\u7684\u53d8\u91cf\u9700\u8981\u5728\u5c5e\u6027\u7684\u53cc\u5f15\u53f7\u5185\u3002 \u2463\u5173\u952e\u5b57\u3002\u4e3b\u8981\u7528\u4e8e\u903b\u8f91\u5224\u65ad\u3002 \uff082\uff09\u8fd0\u7b97 \u2460\u4e09\u5143\u8fd0\u7b97\u3002\u53ef\u4ee5\u5728\u53cc\u5927\u62ec\u53f7\u5185\u8fdb\u884c\u4e09\u5143\u8fd0\u7b97\u3002 .js\u4e2d\uff1a Page({ data: { […]<\/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-34266","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34266","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=34266"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34266\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=34266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=34266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=34266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}