{"id":28659,"date":"2024-11-25T17:12:56","date_gmt":"2024-11-25T09:12:56","guid":{"rendered":"https:\/\/fwq.ai\/blog\/28659\/"},"modified":"2024-11-25T17:12:56","modified_gmt":"2024-11-25T09:12:56","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%8f%af%e5%bc%80%e5%8f%91%e5%ae%9e%e4%be%8b%ef%bc%9a%e8%b1%86%e7%93%a3%e5%9b%be%e4%b9%a6%e5%b0%8f%e7%a8%8b%e5%ba%8f","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/28659\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u53ef\u5f00\u53d1\u5b9e\u4f8b\uff1a\u8c46\u74e3\u56fe\u4e66\u5c0f\u7a0b\u5e8f"},"content":{"rendered":"

\u6700\u8fd1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u88ab\u7092\u5f97\u5f88\u706b\u70ed\uff0c\u672c\u4eba\u4e5f\u62b1\u7740\u8bd5\u4e00\u8bd5\u7684\u6001\u5ea6\u4e0b\u8f7d\u4e86\u5fae\u4fe1web\u5f00\u53d1\u8005\u5de5\u5177\uff0c\u5f00\u53d1\u5de5\u5177\u6bd4\u8f83\u7b80\u6d01\uff0c\u529f\u80fd\u76f8\u5bf9\u6bd4\u8f83\u5c11\uff0c\u4e2a\u6027\u5316\u8bbe\u7f6e\u4e5f\u6ca1\u6709\u3002\u4e86\u89e3\u5b8c\u5f00\u53d1\u5de5\u5177\u4e4b\u540e\uff0c\u987a\u4fbf\u770b\u4e86\u4e00\u4e0b\u5c0f\u7a0b\u5e8f\u7684\u5b98\u65b9\u5f00\u53d1\u6587\u6863\uff0c\u5927\u6982\u4e86\u89e3\u4e86\u5c0f\u7a0b\u5e8f\u7684\u5f00\u53d1\u6d41\u7a0b\u548c\u4e00\u4e9b\u5e38\u7528\u7684api\u3002<\/p>\n

\u4e86\u89e3\u4e86\u5c0f\u7a0b\u5e8f\u4e4b\u540e\uff0c\u81ea\u5df1\u5c31\u6709\u4e86\u60f3\u8981\u505a\u4e00\u4e2a\u5c0fdemo\u7684\u51b2\u52a8\uff0c\u867d\u7136\u81ea\u5df1\u5bf9\u5c0f\u7a0b\u5e8f\u8fd8\u6ca1\u6709\u505a\u8fc7\u5f88\u591a\u5b9e\u8df5\uff0c\u53ea\u662f\u5728\u5b98\u65b9\u4f8b\u5b50\u4e0a\u5f98\u5f8a\uff0c\u4f46\u662f\u8fd8\u662f\u60f3\u505a\u51fa\u70b9\u5c0f\u4e1c\u897f\u3002\u65e2\u7136\u8981\u505a\u4e00\u4e2ademo\uff0c\u81ea\u7136\u9700\u8981\u5230\u6570\u636e\uff0c\u81ea\u5df1\u6709\u53c8\u4e0d\u60f3\u72ec\u81ea\u642d\u5efa\u670d\u52a1\u7aef\uff0c\u6240\u4ee5\u5728\u7f51\u4e0a\u641c\u7d22\u53ef\u4ee5\u7528\u6765\u63d0\u4f9b\u6d4b\u8bd5\u6570\u636e\u7684\u514d\u8d39api\uff0c\u6700\u540e\u6211\u9009\u62e9\u4e86\u8c46\u74e3\u56fe\u4e66\u3002\u8c46\u74e3\u56fe\u4e66\u63d0\u4f9b\u7684api\u529f\u80fd\u6bd4\u8f83\u5c11\uff0c\u52a0\u4e0a\u4e0d\u5f00\u653eappkey\u7533\u8bf7\uff0c\u6240\u4ee5\u65e0\u6cd5\u64cd\u4f5c\u7528\u6237\u6570\u636e\u3002\u53ea\u80fd\u505a\u70b9\u7b80\u5355\u7684\u56fe\u4e66\u67e5\u8be2\u548c\u56fe\u4e66\u8be6\u7ec6\u4fe1\u606f\u5c55\u793a\uff0c\u8fd9\u4e2ademo\u53ea\u6709\u4e24\u4e2a\u9875\u9762\uff0c\u975e\u5e38\u4e4b\u7b80\u5355\u3002<\/p>\n

\u8c46\u74e3\u56fe\u4e66API<\/h2>\n

demo\u4e2d\u7528\u5230\u7684\u8c46\u74e3\u56fe\u4e66api\u53ea\u6709\u4e24\u4e2a\uff0c\u4e00\u4e2a\u662f\u56fe\u4e66\u641c\u7d22\uff0c\u53e6\u4e00\u4e2a\u662f\u83b7\u53d6\u56fe\u4e66\u8be6\u60c5\u3002<\/p>\n

\u641c\u7d22\u56fe\u4e66<\/h3>\n\n\n\n\n\n\n\n\n
\u53c2\u6570<\/th>\n\u610f\u4e49<\/th>\n\u5907\u6ce8<\/th>\n<\/tr>\n<\/thead>\n
q<\/td>\n\u67e5\u8be2\u5173\u952e\u5b57<\/td>\nq\u548ctag\u5fc5\u4f20\u5176\u4e00<\/td>\n<\/tr>\n
tag<\/td>\n\u67e5\u8be2\u7684tag<\/td>\nq\u548ctag\u5fc5\u4f20\u5176\u4e00<\/td>\n<\/tr>\n
start<\/td>\n\u53d6\u7ed3\u679c\u7684offset<\/td>\n\u9ed8\u8ba4\u4e3a0<\/td>\n<\/tr>\n
count<\/td>\n\u53d6\u7ed3\u679c\u7684\u6761\u6570<\/td>\n\u9ed8\u8ba4\u4e3a20\uff0c\u6700\u5927\u4e3a100<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u8fd4\u56destatus=200<\/p>\n

{\r\n  \"start\": 0,\r\n  \"count\": 10,\r\n  \"total\": 30,\r\n  \"books\" : [Book, ...]\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u83b7\u53d6\u56fe\u4e66\u8be6\u60c5<\/h3>\n
GET  http:\/\/www.php.cn\/:id<\/p>\n\n\n\n\n\n
\u53c2\u6570<\/th>\n\u610f\u4e49<\/th>\n<\/tr>\n<\/thead>\n
:id<\/td>\n\u56fe\u4e66id<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u4ee5\u4e0b\u662f\u5177\u4f53\u56fe\u4e66\u7684\u8be6\u60c5\u4fe1\u606f\uff0c\u90e8\u5206demo\u4e2d\u7528\u4e0d\u5230\u7684\u4fe1\u606f\u7701\u7565<\/p>\n
{\r\n    \"id\":\"1003078\",\r\n    \"title\":\"\u5c0f\u738b\u5b50\",\r\n    \"alt\":\"https:\/\/book.douban.com\/subject\/1003078\/\",\r\n    \"image\":\"https:\/\/img3.doubanio.com\/mpic\/s1001902.jpg\",\r\n    \"author\":[\r\n        \"\uff08\u6cd5\uff09\u5723\u57c3\u514b\u82cf\u4f69\u91cc\"\r\n        ],\r\n    \"publisher\":\"\u4e2d\u56fd\u53cb\u8c0a\u51fa\u7248\u516c\u53f8\",\r\n    \"pubdate\":\"2000-9-1\",\r\n    \"rating\":{\"max\":10,\"numRaters\":9438,\"average\":\"9.1\",\"min\":0},\r\n    \"author_intro\":\"\u5723\u57c3\u514b\u82cf\u4f69\u91cc\uff081900\uff0d1944\uff091900\u5e74\uff0c\u739b\u96c5\u00b7\u6234\u65af\u7279\u83b1\u59c6......\",\r\n    \"catalog\":\"\u5e8f\u8a00\uff1a\u6cd5\u5170\u897f\u73ab\u7470\n\u5c0f\u738b\u5b50\n\u5723\u57c3\u514b\u82cf\u4f69\u91cc\u5e74\u8868\n\"\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
Demo\u7f16\u5199<\/h2>\n
\u521b\u5efa\u9879\u76ee<\/h3>\n
\u9879\u76ee\u53d6\u540d\u4e3aDouBanBookApp\uff0c\u9879\u76ee\u7684\u7ed3\u6784\u5c0f\u7a0b\u5e8f\u9ed8\u8ba4\u7684\u7ed3\u6784\u4e00\u6837<\/p>\n
DouBanBookApp\r\n    pages\r\n        index \u9996\u9875\r\n            index.js\r\n            index.wxml\r\n            index.wxss\r\n        detail \u8be6\u60c5\u9875\r\n            detail.js\r\n            detail.wxml\r\n            detail.wxss\r\n    requests \r\n        api.js API\u5730\u5740\r\n        request.js \u7f51\u7edc\u8bf7\u6c42\r\n    utils\r\n        util.js \u5de5\u5177\r\n    app.js\r\n    app.json\r\n    app.wxss<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5e94\u7528\u7684\u4e3b\u8c03\u8272\u53c2\u8003\u4e86\u8c46\u74e3app\u7684\u8272\u8c03\uff0c\u91c7\u7528\u4e86\u504f\u7eff\u8272\u3002<\/p>\n
\u9996\u9875<\/h3>\n
\u9996\u9875\u9876\u90e8\u5c55\u793a\u641c\u7d22\u8f93\u5165\u6846\uff0c\u7528\u6237\u8f93\u5165\u56fe\u4e66\u540d\u79f0\uff0c\u70b9\u51fb\u641c\u7d22\u6309\u94ae\uff0c\u5c55\u793a\u56fe\u4e66\u5217\u8868\u3002\u56fe\u4e66\u53ef\u80fd\u4f1a\u5f88\u591a\uff0c\u4e0d\u80fd\u4e00\u4e0b\u5b50\u5168\u90e8\u5c55\u793a\uff0c\u9700\u8981\u7528\u5230\u5206\u9875\uff0capp\u4e0a\u6700\u5e38\u89c1\u7684\u5217\u8868\u5206\u9875\u5c31\u662f\u4e0a\u62c9\u52a0\u8f7d\u6a21\u5f0f\uff0c\u6839\u636e\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u7684\u7ec4\u4ef6\u4e2d\uff0c\u627e\u5230\u4e86\u4e00\u4e2a\u6bd4\u8f83\u7b26\u5408\u573a\u666f\u7684scroll-view\u7ec4\u4ef6\uff0c\u8fd9\u4e2a\u7ec4\u4ef6\u6709\u4e00\u4e2a\u4e0a\u62c9\u5230\u5e95\u90e8\u81ea\u52a8\u89e6\u53d1\u7684bindscrolltolower\u4e8b\u4ef6\u3002<\/p>\n
\u5148\u5236\u4f5c\u51fa\u754c\u9762\u7684\u9759\u6001\u6548\u679c\uff0c\u4e4b\u540e\u518d\u6574\u5408API\uff0c\u7531\u4e8e\u672c\u4eba\u5bf9\u754c\u9762\u8bbe\u8ba1\u4e0d\u654f\u611f\uff0c\u6240\u4ee5\u968f\u4fbf\u5f04\u4e86\u4e00\u4e2a\u7c97\u7cd9\u7684\u5e03\u5c40\uff0c\u770b\u5f97\u8fc7\u53bb\u5c31\u884c\u4e86\uff0c\u563f\u563f~~<\/p>\n
index.wxml<\/p>\n
<\/p>\n
<view>\r\n  <input><icon><\/icon><\/view><scroll-view>\r\n\r\n    <view>\r\n      <icon><\/icon>\r\n      <view><text>\u6ca1\u6709\u627e\u5230\u76f8\u5173\u56fe\u4e66<\/text><\/view>\r\n    <\/view>\r\n\r\n    <view>\r\n      <icon><\/icon>\r\n      <view><text>\u8c46\u74e3\u56fe\u4e66<\/text><\/view>\r\n    <\/view>\r\n    \r\n    <view>\r\n      <text>\u56fe\u4e66 10\u672c\u56fe\u4e66<\/text>\r\n    <\/view>\r\n\r\n    <view>\r\n\r\n    <view>\r\n      <view>\r\n        <view>\r\n          <image><\/image>\r\n        <\/view>\r\n        <view>\r\n          <view>\u56fe\u4e66\u6807\u56fe<\/view>\r\n          <text>9.0\/oopsguy\/2016-07-08<\/text>\r\n        <\/view>\r\n      <\/view>\r\n    <\/view>\r\n\r\n    <\/view>\r\n\r\n    <view>\r\n      <icon><\/icon>\r\n    <\/view><\/scroll-view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
index.wxss<\/p>\n
<\/p>\n
page {\r\n  background: #F2F1EE;}\/*seach*\/.search-container {\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  left: 0;\r\n  background-color: #42BD56;\r\n  color: #FFF;\r\n  height: 40px;\r\n  padding: 0 10rpx;\r\n  z-index: 100;}.search-container input {\r\n  background: #FFF;\r\n  color: #AAA;\r\n  margin-top: 5px;\r\n  padding: 5px 10rpx;\r\n  height: 20px;\r\n  border-radius: 8rpx;}.search-container icon {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 20rpx;}\/*header*\/.header {\r\n  padding: 20rpx 30rpx;}.header text {\r\n  color: #A6A6A6;}\/*common list*\/.list-item {\r\n  position: relative;\r\n  overflow: hidden}\/*index list*\/.index-list-item {\r\n  background: #FFF;\r\n  padding: 15rpx 30rpx;\r\n  overflow: hidden;}.index-list-item::active {\r\n  background: #EEE;}.index-list-item .cover {\r\n  float: left;\r\n  width: 120rpx;\r\n  height: 160rpx;\r\n  overflow: hidden}.index-list-item .cover image.cover-img {\r\n  width: 120rpx;\r\n  height: 160rpx;}.index-list-item .content {\r\n  margin-left: 140rpx;}.index-list-item .title {\r\n  display: inline-block;\r\n  height: 90rpx;\r\n  padding-top: 20rpx;\r\n  overflow: hidden;}.index-list-item .desc  {\r\n  display: block;\r\n  font-size: 30rpx;\r\n  padding-top: 10rpx;\r\n  color: #AAA;\r\n  white-space:nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;}.refresh-footer {\r\n  text-align: center;\r\n  padding: 10rpx 0;}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u56fe\u4e66\u8be6\u7ec6\u9875\u9762<\/h3>\n
\u56fe\u4e66\u8be6\u7ec6\u9875\u9762\u5c31\u662f\u5c55\u793a\u5177\u4f53\u7684\u56fe\u4e66\u4fe1\u606f\uff0c\u901a\u7528\u9996\u9875\u7a7f\u8fc7\u4e86\u7684\u56fe\u4e66id\u6765\u83b7\u53d6\u56fe\u4e66\u4fe1\u606f\u4e4b\u540e\u5728\u5c55\u793a\u51fa\u6765\uff0c\u83b7\u53d6\u7684\u8fc7\u7a0b\u4e2d\u53ef\u80fd\u6709\u5ef6\u8fdf\uff0c\u9700\u8981\u4e00\u4e2a\u52a0\u8f7d\u6548\u679c\u6765\u8fc7\u6e21\u3002<\/p>\n
detail.wxml<\/p>\n
<view>\r\n    <view>\r\n        <image><\/image>\r\n    <\/view>\r\n\r\n    <view>\r\n        <view>\r\n            <text>\u56fe\u4e66\u6807\u9898<\/text>\r\n            <text>\u4f5c\u8005\uff1a\u4f5c\u8005\u540d\u79f0<\/text>\r\n            <text>\u51fa\u7248\u793e\uff1axxx\u51fa\u7248\u793e<\/text>\r\n            <text>\u51fa\u7248\u65e5\u671f\uff1a2010-05-07<\/text>\r\n        <\/view>\r\n        <view>\r\n            <text>0<\/text>\r\n            <text>0<\/text>\r\n        <\/view>\r\n    <\/view>\r\n\r\n    <view>\r\n        <view><text>\u7b80\u4ecb<\/text><\/view>\r\n        <text>\r\n            \u8fd9\u662f\u56fe\u4e66\u7b80\u4ecb        <\/text>\r\n    <\/view>\r\n\r\n    <view>\r\n        <view><text>\u4f5c\u8005<\/text><\/view>\r\n        <text>\r\n            \u8fd9\u662f\u4f5c\u8005\u7b80\u4ecb        <\/text>\r\n    <\/view><\/view><loading>\r\n    \u52a0\u8f7d\u4e2d...<\/loading><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
detail.wxss<\/p>\n
<\/p>\n
page {\r\n    background: #EEE;}.cover-container {\r\n    background: #42BD56;\r\n    text-align: center;\r\n    padding: 50rpx 0;}.cover-container image {\r\n    display: inline-block;\r\n    width: 300rpx;\r\n    height: 400rpx;}.book-meta {\r\n    position: relative;\r\n    padding: 20rpx;\r\n    overflow: hidden;}.book-meta .range {\r\n    position: absolute;\r\n    top: 30rpx;\r\n    right: 20rpx;\r\n    width: 180rpx;\r\n    background: #FFF;\r\n    padding: 20rpx 10rpx;\r\n    text-align: center;\r\n    box-shadow: 2px 2px 10px #CCC;}.book-meta .meta-info {\r\n    margin-right: 200rpx;}.meta-info text {\r\n    display: block}.book-title {\r\n    font-weight: bold;\r\n    font-size: 50rpx;}.other-meta {\r\n    padding-top: 10rpx;\r\n    color: #888;\r\n    font-size: 30rpx;}.range text {\r\n    display: block;}.range .score {\r\n    font-size: 50rpx;\r\n    font-weight: bold;}.range .starts {\r\n    font-size: 40rpx;}.range .viewers {\r\n    font-size: 30rpx;}.book-intro {\r\n    padding: 20rpx;\r\n    font-size: 40rpx;}.book-intro .intro-header {\r\n    color: #888}.book-intro .intro-content {\r\n    font-size: 35rpx;\r\n    line-height: 45rpx;}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u505a\u597d\u4e86\u9996\u9875\u548c\u8be6\u7ec6\u9875\u7684\u9759\u6001\u9875\u9762\uff0c\u63a5\u4e0b\u6765\u5c31\u662f\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42api\u6765\u83b7\u53d6\u6570\u636e\uff0c\u5e76\u663e\u793a\u5230\u9875\u9762\u4e0a\u6765\u3002<\/p>\n
\u7f51\u7edc\u8bf7\u6c42\u548c\u6570\u636e\u5904\u7406<\/h3>\n
\u4e3a\u4e86\u66f4\u597d\u7684\u7ba1\u7406api\uff0c\u6211\u628aapi\u4e13\u95e8\u653e\u5230\u4e86\u4e00\u4e2a\u5355\u72ec\u7684api.js\u6587\u4ef6\u4e2d<\/p>\n
api.js<\/p>\n
<\/p>\n
const API_BASE = \"https:\/\/api.douban.com\/v2\/book\";module.exports = {\r\n  API_BOOK_SEARCH: API_BASE + \"\/search\",\r\n  API_BOOK_DETAIL: API_BASE + \"\/:id\"}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u6709\u4e9b\u7ecf\u5e38\u7528\u5230\u7684\u5de5\u5177\u51fd\u6570\u653e\u5230\u4e86util.js\u4e2d<\/p>\n
util.js<\/p>\n
function isFunction( obj ) {\r\n  return typeof obj === 'function';\r\n}\r\n\r\nmodule.exports = {\r\n  isFunction: isFunction\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u4e86\u4e00\u4e2a\u7528\u4e8e\u7f51\u7edc\u8bf7\u6c42\u7684api\uff1awx.request(OBJECT)\uff0c\u5177\u4f53\u7684\u53c2\u6570\u8ddfjquery\u7684ajax\u65b9\u6cd5\u5dee\u4e0d\u591a\uff0c\u4e3a\u4e86\u65b9\u4fbf\u8c03\u7528\uff0c\u6211\u628a\u7f51\u7edc\u8bf7\u6c42\u653e\u5230\u4e86request.js\u4e2d<\/p>\n
request.js<\/p>\n
<\/p>\n
var api = require('.\/api.js');var utils = require('..\/utils\/util.js');\/** * \u7f51\u8def\u8bf7\u6c42 *\/function request(url, data, successCb, errorCb, completeCb) {\r\n    wx.request({\r\n        url: url,\r\n        method: 'GET',\r\n        data: data,\r\n        success: function(res) {\r\n            utils.isFunction(successCb) &amp;&amp; successCb(res.data);\r\n        },\r\n        error: function() {\r\n            utils.isFunction(errorCb) &amp;&amp; errorCb();\r\n        },\r\n        complete: function() {\r\n            utils.isFunction(completeCb) &amp;&amp; completeCb();\r\n        }\r\n    });}\/** * \u641c\u7d22\u56fe\u4e66 *\/function requestSearchBook(data, successCb, errorCb, completeCb) {\r\n    request(api.API_BOOK_SEARCH, data, successCb, errorCb, completeCb);}\/** * \u83b7\u53d6\u56fe\u4e66\u8be6\u7ec6\u4fe1\u606f *\/function requestBookDokDetail(id, data, successCb, errorCb, completeCb) {\r\n    request(api.API_BOOK_DETAIL.replace(':id', id), data, successCb, errorCb, completeCb);}module.exports = {\r\n  requestSearchBook: requestSearchBook,\r\n  requestBookDokDetail: requestBookDokDetail}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u9996\u9875\u6709\u56fe\u4e66\u641c\u7d22\u548c\u5217\u8868\u5c55\u793a\uff0c\u4e0a\u62c9\u52a0\u8f7d\u7684\u6548\u679c\u3002\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u6ca1\u6709\u4e86DOM\u64cd\u4f5c\u7684\u6982\u5ff5\uff0c\u4e00\u5207\u7684\u754c\u9762\u5143\u7d20\u7684\u6539\u53d8\u90fd\u8981\u901a\u8fc7\u6570\u636e\u53d8\u5316\u6765\u6539\u53d8\uff0c\u6240\u4ee5\u9700\u8981\u5728js\u4e2d\u7684Page\u4e2d\u7684data\u4e2d\u58f0\u660e\u5f88\u591a\u6570\u636e\u6210\u5458\u3002<\/p>\n
\u7528\u6237\u5728\u8f93\u5165\u6570\u636e\u65f6\uff0c\u8f93\u5165\u6846\u7684input\u7ed1\u5b9a\u4e86searchInputEvent\u4e8b\u4ef6\uff0c\u5c31\u56de\u6355\u83b7\u5230\u8f93\u5165\u7684\u6570\u636e\uff0c\u628a\u8f93\u5165\u7684\u6570\u636e\u66f4\u65b0\u7684data\u4e2d\u7684searchKey\u4e2d\u3002<\/p>\n
<\/p>\n
searchInputEvent: function( e ) {\r\n    this.setData( { searchKey: e.detail.value });}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5f53\u70b9\u51fb\u641c\u7d22\u6309\u94ae\u662f\uff0c\u89e6\u53d1tap\u4e8b\u4ef6\uff0c\u5176\u7ed1\u5b9a\u4e86searchClickEvent<\/p>\n
<\/p>\n
searchClickEvent: function( e ) {\r\n    if( !this.data.searchKey )      return;\r\n    this.setData( { pageIndex: 0, pageData: [] });\r\n    requestData.call( this );}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
requestData\u4e2d\u5c01\u88c5\u4e86\u8bf7\u6c42\u56fe\u4e66\u5217\u8868\u7684\u65b9\u6cd5<\/p>\n
<\/p>\n
\/** * \u8bf7\u6c42\u56fe\u4e66\u4fe1\u606f *\/function requestData() {\r\n  var _this = this;\r\n  var q = this.data.searchKey;\r\n  var start = this.data.pageIndex;\r\n\r\n  this.setData( { loadingMore: true, isInit: false });\r\n  updateRefreshBall.call( this );\r\n\r\n  requests.requestSearchBook( { q: q, start: start }, ( data ) =&gt; {\r\n    if( data.total == 0 ) {\r\n      \/\/\u6ca1\u6709\u8bb0\u5f55\r\n      _this.setData( { totalRecord: 0 });\r\n    } else {\r\n      _this.setData( {\r\n        pageData: _this.data.pageData.concat( data.books ),\r\n        pageIndex: start + 1,\r\n        totalRecord: data.total\r\n      });\r\n    }\r\n  }, () =&gt; {\r\n    _this.setData( { totalRecord: 0 });\r\n  }, () =&gt; {\r\n    _this.setData( { loadingMore: false });\r\n  });}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0a\u62c9\u52a0\u8f7d\u7684\u6548\u679c\u662f\u4e00\u4e2a\u5c0f\u7403\u4e0d\u505c\u7684\u53d8\u6362\u989c\u8272\uff0c\u9700\u8981\u4e00\u4e2a\u989c\u8272\u5217\u8868<\/p>\n
<\/p>\n
\/\/\u5237\u65b0\u52a8\u6001\u7403\u989c\u8272var iconColor = [  '#353535', '#888888'];<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u7136\u540e\u7528\u4e00\u4e2a\u5b9a\u65f6\u5668\u6765\u52a8\u6001\u6539\u53d8\u5c0f\u7403\u56fe\u6807\u7684\u989c\u8272<\/p>\n
<\/p>\n
\/** * \u5237\u65b0\u4e0a\u62c9\u52a0\u8f7d\u6548\u679c\u53d8\u8272\u7403 *\/function updateRefreshBall() {\r\n  var cIndex = 0;\r\n  var _this = this;\r\n  var timer = setInterval( function() {\r\n    if( !_this.data[ 'loadingMore' ] ) {\r\n      clearInterval( timer );\r\n    }\r\n    if( cIndex &gt;= iconColor.length )\r\n      cIndex = 0;\r\n    _this.setData( { footerIconColor: iconColor[ cIndex++ ] });\r\n  }, 100 );}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u8be6\u7ec6\u9875\u9762\u7684\u663e\u793a\u9700\u8981\u5230\u9996\u9875\u70b9\u51fb\u4e86\u5177\u4f53\u56fe\u4e66\u7684id\uff0c\u6240\u4ee5\u9700\u8981\u9996\u9875\u4f20\u503c\u8fc7\u6765\uff0c\u8fd9\u91cc\u7528\u5230\u4e86\u5c0f\u7a0b\u5e8f\u571f\u5de5\u7684wx.navigateTo\u65b9\u6cd5\uff0c\u7ed9\u5176\u6307\u5b9a\u7684url\u53c2\u6570\u540e\u9762\u5e26\u4ee5\u67e5\u8be2\u5b57\u7b26\u4e32\u683c\u5f0f\u5f62\u5f0f\u7684\u53c2\u6570\uff0c\u88ab\u8df3\u8f6c\u7684\u9875\u9762\u5c31\u4f1a\u5728onLoad\u65b9\u6cd5\u4e2d\u5f97\u5230\u503c\u3002<\/p>\n
<\/p>\n
\/\/\u8df3\u8f6c\u5230\u8be6\u7ec6\u9875\u9762toDetailPage: function( e ) {\r\n    var bid = e.currentTarget.dataset.bid; \/\/\u56fe\u4e66id [data-bid]\r\n    wx.navigateTo( {\r\n      url: '..\/detail\/detail?id=' + bid    });}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
detail.js\u4e2d\u63a5\u53d7\u53c2\u6570<\/p>\n
<\/p>\n
onLoad: function( option ) {\r\n    this.setData({\r\n      id: option.id\r\n    });}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5176\u5b9e\u5c0f\u7a0b\u5e8f\u7684\u9875\u9762\u5236\u4f5c\u8ddf\u5e73\u65f6\u7684html\u548ccss\u5dee\u4e0d\u591a\uff0c\u53ea\u662f\u9875\u9762\u4e2d\u4e0d\u80fd\u7528\u4f20\u7edf\u7684html\u6807\u7b7e\uff0c\u800c\u662f\u6539\u7528\u4e86\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u7684\u81ea\u5b9a\u4e49\u6807\u7b7e\uff0c\u5c0f\u7a0b\u5e8f\u5bf9css\u7684\u652f\u6301\u4e5f\u6709\u9650\u5236\uff0c\u6ce8\u610f\u54ea\u4e9b\u5199\u6cd5\u4e0d\u517c\u5bb9\u4e5f\u5dee\u4e0d\u591a\u61c2\u4e86\u3002\u64cd\u4f5c\u9875\u9762\u53d8\u5316\u662f\u901a\u8fc7\u6570\u636e\u53d8\u5316\u6765\u8868\u73b0\u51fa\u6765\u7684\uff0c\u8fd9\u70b9\u6709\u70b9\u50cfreact\u548cvue\u3002\u4ee5\u4e0a\u7684demo\u7528\u5230\u7684\u77e5\u8bc6\u70b9\u5e76\u4e0d\u591a\uff0c\u4e3b\u8981\u662f\u9875\u9762\u7684\u6570\u636e\u7ed1\u5b9a\u3001\u4e8b\u4ef6\u7ed1\u5b9a\u3001\u6a21\u7248\u77e5\u8bc6\u548c\u7f51\u7edc\u8bf7\u6c42\u7b49\u76f8\u5173api\u3002\u4ed4\u7ec6\u770b\u770b\u6587\u6863\u4e5f\u5dee\u4e0d\u591a\u53ef\u4ee5\u505a\u51fa\u4e00\u4e2a\u5c0f\u4f8b\u5b50\u3002
qi<\/p>\n
\u6700\u7ec8\u6548\u679c\u56fe<\/h2>\n
\u603b\u4f53\u6765\u8bf4\uff0cDemo\u5f88\u7b80\u5355\uff0c\u53ea\u6709\u4e24\u4e2a\u9875\u9762\uff0c\u754c\u9762\u4e5f\u662f\u4e11\u4e11\u7684T_T\uff0c\u7b97\u662f\u6211\u5165\u95e8\u5c0f\u7a0b\u5e8f\u7684\u7b2c\u4e00\u8bfe\u5427\u3002<\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u53ef\u5f00\u53d1\u5b9e\u4f8b\uff1a\u8c46\u74e3\u56fe\u4e66\u5c0f\u7a0b\u5e8f\u63d2\u56fe\"<\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u53ef\u5f00\u53d1\u5b9e\u4f8b\uff1a\u8c46\u74e3\u56fe\u4e66\u5c0f\u7a0b\u5e8f\u63d2\u56fe1\"<\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u53ef\u5f00\u53d1\u5b9e\u4f8b\uff1a\u8c46\u74e3\u56fe\u4e66\u5c0f\u7a0b\u5e8f\u63d2\u56fe2\"<\/p>\n
\u66f4\u591a\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u53ef\u5f00\u53d1\u5b9e\u4f8b\u8bf7\u5173\u6ce8\u7c73\u4e91\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6700\u8fd1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u88ab\u7092\u5f97\u5f88\u706b\u70ed\uff0c\u672c\u4eba\u4e5f\u62b1\u7740\u8bd5\u4e00\u8bd5\u7684\u6001\u5ea6\u4e0b\u8f7d\u4e86\u5fae\u4fe1web\u5f00\u53d1\u8005\u5de5\u5177\uff0c\u5f00\u53d1\u5de5\u5177\u6bd4\u8f83\u7b80\u6d01\uff0c\u529f\u80fd\u76f8\u5bf9\u6bd4\u8f83\u5c11\uff0c\u4e2a\u6027\u5316\u8bbe\u7f6e\u4e5f\u6ca1\u6709\u3002\u4e86\u89e3\u5b8c\u5f00\u53d1\u5de5\u5177\u4e4b\u540e\uff0c\u987a\u4fbf\u770b\u4e86\u4e00\u4e0b\u5c0f\u7a0b\u5e8f\u7684\u5b98\u65b9\u5f00\u53d1\u6587\u6863\uff0c\u5927\u6982\u4e86\u89e3\u4e86\u5c0f\u7a0b\u5e8f\u7684\u5f00\u53d1\u6d41\u7a0b\u548c\u4e00\u4e9b\u5e38\u7528\u7684api\u3002 \u4e86\u89e3\u4e86\u5c0f\u7a0b\u5e8f\u4e4b\u540e\uff0c\u81ea\u5df1\u5c31\u6709\u4e86\u60f3\u8981\u505a\u4e00\u4e2a\u5c0fdemo\u7684\u51b2\u52a8\uff0c\u867d\u7136\u81ea\u5df1\u5bf9\u5c0f\u7a0b\u5e8f\u8fd8\u6ca1\u6709\u505a\u8fc7\u5f88\u591a\u5b9e\u8df5\uff0c\u53ea\u662f\u5728\u5b98\u65b9\u4f8b\u5b50\u4e0a\u5f98\u5f8a\uff0c\u4f46\u662f\u8fd8\u662f\u60f3\u505a\u51fa\u70b9\u5c0f\u4e1c\u897f\u3002\u65e2\u7136\u8981\u505a\u4e00\u4e2ademo\uff0c\u81ea\u7136\u9700\u8981\u5230\u6570\u636e\uff0c\u81ea\u5df1\u6709\u53c8\u4e0d\u60f3\u72ec\u81ea\u642d\u5efa\u670d\u52a1\u7aef\uff0c\u6240\u4ee5\u5728\u7f51\u4e0a\u641c\u7d22\u53ef\u4ee5\u7528\u6765\u63d0\u4f9b\u6d4b\u8bd5\u6570\u636e\u7684\u514d\u8d39api\uff0c\u6700\u540e\u6211\u9009\u62e9\u4e86\u8c46\u74e3\u56fe\u4e66\u3002\u8c46\u74e3\u56fe\u4e66\u63d0\u4f9b\u7684api\u529f\u80fd\u6bd4\u8f83\u5c11\uff0c\u52a0\u4e0a\u4e0d\u5f00\u653eappkey\u7533\u8bf7\uff0c\u6240\u4ee5\u65e0\u6cd5\u64cd\u4f5c\u7528\u6237\u6570\u636e\u3002\u53ea\u80fd\u505a\u70b9\u7b80\u5355\u7684\u56fe\u4e66\u67e5\u8be2\u548c\u56fe\u4e66\u8be6\u7ec6\u4fe1\u606f\u5c55\u793a\uff0c\u8fd9\u4e2ademo\u53ea\u6709\u4e24\u4e2a\u9875\u9762\uff0c\u975e\u5e38\u4e4b\u7b80\u5355\u3002 \u8c46\u74e3\u56fe\u4e66API demo\u4e2d\u7528\u5230\u7684\u8c46\u74e3\u56fe\u4e66api\u53ea\u6709\u4e24\u4e2a\uff0c\u4e00\u4e2a\u662f\u56fe\u4e66\u641c\u7d22\uff0c\u53e6\u4e00\u4e2a\u662f\u83b7\u53d6\u56fe\u4e66\u8be6\u60c5\u3002 \u641c\u7d22\u56fe\u4e66 \u53c2\u6570 \u610f\u4e49 \u5907\u6ce8 q \u67e5\u8be2\u5173\u952e\u5b57 q\u548ctag\u5fc5\u4f20\u5176\u4e00 tag \u67e5\u8be2\u7684tag q\u548ctag\u5fc5\u4f20\u5176\u4e00 start \u53d6\u7ed3\u679c\u7684offset \u9ed8\u8ba4\u4e3a0 count \u53d6\u7ed3\u679c\u7684\u6761\u6570 \u9ed8\u8ba4\u4e3a20\uff0c\u6700\u5927\u4e3a100 \u8fd4\u56destatus=200 { “start”: 0, “count”: 10, “total”: 30, “books” : [Book, …] } \u767b\u5f55\u540e\u590d\u5236 \u83b7\u53d6\u56fe\u4e66\u8be6\u60c5 GET  http:\/\/www.php.cn\/:id \u53c2\u6570 \u610f\u4e49 :id \u56fe\u4e66id \u4ee5\u4e0b\u662f\u5177\u4f53\u56fe\u4e66\u7684\u8be6\u60c5\u4fe1\u606f\uff0c\u90e8\u5206demo\u4e2d\u7528\u4e0d\u5230\u7684\u4fe1\u606f\u7701\u7565 { “id”:”1003078″, “title”:”\u5c0f\u738b\u5b50”, “alt”:”https:\/\/book.douban.com\/subject\/1003078\/”, “image”:”https:\/\/img3.doubanio.com\/mpic\/s1001902.jpg”, “author”:[ “\uff08\u6cd5\uff09\u5723\u57c3\u514b\u82cf\u4f69\u91cc” ], “publisher”:”\u4e2d\u56fd\u53cb\u8c0a\u51fa\u7248\u516c\u53f8”, “pubdate”:”2000-9-1″, “rating”:{“max”:10,”numRaters”:9438,”average”:”9.1″,”min”:0}, “author_intro”:”\u5723\u57c3\u514b\u82cf\u4f69\u91cc\uff081900\uff0d1944\uff091900\u5e74\uff0c\u739b\u96c5\u00b7\u6234\u65af\u7279\u83b1\u59c6……”, “catalog”:”\u5e8f\u8a00\uff1a\u6cd5\u5170\u897f\u73ab\u7470 […]<\/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-28659","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28659","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=28659"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28659\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=28659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=28659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=28659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}