{"id":29218,"date":"2024-11-25T10:17:15","date_gmt":"2024-11-25T02:17:15","guid":{"rendered":"https:\/\/fwq.ai\/blog\/29218\/"},"modified":"2024-11-25T10:17:15","modified_gmt":"2024-11-25T02:17:15","slug":"%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91%e4%b9%9d%e5%ae%ab%e6%a0%bc%e7%95%8c%e9%9d%a2%e7%9a%84%e5%af%bc%e8%88%aa%e7%9a%84%e4%bb%a3%e7%a0%81%e5%ae%9e%e7%8e%b0","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/29218\/","title":{"rendered":"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e5d\u5bab\u683c\u754c\u9762\u7684\u5bfc\u822a\u7684\u4ee3\u7801\u5b9e\u73b0"},"content":{"rendered":"

\u672c\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u5b9e\u6218\uff1a\u5b9e\u73b0\u4e5d\u5bab\u683c\u754c\u9762\u7684\u7684\u4ee3\u7801\u5b9e\u73b0\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u6709\u5174\u8da3\u7684\u53ef\u4ee5\u4e86\u89e3\u4e00\u4e0b\u3002<\/p>\n

\u5c0f\u7a0b\u5e8f\u662f\u957f\u5728\u5fae\u4fe1\u4e0a\u7684\uff0c\u662f\u79fb\u52a8\u7aef\u7684\u754c\u9762\uff0c\u4e3a\u4e86\u80fd\u591f\u66f4\u65b9\u4fbf\u7684\u4f7f\u7528\uff0c\u6211\u4eec\u5e38\u5e38\u5e0c\u671b\u4f7f\u7528\u4e5d\u5bab\u683c\u754c\u9762\u7684\u65b9\u5f0f\u4f5c\u4e3a\u5bfc\u822a\uff0c\u90a3\u8981\u5982\u4f55\u5b9e\u73b0\u5462\uff1f<\/p>\n

\u57fa\u4e8e\u4e00\u4e2a\u7b80\u5355\u7684\u601d\u8003\uff0c\u4e5d\u5bab\u683c\u5c31\u662f\u4e09\u884c\u4e09\u5217\uff0c\u5982\u679c\u628a\u884c\u4f5c\u4e3a\u4e00\u4e2a\u5355\u4f4d\uff0c\u518d\u5c06\u6bcf\u4e00\u884c\u5206\u6210\u4e09\u5217\uff0c\u90a3\u662f\u4e0d\u662f\u5c31\u53ef\u4ee5\u4e86\uff1f\u6211\u4eec\u5b9e\u8df5\u4e00\u4e0b\u3002<\/p>\n

\u9996\u5148\u6765\u8003\u8651\u4e5d\u5bab\u683c\u6570\u636e\u7684\u751f\u6210\uff0c\u6bcf\u4e00\u4e2a\u683c\u5b50\u9700\u8981\u6709\u4e00\u4e2a\u56fe\u6807\u3001\u4e00\u4e2a\u6807\u9898\u3001\u4e00\u4e2a\u4fbf\u4e8e\u8df3\u8f6c\u7684\u8def\u7531\uff0c\u90a3\u5929\u73b0\u5728\u6211\u4eec\u6709\u4e5d\u4e2a\u9875\u9762\uff0c\u6240\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u5373\u53ef\u3002\u4e3a\u4e86\u66f4\u597d\u7684\u8fdb\u884c\u540e\u7eed\u7684\u914d\u7f6e\uff0c\u6211\u4eec\u5c06\u8fd9\u4e2a\u6570\u7ec4\u72ec\u7acb\u5230\u4e00\u4e2a\u6587\u4ef6\u4e2droutes.\uff0c\u7136\u540e\u5c06\u5176\u5728index.js\u9875\u9762\u4e2d\u5f15\u7528\uff0croutes\u653e\u5230index\u7684\u76ee\u5f55\u4e0b\u3002<\/p>\n

var PageItems = \r\n [ \r\n  { \r\n   text: '\u683c\u5b501', \r\n   icon: '..\/..\/images\/c1.png', \r\n   route: '..\/c1\/c1', \r\n  }, \r\n  { \r\n   text: '\u683c\u5b502', \r\n   icon: '..\/..\/images\/c2.png', \r\n   route: '..\/c2\/c2', \r\n  }, \r\n   { \r\n   text: '\u683c\u5b503', \r\n   icon: '..\/..\/images\/c3.png', \r\n   route: '..\/c3\/c3', \r\n  }, \r\n  { \r\n   text: '\u683c\u5b504', \r\n   icon: '..\/..\/images\/c4.png', \r\n   route: '..\/c4\/c4', \r\n  }, \r\n  { \r\n   text: '\u683c\u5b505', \r\n   icon: '..\/..\/images\/c5', \r\n   route: '..\/c5\/c5', \r\n  }, \r\n  { \r\n   text: '\u683c\u5b506', \r\n   icon: '..\/..\/images\/c6.png', \r\n   route: '..\/c6\/c6', \r\n  }, \r\n  { \r\n   text: '\u683c\u5b507', \r\n   icon: '..\/..\/images\/c7.png', \r\n   route: '..\/c7\/c7', \r\n  }, \r\n  { \r\n   text: '\u683c\u5b508', \r\n   icon: '..\/..\/images\/c8', \r\n   route: '..\/c8\/c8', \r\n  }, \r\n  { \r\n   text: '\u683c\u5b509', \r\n   icon: '..\/..\/images\/c9.png', \r\n   route: '..\/c9\/c9', \r\n  } \r\n ]; \r\nmodule.exports = { \r\n PageItems: PageItems \r\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5728index.js\u9875\u9762\u4e2d\u6211\u4eec\u5f15\u7528routes.js\uff0c\u7136\u540e\u5f97\u5230\u6570\u636ePageItems\uff0c\u4f46PageItems\u662f\u4e00\u7ef4\u6570\u7ec4\uff0c\u800c\u6211\u4eec\u524d\u9762\u601d\u8003\u662f\u8981\u7528\u4e00\u884c\u4e09\u5217\u4e3a\u4e00\u4e2a\u7ec4\u7684\uff0c\u6240\u4ee5\u9700\u8981\u5c06\u8fd9\u4e00\u7ef4\u6570\u7ec4\u8fdb\u884c\u91cd\u65b0\u7ec4\u5408\uff0c\u6700\u76f4\u63a5\u7684\u65b9\u6cd5\u5c31\u662f\u751f\u6210\u4e00\u4e2a\u6570\u7ec4\uff0c\u6bcf\u4e2a\u6570\u7ec4\u7684\u5143\u7d20\u53c8\u5305\u542b\u4e86\u4e00\u4e2a\u53ea\u6709\u4e09\u4e2a\u5143\u7d20\u7684\u4e00\u7ef4\u6570\u7ec4\uff0c\u4ee3\u7801\u5982\u4e0b<\/p>\n
\/\/index.js \r\n\/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b \r\nvar app = getApp() \r\nvar routes = require('routes'); \r\nPage({ \r\n data: { \r\n  userInfo: {}, \r\n  cellHeight: '120px', \r\n  pageItems: [] \r\n }, \r\n \/\/\u4e8b\u4ef6\u5904\u7406\u51fd\u6570 \r\n onLoad: function () { \r\n  var that = this \r\n  console.log(app); \r\n  \/\/\u8c03\u7528\u5e94\u7528\u5b9e\u4f8b\u7684\u65b9\u6cd5\u83b7\u53d6\u5168\u5c40\u6570\u636e \r\n  app.getUserInfo(function (userInfo) { \r\n   wx.setNavigationBarTitle({ \r\n    title: '\u5168\u65b0\u6d4b\u8bd5\u8ffd\u8e2a\u7cfb\u7edf-' + userInfo.nickName, \r\n    success: function (res) { \r\n     \/\/ success \r\n    } \r\n   }) \r\n   that.setData({ \r\n    userInfo: userInfo \r\n   }) \r\n   var pageItems = []; \r\n   var row = []; \r\n   var len = routes.PageItems.length;\/\/\u91cd\u7ec4PageItems \r\n   len = Math.floor((len + 2) \/ 3) * 3; \r\n   for (var i = 0; i <p>\u5728index.wxml\u4e2d\uff0c\u6211\u4eec\u6765\u5e03\u5c40\u754c\u9762\uff0c\u7531\u4e8e\u6bcf\u4e00\u4e2a\u683c\u5b50\u90fd\u662f\u4e00\u6837\u7684\uff0c\u53ea\u662f\u6570\u636e\u4e0d\u4e00\u6837\uff0c\u6240\u4ee5\u60f3\u5230\u7528\u6a21\u677f\u6765\u5448\u73b0\u3002\u4e3a\u6b64\uff0c\u6211\u4eec\u5148\u505a\u4e00\u4e2a\u5355\u5143\u683c\u7684\u6a21\u677f\u9762cell.wxml.<\/p><pre class=\"brush:xml;\"><template> \r\n <navigator> \r\n  <view> \r\n   <image><\/image> \r\n  <\/view> \r\n  <view> \r\n   <text>{{text}}<\/text> \r\n  <\/view> \r\n <\/navigator> \r\n<\/template><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u8fd9\u91cc\u770b\u5230\u4e24\u4e2a\u5927\u62ec\u53f7\u5185\u5957\u7684\u662f\u4ece\u5916\u9762\u4f20\u5165\u7684\u6570\u636e\uff0c\u7136\u540e\u5728\u91cc\u9762\u53ef\u4ee5\u8fdb\u884c\u7b80\u5355\u7684\u903b\u8f91\u5224\u65ad\uff0c\u4ee5\u4fbf\u4e8e\u66f4\u597d\u7684\u5448\u73b0\u3002\u6bd4\u5982text==null\u7684\u65f6\u5019\uff0c\u6211\u4eec\u5e0c\u671b\u5448\u73b0\u7684\u662f\u4e00\u4e2a\u7a7a\u80cc\u666f\u7684\u683c\u5b50\uff0c\u5728\u6709\u6570\u636e\u7684\u65f6\u5019\u6211\u4eec\u5e0c\u671b\u5448\u73b0\u4e00\u4e2a\u542b\u80cc\u666f\u7684\u683c\u5b50\uff0c\u6240\u4ee5<\/p>\n
 \u4ee3\u7801\u5982\u4e0b:<\/p>\n
\"{{text==null||text.length==0?'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}\".<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u53e6\u5916\u4e00\u70b9\uff0c\u7531\u4e8e\u6211\u4eec\u662f\u5c06\u8be5\u754c\u9762\u6587\u4ef6\u4f5c\u4e3a\u6a21\u677f\u7684\uff0c\u6240\u4ee5\u5fc5\u987b\u8981\u7528template\u6807\u8bb0\u6765\u5305\u4f4f\uff0c\u540c\u65f6\u547d\u4e00\u4e2a\u540d\u5b57name\uff0c\u8fd9\u6837\u5728\u5f15\u7528\u6a21\u677f\u7684\u5730\u65b9\u624d\u53ef\u4ee5\u8bc6\u522b\u8c03\u7528\u3002 \u73b0\u5728\u6211\u4eec\u5728index.wxml\u4e2d\u5f15\u7528\u8fd9\u4e2a\u6a21\u677f<\/p>\n
<!--index.wxml--> \r\n<import><\/import> \r\n<view> \r\n <scroll-view> \r\n  <view> \r\n   <view> \r\n    <template><\/template> \r\n    <template><\/template> \r\n    <template><\/template> \r\n   <\/view> \r\n  <\/view> \r\n <\/scroll-view> \r\n<\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u6a21\u677f\u7684\u5f15\u7528\u4f7f\u7528import\u6765\u5f15\u7528\uff0c\u5728\u8c03\u7528\u7684\u5730\u65b9\u4f7f\u7528template\u548cis\uff0c\u5176\u4e2dis\u6307\u5b9a\u7684\u662fcell.wxml\u4e2d\u7684name\u3002item[0]\u3001item[1]\u3001item[2]\u662f\u4f20\u5165\u7684\u6570\u636e,cellHeight\u662f\u5728index.js\u7684data\u4e2d\u5b58\u653e\u7684\u6570\u636e\u3002\u5728\u5c06\u6570\u636e\u4f20\u5165\u5230\u6a21\u677f\u5185\u90e8\u65f6\uff0c\u4f1a\u5c06\u5176\u5c55\u5f00\u5728\u5b57\u6bb5\u7684\u5f62\u5f0f\uff0c\u5373key-value\u5bf9\uff0c\u6240\u4ee5\u518d\u770bcell.wxml\u6587\u4ef6\uff0c\u5c31\u4f1a\u53d1\u73b0\u5185\u90e8\u662f\u76f4\u63a5\u4f7f\u7528key\u6765\u4f5c\u4e3a\u6570\u636e\u7684\u3002 \u5c06\u6570\u636e\u5448\u73b0\u5230\u754c\u9762\u4e4b\u540e\uff0c\u6211\u4eec\u9700\u8981\u76f8\u5f53\u7684\u6837\u5f0f\u6765\u914d\u5408\uff0cindex.\u4ee3\u7801\u5982\u4e0b\u3002<\/p>\n
\/**index.wxss**\/ \r\n.pages-container { \r\n height: 100%; \r\n display: flex; \r\n flex-direction: column; \r\n box-sizing: border-box; \r\n padding-top: 10rpx; \r\n padding-bottom: 10rpx; \r\n} \r\n.pages-title-bg { \r\n width: 100%; \r\n} \r\n.pages-wrapper { \r\n} \r\n.pages-row { \r\n width: 100%; \r\n display: flex; \r\n flex-direction: row; \r\n justify-content: space-around; \r\n} \r\n.pages-item { \r\n position: relative; \r\n padding: 10rpx; \r\n width: 33%; \r\n background-color: #fff; \r\n border: #ddd solid 1px; \r\n} \r\n.pages-icon-wrapper { \r\n display: flex; \r\n justify-content: space-around; \r\n align-items: center; \r\n margin: 10rpx; \r\n border-radius: 30%; \r\n height: 75%; \r\n background:#00CD0D; \r\n} \r\n.pages-icon-wrapper-no-bg { \r\n display: flex; \r\n justify-content: space-around; \r\n align-items: center; \r\n margin: 10rpx; \r\n height: 75%; \r\n} \r\n.pages-icon { \r\n width: 100rpx; \r\n height: 100rpx; \r\n} \r\n.pages-text-wrapper { \r\n text-align: center; \r\n} \r\n.pages-text { \r\n font-weight: bolder; \r\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u6548\u679c\u5982\u4e0b\u56fe<\/p>\n
\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e5d\u5bab\u683c\u754c\u9762\u7684\u5bfc\u822a\u7684\u4ee3\u7801\u5b9e\u73b0\u63d2\u56fe\"<\/p>\n
\u6211\u4eec\u6a21\u677f\u4e2d\u4f7f\u7528navigator\u5143\u7d20\u6765\u5448\u73b0\u683c\u5b50\uff0c\u6240\u4ee5\u6bcf\u4e2a\u683c\u5b50\u81ea\u7136\u5c31\u53ef\u4ee5\u5bfc\u822a\u4e86\u3002<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e5d\u5bab\u683c\u754c\u9762\u7684\u5bfc\u822a\u7684\u4ee3\u7801\u5b9e\u73b0\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\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u5b9e\u6218\uff1a\u5b9e\u73b0\u4e5d\u5bab\u683c\u754c\u9762\u7684\u7684\u4ee3\u7801\u5b9e\u73b0\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u6709\u5174\u8da3\u7684\u53ef\u4ee5\u4e86\u89e3\u4e00\u4e0b\u3002 \u5c0f\u7a0b\u5e8f\u662f\u957f\u5728\u5fae\u4fe1\u4e0a\u7684\uff0c\u662f\u79fb\u52a8\u7aef\u7684\u754c\u9762\uff0c\u4e3a\u4e86\u80fd\u591f\u66f4\u65b9\u4fbf\u7684\u4f7f\u7528\uff0c\u6211\u4eec\u5e38\u5e38\u5e0c\u671b\u4f7f\u7528\u4e5d\u5bab\u683c\u754c\u9762\u7684\u65b9\u5f0f\u4f5c\u4e3a\u5bfc\u822a\uff0c\u90a3\u8981\u5982\u4f55\u5b9e\u73b0\u5462\uff1f \u57fa\u4e8e\u4e00\u4e2a\u7b80\u5355\u7684\u601d\u8003\uff0c\u4e5d\u5bab\u683c\u5c31\u662f\u4e09\u884c\u4e09\u5217\uff0c\u5982\u679c\u628a\u884c\u4f5c\u4e3a\u4e00\u4e2a\u5355\u4f4d\uff0c\u518d\u5c06\u6bcf\u4e00\u884c\u5206\u6210\u4e09\u5217\uff0c\u90a3\u662f\u4e0d\u662f\u5c31\u53ef\u4ee5\u4e86\uff1f\u6211\u4eec\u5b9e\u8df5\u4e00\u4e0b\u3002 \u9996\u5148\u6765\u8003\u8651\u4e5d\u5bab\u683c\u6570\u636e\u7684\u751f\u6210\uff0c\u6bcf\u4e00\u4e2a\u683c\u5b50\u9700\u8981\u6709\u4e00\u4e2a\u56fe\u6807\u3001\u4e00\u4e2a\u6807\u9898\u3001\u4e00\u4e2a\u4fbf\u4e8e\u8df3\u8f6c\u7684\u8def\u7531\uff0c\u90a3\u5929\u73b0\u5728\u6211\u4eec\u6709\u4e5d\u4e2a\u9875\u9762\uff0c\u6240\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u5373\u53ef\u3002\u4e3a\u4e86\u66f4\u597d\u7684\u8fdb\u884c\u540e\u7eed\u7684\u914d\u7f6e\uff0c\u6211\u4eec\u5c06\u8fd9\u4e2a\u6570\u7ec4\u72ec\u7acb\u5230\u4e00\u4e2a\u6587\u4ef6\u4e2droutes.\uff0c\u7136\u540e\u5c06\u5176\u5728index.js\u9875\u9762\u4e2d\u5f15\u7528\uff0croutes\u653e\u5230index\u7684\u76ee\u5f55\u4e0b\u3002 var PageItems =   [    {     text: ‘\u683c\u5b501’,     icon: ‘..\/..\/images\/c1.png’,     route: ‘..\/c1\/c1’,    },    {     text: ‘\u683c\u5b502’,     icon: ‘..\/..\/images\/c2.png’,     route: ‘..\/c2\/c2’,    },     {     text: ‘\u683c\u5b503’,     icon: ‘..\/..\/images\/c3.png’,     route: ‘..\/c3\/c3’,    },    {     text: ‘\u683c\u5b504’,     icon: ‘..\/..\/images\/c4.png’,     route: ‘..\/c4\/c4’,    },    {     text: ‘\u683c\u5b505’,     icon: ‘..\/..\/images\/c5’,     route: ‘..\/c5\/c5’,    },    {     text: ‘\u683c\u5b506’,     icon: ‘..\/..\/images\/c6.png’,     route: ‘..\/c6\/c6’,    },    {     text: ‘\u683c\u5b507’,     icon: ‘..\/..\/images\/c7.png’,     route: ‘..\/c7\/c7’,    },    {     text: ‘\u683c\u5b508’,     icon: ‘..\/..\/images\/c8’,     route: ‘..\/c8\/c8’,    },    {     text: ‘\u683c\u5b509’,     icon: ‘..\/..\/images\/c9.png’,     route: ‘..\/c9\/c9’,    }   ];  module.exports = {   PageItems: PageItems  } […]<\/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-29218","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29218","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=29218"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29218\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=29218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=29218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=29218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}