Halaman utama Jelajahi Bantuan
Daftar Masuk
root
/
blog_web
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Pohon: e2f16373e6
Ranting Tag
blog_web
/
note
/
wx-miniprogram
/
index.html

index.html 370 KB
Riwayat Mentahan

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>小程序笔记 | 彪哥博客</title>
    7. 

  7.     <meta name="generator" content="VuePress 1.9.5">
    8. 

  8.     <link rel="icon" href="/blog/img/favicon.ico">
    9. 

  9.     <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    10. 

  10.     <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    11. 

  11.     <meta name="theme-color" content="#11a8cd">
    12. 

  12.     
    13. 

  13.     <link rel="preload" href="/blog/assets/css/0.styles.cf6c3304.css" as="style"><link rel="preload" href="/blog/assets/js/app.b419507c.js" as="script"><link rel="preload" href="/blog/assets/js/2.602aac03.js" as="script"><link rel="preload" href="/blog/assets/js/31.4d385616.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.05bc42d6.js"><link rel="prefetch" href="/blog/assets/js/100.93782085.js"><link rel="prefetch" href="/blog/assets/js/101.49f33592.js"><link rel="prefetch" href="/blog/assets/js/102.b391aaca.js"><link rel="prefetch" href="/blog/assets/js/103.b5c297df.js"><link rel="prefetch" href="/blog/assets/js/104.1b8956b0.js"><link rel="prefetch" href="/blog/assets/js/105.4af5ed2a.js"><link rel="prefetch" href="/blog/assets/js/106.f5ff0141.js"><link rel="prefetch" href="/blog/assets/js/107.9b0935ed.js"><link rel="prefetch" href="/blog/assets/js/108.a3b3e687.js"><link rel="prefetch" href="/blog/assets/js/109.0faeea62.js"><link rel="prefetch" href="/blog/assets/js/11.803b5050.js"><link rel="prefetch" href="/blog/assets/js/110.05696e77.js"><link rel="prefetch" href="/blog/assets/js/111.33bbfeaf.js"><link rel="prefetch" href="/blog/assets/js/112.cc349461.js"><link rel="prefetch" href="/blog/assets/js/113.ee6a59a5.js"><link rel="prefetch" href="/blog/assets/js/114.837d6a71.js"><link rel="prefetch" href="/blog/assets/js/115.035a54c0.js"><link rel="prefetch" href="/blog/assets/js/116.bffbfdca.js"><link rel="prefetch" href="/blog/assets/js/117.effbf98c.js"><link rel="prefetch" href="/blog/assets/js/118.a2ce28a1.js"><link rel="prefetch" href="/blog/assets/js/119.da6e315d.js"><link rel="prefetch" href="/blog/assets/js/12.68f9aa15.js"><link rel="prefetch" href="/blog/assets/js/120.edc4f23e.js"><link rel="prefetch" href="/blog/assets/js/121.67388947.js"><link rel="prefetch" href="/blog/assets/js/122.0e892f37.js"><link rel="prefetch" href="/blog/assets/js/123.9c12e399.js"><link rel="prefetch" href="/blog/assets/js/124.e265d82a.js"><link rel="prefetch" href="/blog/assets/js/125.07ad81ea.js"><link rel="prefetch" href="/blog/assets/js/126.30be0256.js"><link rel="prefetch" href="/blog/assets/js/127.daf6f659.js"><link rel="prefetch" href="/blog/assets/js/128.c3aa5522.js"><link rel="prefetch" href="/blog/assets/js/129.60c2ac70.js"><link rel="prefetch" href="/blog/assets/js/13.b2f4726e.js"><link rel="prefetch" href="/blog/assets/js/130.283b36c2.js"><link rel="prefetch" href="/blog/assets/js/131.36fd29f9.js"><link rel="prefetch" href="/blog/assets/js/132.aa486fed.js"><link rel="prefetch" href="/blog/assets/js/133.5244b658.js"><link rel="prefetch" href="/blog/assets/js/134.5d546ce7.js"><link rel="prefetch" href="/blog/assets/js/135.efe5189e.js"><link rel="prefetch" href="/blog/assets/js/136.0e15e278.js"><link rel="prefetch" href="/blog/assets/js/137.9ed0177b.js"><link rel="prefetch" href="/blog/assets/js/138.0b8bc204.js"><link rel="prefetch" href="/blog/assets/js/139.cc005358.js"><link rel="prefetch" href="/blog/assets/js/14.8dc92978.js"><link rel="prefetch" href="/blog/assets/js/140.bc32a870.js"><link rel="prefetch" href="/blog/assets/js/141.acfd1af2.js"><link rel="prefetch" href="/blog/assets/js/142.4acb4dd6.js"><link rel="prefetch" href="/blog/assets/js/143.8182807e.js"><link rel="prefetch" href="/blog/assets/js/144.20a6c974.js"><link rel="prefetch" href="/blog/assets/js/145.f3a9911c.js"><link rel="prefetch" href="/blog/assets/js/146.3ed86675.js"><link rel="prefetch" href="/blog/assets/js/147.fa9b3898.js"><link rel="prefetch" href="/blog/assets/js/148.f498d3e2.js"><link rel="prefetch" href="/blog/assets/js/149.3fe441c6.js"><link rel="prefetch" href="/blog/assets/js/15.c32eb5e6.js"><link rel="prefetch" href="/blog/assets/js/150.6d73379d.js"><link rel="prefetch" href="/blog/assets/js/151.4916058e.js"><link rel="prefetch" href="/blog/assets/js/152.42f788ce.js"><link rel="prefetch" href="/blog/assets/js/153.57ac80e4.js"><link rel="prefetch" href="/blog/assets/js/154.46b3a2b3.js"><link rel="prefetch" href="/blog/assets/js/155.f16ed794.js"><link rel="prefetch" href="/blog/assets/js/156.7004ac8c.js"><link rel="prefetch" href="/blog/assets/js/157.54029a82.js"><link rel="prefetch" href="/blog/assets/js/158.d1a36e56.js"><link rel="prefetch" href="/blog/assets/js/159.e3aba89f.js"><link rel="prefetch" href="/blog/assets/js/16.ce96f674.js"><link rel="prefetch" href="/blog/assets/js/160.da511416.js"><link rel="prefetch" href="/blog/assets/js/161.e4fc79bf.js"><link rel="prefetch" href="/blog/assets/js/162.f214074e.js"><link rel="prefetch" href="/blog/assets/js/163.4bf1ce2d.js"><link rel="prefetch" href="/blog/assets/js/164.50c2a26a.js"><link rel="prefetch" href="/blog/assets/js/165.3fadd30d.js"><link rel="prefetch" href="/blog/assets/js/166.b46fceba.js"><link rel="prefetch" href="/blog/assets/js/167.6c6747d8.js"><link rel="prefetch" href="/blog/assets/js/168.87ccce63.js"><link rel="prefetch" href="/blog/assets/js/169.e1e1c58b.js"><link rel="prefetch" href="/blog/assets/js/17.a693fe7f.js"><link rel="prefetch" href="/blog/assets/js/170.755abdff.js"><link rel="prefetch" href="/blog/assets/js/171.a6b69067.js"><link rel="prefetch" href="/blog/assets/js/172.52c10d67.js"><link rel="prefetch" href="/blog/assets/js/173.568ec26d.js"><link rel="prefetch" href="/blog/assets/js/174.f6ff5c51.js"><link rel="prefetch" href="/blog/assets/js/175.f2d646a9.js"><link rel="prefetch" href="/blog/assets/js/176.2fd93f9c.js"><link rel="prefetch" href="/blog/assets/js/177.fc5683f6.js"><link rel="prefetch" href="/blog/assets/js/178.432e7e1f.js"><link rel="prefetch" href="/blog/assets/js/179.e63b01b0.js"><link rel="prefetch" href="/blog/assets/js/18.6df3c873.js"><link rel="prefetch" href="/blog/assets/js/180.7a136172.js"><link rel="prefetch" href="/blog/assets/js/181.6e78e56b.js"><link rel="prefetch" href="/blog/assets/js/182.73d2f94a.js"><link rel="prefetch" href="/blog/assets/js/183.dce8f42f.js"><link rel="prefetch" href="/blog/assets/js/184.94ec7685.js"><link rel="prefetch" href="/blog/assets/js/185.c3561080.js"><link rel="prefetch" href="/blog/assets/js/186.63b6c4b4.js"><link rel="prefetch" href="/blog/assets/js/187.b1ca4046.js"><link rel="prefetch" href="/blog/assets/js/188.6525cd10.js"><link rel="prefetch" href="/blog/assets/js/189.fdd57a16.js"><link rel="prefetch" href="/blog/assets/js/19.6ffd68ce.js"><link rel="prefetch" href="/blog/assets/js/190.8d9ac4f5.js"><link rel="prefetch" href="/blog/assets/js/191.f19beada.js"><link rel="prefetch" href="/blog/assets/js/192.bcd02302.js"><link rel="prefetch" href="/blog/assets/js/193.05afb721.js"><link rel="prefetch" href="/blog/assets/js/194.698e74d2.js"><link rel="prefetch" href="/blog/assets/js/195.70ee23b9.js"><link rel="prefetch" href="/blog/assets/js/196.14c12f32.js"><link rel="prefetch" href="/blog/assets/js/197.52e07cb7.js"><link rel="prefetch" href="/blog/assets/js/198.6312a976.js"><link rel="prefetch" href="/blog/assets/js/199.600b8211.js"><link rel="prefetch" href="/blog/assets/js/20.d994b814.js"><link rel="prefetch" href="/blog/assets/js/200.1658389e.js"><link rel="prefetch" href="/blog/assets/js/201.f2ecc5d4.js"><link rel="prefetch" href="/blog/assets/js/202.05a5bb1c.js"><link rel="prefetch" href="/blog/assets/js/203.893b83ad.js"><link rel="prefetch" href="/blog/assets/js/204.a90c3691.js"><link rel="prefetch" href="/blog/assets/js/205.d82fb971.js"><link rel="prefetch" href="/blog/assets/js/206.00e0b021.js"><link rel="prefetch" href="/blog/assets/js/207.a5dbb279.js"><link rel="prefetch" href="/blog/assets/js/208.d15bb006.js"><link rel="prefetch" href="/blog/assets/js/209.00d63e46.js"><link rel="prefetch" href="/blog/assets/js/21.2587b99c.js"><link rel="prefetch" href="/blog/assets/js/210.b256d7b8.js"><link rel="prefetch" href="/blog/assets/js/211.be264f59.js"><link rel="prefetch" href="/blog/assets/js/212.9956352d.js"><link rel="prefetch" href="/blog/assets/js/213.6144a981.js"><link rel="prefetch" href="/blog/assets/js/214.926fcb0b.js"><link rel="prefetch" href="/blog/assets/js/215.19148b26.js"><link rel="prefetch" href="/blog/assets/js/216.f56e94aa.js"><link rel="prefetch" href="/blog/assets/js/217.c5a75265.js"><link rel="prefetch" href="/blog/assets/js/218.1d08fa09.js"><link rel="prefetch" href="/blog/assets/js/219.11d14310.js"><link rel="prefetch" href="/blog/assets/js/22.cbb873e2.js"><link rel="prefetch" href="/blog/assets/js/220.31c10a26.js"><link rel="prefetch" href="/blog/assets/js/221.b95f8a68.js"><link rel="prefetch" href="/blog/assets/js/222.79b831b9.js"><link rel="prefetch" href="/blog/assets/js/223.23d684a8.js"><link rel="prefetch" href="/blog/assets/js/224.86b7a46d.js"><link rel="prefetch" href="/blog/assets/js/225.ba05abd3.js"><link rel="prefetch" href="/blog/assets/js/226.759b748e.js"><link rel="prefetch" href="/blog/assets/js/227.c26a7240.js"><link rel="prefetch" href="/blog/assets/js/228.de29829d.js"><link rel="prefetch" href="/blog/assets/js/229.83cf7341.js"><link rel="prefetch" href="/blog/assets/js/23.3392ec01.js"><link rel="prefetch" href="/blog/assets/js/230.d239ed00.js"><link rel="prefetch" href="/blog/assets/js/231.ddfd0758.js"><link rel="prefetch" href="/blog/assets/js/232.6b57acfb.js"><link rel="prefetch" href="/blog/assets/js/233.a104a750.js"><link rel="prefetch" href="/blog/assets/js/234.3d041b0e.js"><link rel="prefetch" href="/blog/assets/js/235.9e19c5d0.js"><link rel="prefetch" href="/blog/assets/js/236.9f300061.js"><link rel="prefetch" href="/blog/assets/js/237.9fb8d4bd.js"><link rel="prefetch" href="/blog/assets/js/238.ceec05fc.js"><link rel="prefetch" href="/blog/assets/js/24.736495d8.js"><link rel="prefetch" href="/blog/assets/js/25.8f5cf322.js"><link rel="prefetch" href="/blog/assets/js/26.67d8ecd5.js"><link rel="prefetch" href="/blog/assets/js/27.05800199.js"><link rel="prefetch" href="/blog/assets/js/28.72a4cebd.js"><link rel="prefetch" href="/blog/assets/js/29.f8d2f7c1.js"><link rel="prefetch" href="/blog/assets/js/3.aec45124.js"><link rel="prefetch" href="/blog/assets/js/30.0ac25def.js"><link rel="prefetch" href="/blog/assets/js/32.ab6922e1.js"><link rel="prefetch" href="/blog/assets/js/33.22aedb73.js"><link rel="prefetch" href="/blog/assets/js/34.1176b400.js"><link rel="prefetch" href="/blog/assets/js/35.d4d05428.js"><link rel="prefetch" href="/blog/assets/js/36.6dd0dde1.js"><link rel="prefetch" href="/blog/assets/js/37.4af0c50a.js"><link rel="prefetch" href="/blog/assets/js/38.1a98317a.js"><link rel="prefetch" href="/blog/assets/js/39.8383d231.js"><link rel="prefetch" href="/blog/assets/js/4.6a499ed7.js"><link rel="prefetch" href="/blog/assets/js/40.ea1ea46b.js"><link rel="prefetch" href="/blog/assets/js/41.29846640.js"><link rel="prefetch" href="/blog/assets/js/42.9c906181.js"><link rel="prefetch" href="/blog/assets/js/43.344bd56a.js"><link rel="prefetch" href="/blog/assets/js/44.e23af589.js"><link rel="prefetch" href="/blog/assets/js/45.fa09e088.js"><link rel="prefetch" href="/blog/assets/js/46.ddf18f6d.js"><link rel="prefetch" href="/blog/assets/js/47.593a3a96.js"><link rel="prefetch" href="/blog/assets/js/48.fb21c024.js"><link rel="prefetch" href="/blog/assets/js/49.5bb86e0c.js"><link rel="prefetch" href="/blog/assets/js/5.48f0d794.js"><link rel="prefetch" href="/blog/assets/js/50.0fb55bed.js"><link rel="prefetch" href="/blog/assets/js/51.a38b4abd.js"><link rel="prefetch" href="/blog/assets/js/52.70f6922c.js"><link rel="prefetch" href="/blog/assets/js/53.c7e04159.js"><link rel="prefetch" href="/blog/assets/js/54.ff09ad12.js"><link rel="prefetch" href="/blog/assets/js/55.57d17d47.js"><link rel="prefetch" href="/blog/assets/js/56.a58b3cc3.js"><link rel="prefetch" href="/blog/assets/js/57.9de5f95b.js"><link rel="prefetch" href="/blog/assets/js/58.d15857bf.js"><link rel="prefetch" href="/blog/assets/js/59.ff3f0900.js"><link rel="prefetch" href="/blog/assets/js/6.1505523f.js"><link rel="prefetch" href="/blog/assets/js/60.bc9edb0a.js"><link rel="prefetch" href="/blog/assets/js/61.ec369f58.js"><link rel="prefetch" href="/blog/assets/js/62.75c1dd19.js"><link rel="prefetch" href="/blog/assets/js/63.a932b576.js"><link rel="prefetch" href="/blog/assets/js/64.d821c8d4.js"><link rel="prefetch" href="/blog/assets/js/65.c48ce70a.js"><link rel="prefetch" href="/blog/assets/js/66.6fc46ec0.js"><link rel="prefetch" href="/blog/assets/js/67.5a70400c.js"><link rel="prefetch" href="/blog/assets/js/68.6a172c1e.js"><link rel="prefetch" href="/blog/assets/js/69.d878fdd4.js"><link rel="prefetch" href="/blog/assets/js/7.b38bde58.js"><link rel="prefetch" href="/blog/assets/js/70.61fcea39.js"><link rel="prefetch" href="/blog/assets/js/71.b4f867d8.js"><link rel="prefetch" href="/blog/assets/js/72.d6eafa00.js"><link rel="prefetch" href="/blog/assets/js/73.7937e89b.js"><link rel="prefetch" href="/blog/assets/js/74.3ff087d7.js"><link rel="prefetch" href="/blog/assets/js/75.97ca5f60.js"><link rel="prefetch" href="/blog/assets/js/76.ece1fc97.js"><link rel="prefetch" href="/blog/assets/js/77.95cdf309.js"><link rel="prefetch" href="/blog/assets/js/78.da225d8a.js"><link rel="prefetch" href="/blog/assets/js/79.ae629400.js"><link rel="prefetch" href="/blog/assets/js/8.f710ef8c.js"><link rel="prefetch" href="/blog/assets/js/80.cf6d2811.js"><link rel="prefetch" href="/blog/assets/js/81.6c5fdca6.js"><link rel="prefetch" href="/blog/assets/js/82.245ed394.js"><link rel="prefetch" href="/blog/assets/js/83.4b549b0f.js"><link rel="prefetch" href="/blog/assets/js/84.17cebe69.js"><link rel="prefetch" href="/blog/assets/js/85.b1179a10.js"><link rel="prefetch" href="/blog/assets/js/86.ad526400.js"><link rel="prefetch" href="/blog/assets/js/87.2eef9fa1.js"><link rel="prefetch" href="/blog/assets/js/88.92f778ed.js"><link rel="prefetch" href="/blog/assets/js/89.efe59f09.js"><link rel="prefetch" href="/blog/assets/js/9.bf9d8b8d.js"><link rel="prefetch" href="/blog/assets/js/90.26e610ca.js"><link rel="prefetch" href="/blog/assets/js/91.f78cb514.js"><link rel="prefetch" href="/blog/assets/js/92.d7983929.js"><link rel="prefetch" href="/blog/assets/js/93.20272a60.js"><link rel="prefetch" href="/blog/assets/js/94.245150bc.js"><link rel="prefetch" href="/blog/assets/js/95.6f0e48c2.js"><link rel="prefetch" href="/blog/assets/js/96.02cf7f8b.js"><link rel="prefetch" href="/blog/assets/js/97.a9438771.js"><link rel="prefetch" href="/blog/assets/js/98.12762ccb.js"><link rel="prefetch" href="/blog/assets/js/99.ddbea38c.js">
    14. 

  14.     <link rel="stylesheet" href="/blog/assets/css/0.styles.cf6c3304.css">
    15. 

  15.   </head>
    16. 

  16.   <body class="theme-mode-light">
    17. 

  17.     <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/img/logo.png" alt="彪哥博客" class="logo"> <span class="site-name can-hide">彪哥博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="http://fseller.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
    18. 

  18.   个人游戏网站
    19. 

  19.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/blog/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/blog/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/blog/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/blog/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/blog/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/blog/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/blog/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/blog/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/blog/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/blog/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/blog/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/blog/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/blog/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/heBody/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    20. 

  20.     GitHub
    21. 

  21.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg"> <div class="blogger-info"><h3>彪哥</h3> <span>爱好前端</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="http://fseller.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
    22. 

  22.   个人游戏网站
    23. 

  23.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/blog/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/blog/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/blog/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/blog/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/blog/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/blog/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/blog/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/blog/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/blog/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/blog/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/blog/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/blog/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/blog/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/heBody/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    24. 

  24.     GitHub
    25. 

  25.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript文章</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>学习笔记</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/note/javascript/" class="sidebar-link">《JavaScript教程》笔记</a></li><li><a href="/blog/note/js/" class="sidebar-link">《JavaScript高级程序设计》笔记</a></li><li><a href="/blog/note/es6/" class="sidebar-link">《ES6 教程》笔记</a></li><li><a href="/blog/note/vue/" class="sidebar-link">《Vue》笔记</a></li><li><a href="/blog/note/react/" class="sidebar-link">《React》笔记</a></li><li><a href="/blog/note/typescript-axios/" class="sidebar-link">《TypeScript 从零实现 axios》</a></li><li><a href="/blog/note/git/" class="sidebar-link">《Git》学习笔记</a></li><li><a href="/blog/pages/51afd6/" class="sidebar-link">TypeScript笔记</a></li><li><a href="/blog/note/wx-miniprogram/" aria-current="page" class="active sidebar-link">小程序笔记</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/blog/note/wx-miniprogram/#基础课程部分" class="sidebar-link">基础课程部分</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#微信公众平台" class="sidebar-link">微信公众平台</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#小程序文档api" class="sidebar-link">小程序文档API</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#微信开放社区" class="sidebar-link">微信开放社区</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#目录说明" class="sidebar-link">目录说明</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#文件说明" class="sidebar-link">文件说明</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#阻止事件冒泡" class="sidebar-link">阻止事件冒泡</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#第三方库" class="sidebar-link">第三方库</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云开发" class="sidebar-link">云开发</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#云开发三大基础能力" class="sidebar-link">云开发三大基础能力</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#云函数" class="sidebar-link">云函数</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#云数据库" class="sidebar-link">云数据库</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#云存储" class="sidebar-link">云存储</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云数据库能力" class="sidebar-link">云数据库能力</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#数据类型" class="sidebar-link">数据类型</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#操作云数据库" class="sidebar-link">操作云数据库</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云数据库权限管理" class="sidebar-link">云数据库权限管理</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#操作云数据库-2" class="sidebar-link">操作云数据库</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/note/wx-miniprogram/#实战课程部分" class="sidebar-link">实战课程部分</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#serverless-无服务" class="sidebar-link">serverless（无服务）</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云开发优势" class="sidebar-link">云开发优势</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云开发提供能力" class="sidebar-link">云开发提供能力</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#appid" class="sidebar-link">appID</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云开发项目默认目录结构" class="sidebar-link">云开发项目默认目录结构</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云开发环境" class="sidebar-link">云开发环境</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#开发前的准备" class="sidebar-link">开发前的准备</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#project-config-json-文件说明" class="sidebar-link">project.config.json 文件说明</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#app-json" class="sidebar-link">app.json</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#代码规范" class="sidebar-link">代码规范</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#《音乐》页面开发" class="sidebar-link">《音乐》页面开发</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#自定义组件" class="sidebar-link">自定义组件</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#引入组件" class="sidebar-link">引入组件</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#组件传值" class="sidebar-link">组件传值</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#wx-key-的使用" class="sidebar-link">wx:key 的使用</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#async-await-语法" class="sidebar-link">async/await 语法</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云函数的使用" class="sidebar-link">云函数的使用</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#数据库操作" class="sidebar-link">数据库操作</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#查询数据库" class="sidebar-link">查询数据库</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#云函数调试" class="sidebar-link">云函数调试</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#定时触发云函数" class="sidebar-link">定时触发云函数</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#配置云函数超时时间" class="sidebar-link">配置云函数超时时间</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#上拉加载与下拉刷新" class="sidebar-link">上拉加载与下拉刷新</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云函数路由优化tcb-router" class="sidebar-link">云函数路由优化tcb-router</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#本地存储-缓存" class="sidebar-link">本地存储（缓存）</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#api设置title" class="sidebar-link">api设置title</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#背景播放音" class="sidebar-link">背景播放音</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#createselectorquery查询节点信息" class="sidebar-link">createSelectorQuery查询节点信息</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#组件内的方法" class="sidebar-link">组件内的方法</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#组件生命周期" class="sidebar-link">组件生命周期</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#组件所在页面的生命周期" class="sidebar-link">组件所在页面的生命周期</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#组件对数据的监听" class="sidebar-link">组件对数据的监听</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#子组件自定义事件传递给父组件" class="sidebar-link">子组件自定义事件传递给父组件</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#父组件自定义事件传递给子组件" class="sidebar-link">父组件自定义事件传递给子组件</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#兄弟组件间传递事件和传值" class="sidebar-link">兄弟组件间传递事件和传值</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#获取手机信息" class="sidebar-link">获取手机信息</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#滚动组件" class="sidebar-link">滚动组件</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#全局属性、方法-类似vuex" class="sidebar-link">全局属性、方法（类似vuex）</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#消息提示框" class="sidebar-link">消息提示框</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/note/wx-miniprogram/#《发现》页面" class="sidebar-link">《发现》页面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#调用组件外部的样式" class="sidebar-link">调用组件外部的样式</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#组件插槽slot" class="sidebar-link">组件插槽slot</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#判断用户授权" class="sidebar-link">判断用户授权</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#button的开发能力-获取用户信息-1" class="sidebar-link">button的开发能力（获取用户信息）1</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#原生组件" class="sidebar-link">原生组件</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#选择上传图片" class="sidebar-link">选择上传图片</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#图片裁剪" class="sidebar-link">图片裁剪</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#获取标签自定义属性data-删除图片的实现" class="sidebar-link">获取标签自定义属性data-* （删除图片的实现）</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#全屏预览图片-点击图片放大预览" class="sidebar-link">全屏预览图片(点击图片放大预览)</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#文件上传云存储-发布博客例子" class="sidebar-link">文件上传云存储（发布博客例子）</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#js模块化-时间格式化" class="sidebar-link">js模块化 （时间格式化）</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#阻止事件冒泡-2" class="sidebar-link">阻止事件冒泡</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#返回上一个页面并执行方法" class="sidebar-link">返回上一个页面并执行方法</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#图片懒加载" class="sidebar-link">图片懒加载</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#模糊查询" class="sidebar-link">模糊查询</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#提升模糊查询的效率-添加索引-对数据量大的查询效果明显" class="sidebar-link">提升模糊查询的效率 （添加索引，对数据量大的查询效果明显）</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#小程序端调用云数据库" class="sidebar-link">小程序端调用云数据库</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云数据库权限管理-2" class="sidebar-link">云数据库权限管理</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#数据库中1对n关系的三种设计方式" class="sidebar-link">数据库中1对N关系的三种设计方式</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#第一种-n的数量较少-几十个以内" class="sidebar-link">第一种：N的数量较少 几十个以内</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#第二种-n的数量较多-几十到几百个" class="sidebar-link">第二种：N的数量较多  几十到几百个</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#第三种-n的数量巨大-几百成千上万个" class="sidebar-link">第三种：N的数量巨大  几百成千上万个</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云调用" class="sidebar-link">云调用</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#模板消息推送" class="sidebar-link">模板消息推送</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云函数多集合查询数据库" class="sidebar-link">云函数多集合查询数据库</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#分享功能" class="sidebar-link">分享功能</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#不同场景获取用户信息的方式" class="sidebar-link">不同场景获取用户信息的方式</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#场景一-只想在界面上显示自己的昵称和头像" class="sidebar-link">场景一：只想在界面上显示自己的昵称和头像</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#场景二-在js中获取用户信息" class="sidebar-link">场景二：在JS中获取用户信息</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#场景三-获取openid" class="sidebar-link">场景三：获取openId</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/note/wx-miniprogram/#《我的》页面" class="sidebar-link">《我的》页面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#导航页面链接跳转" class="sidebar-link">导航页面链接跳转</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#背景图片" class="sidebar-link">背景图片</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#每个页面都有的page标签" class="sidebar-link">每个页面都有的page标签</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#播放历史与本地存储" class="sidebar-link">播放历史与本地存储</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#我的发现" class="sidebar-link">我的发现</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#小程序码" class="sidebar-link">小程序码</a></li><li class="sidebar-sub-header level5"><a href="/blog/note/wx-miniprogram/#判断是从扫码小程序码进入-以及参数获取" class="sidebar-link">判断是从扫码小程序码进入，以及参数获取</a></li><li class="sidebar-sub-header level3"><a href="/blog/note/wx-miniprogram/#版本更新检测" class="sidebar-link">版本更新检测</a></li><li class="sidebar-sub-header level3"><a href="/blog/note/wx-miniprogram/#性能优化" class="sidebar-link">性能优化</a></li><li class="sidebar-sub-header level3"><a href="/blog/note/wx-miniprogram/#场景值scene的作用与应用场景" class="sidebar-link">场景值scene的作用与应用场景</a></li><li class="sidebar-sub-header level3"><a href="/blog/note/wx-miniprogram/#小程序的-seo-页面收录sitemap" class="sidebar-link">小程序的&quot;SEO&quot;---页面收录sitemap</a></li><li class="sidebar-sub-header level3"><a href="/blog/note/wx-miniprogram/#小程序上线审核流程" class="sidebar-link">小程序上线审核流程</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/note/wx-miniprogram/#后台管理系统" class="sidebar-link">后台管理系统</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#架构示意图" class="sidebar-link">架构示意图</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#vue-admin-template构建管理系统前端" class="sidebar-link">vue-admin-template构建管理系统前端</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#koa2构建管理系统后端" class="sidebar-link">Koa2构建管理系统后端</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#接口调用凭证-access-token-的缓存与更新" class="sidebar-link">接口调用凭证 access_token 的缓存与更新</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#后端代码通过http-api-触发云函数获取数据" class="sidebar-link">后端代码通过HTTP API 触发云函数获取数据</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#产生跨域和后端解决跨域问题" class="sidebar-link">产生跨域和后端解决跨域问题</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#云数据库的增删改查接口" class="sidebar-link">云数据库的增删改查接口</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#后端获取前端post请求传来的数据" class="sidebar-link">后端获取前端post请求传来的数据</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#后端获取云存储图片" class="sidebar-link">后端获取云存储图片</a></li><li class="sidebar-sub-header level4"><a href="/blog/note/wx-miniprogram/#后端上传图片到云存储" class="sidebar-link">后端上传图片到云存储</a></li></ul></li></ul></li><li><a href="/blog/pages/4643cd/" class="sidebar-link">JS设计模式总结笔记</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/blog/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/blog/web/#前端" data-v-06225672>前端</a></li><li data-v-06225672><a href="/blog/web/#学习笔记" data-v-06225672>学习笔记</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/heBody" target="_blank" title="作者" class="beLink" data-v-06225672>heBody</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2019-12-25</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">小程序笔记<!----></h1>  <div class="theme-vdoing-content content__default"><h1 id="小程序笔记"><a href="#小程序笔记" class="header-anchor">#</a> 小程序笔记</h1> <h2 id="基础课程部分"><a href="#基础课程部分" class="header-anchor">#</a> 基础课程部分</h2> <h4 id="微信公众平台"><a href="#微信公众平台" class="header-anchor">#</a> 微信公众平台</h4> <p><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer">https://mp.weixin.qq.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>注册时可选择类型：订阅号、服务号、小程序、企业微信</p> <p><strong>每个邮箱仅能注册一个小程序。</strong></p> <p>个人类型小程序：无法使用微信支付、无法使用卡包功能</p> <h5 id="小程序文档api"><a href="#小程序文档api" class="header-anchor">#</a> 小程序文档API</h5> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/" target="_blank" rel="noopener noreferrer">小程序开发文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="微信开放社区"><a href="#微信开放社区" class="header-anchor">#</a> 微信开放社区</h5> <p><a href="https://developers.weixin.qq.com/community/develop/question" target="_blank" rel="noopener noreferrer">微信开发社区<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="目录说明"><a href="#目录说明" class="header-anchor">#</a> 目录说明</h4> <p><strong>默认目录</strong></p> <p>pages-----------------------页面相关</p> <p>​	index  ----------------- 首页文件夹</p> <p>​		index.js ------------首页js</p> <p>​		index.json---------首页配置</p> <p>​		index.wxml-------首页html</p> <p>​		index.wxss--------首页css</p> <p>utils------------------------工具相关</p> <p>app.js ----------------------项目总js</p> <p>app.json-------------------全局配置( 页面路由以及头部、底部导航的配置等)</p> <p>app.wxss -----------------项目总样式css</p> <p>project.config.json ----项目配置</p> <p><strong>代码构成</strong></p> <p>.json ：配置文件，以json格式存储配置</p> <p>​			 项目中有三种配置：项目配置（project.config.json）、全局配置（app.json）、页面配置（index.json）</p> <p>.wxml: 相当于html文件</p> <p>.wxss: 相当于css</p> <p>.js : 就是js</p> <h4 id="文件说明"><a href="#文件说明" class="header-anchor">#</a> 文件说明</h4> <p><strong>project.config.json项目配置 部分代码说明</strong></p> <p>setting：{</p> <p>urlCheck 是否检测安全的域名</p> <p>es6  是否把es6转es5</p> <p>postcss 是否把css样式自动补全</p> <p>minified 是否压缩</p> <p>}</p> <p><strong>app.json 全局配置</strong></p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html" target="_blank" rel="noopener noreferrer">全局配置API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>wxml 相关介绍</strong></p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/" target="_blank" rel="noopener noreferrer">wxmlAPI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{motto}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    26. 

  26. 

  27. 循环渲染
    28. 

  28. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{index}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    29. 

  29.       {{index}} {{item}}
    30. 

  30. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    31. 

  31. 

  32. 改变for循环item和index的名称
    33. 

  33. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-item</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    34. 

  34. 	{{inx}} {{data}}
    35. 

  35. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
    36. 

  36. 

  37. 条件渲染 (类似vue的v-if、v-else)
    38. 

  38. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isLogin}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>已登录<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    39. 

  39. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>请登录<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    40. 

  40. 

  41. 条件显示（类似vue的v-show）
    42. 

  42. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isLogin}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>显示内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    43. 

  43. 

  44. 绑定点击事件
    45. 

  45. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“tapName”</span><span class="token punctuation">&gt;</span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    46. 

  46. 

  47. Page({
    48. 

  48.   tapName: function(event) {
    49. 

  49.     console.log(event)
    50. 

  50.   }
    51. 

  51. })
    52. 

  52. ...
    53. 

  53. 

  54. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p><strong>wxss 相关介绍</strong></p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html" target="_blank" rel="noopener noreferrer">wxssAPI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>尺寸单位：rpx，根据屏幕宽度自适应。</p> <p>引入外部wxss：@import ’...‘</p> <p><strong>js相关介绍</strong></p> <p>WXS（WeiXin Script）是小程序的一套脚本语言</p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/" target="_blank" rel="noopener noreferrer">wxsAPI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>绑定点击事件</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“onTapHandler”</span><span class="token punctuation">&gt;</span></span>点我+1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    55. 

  55. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    56. 

  56. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    57. 

  57.   <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    58. 

  58.     <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
    59. 

  59.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    60. 

  60.   <span class="token function-variable function">onTapHandler</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    61. 

  61.   	<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    62. 

  62.   		<span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>count<span class="token operator">++</span>
    63. 

  63.   	<span class="token punctuation">}</span><span class="token punctuation">)</span>
    64. 

  64.   <span class="token punctuation">}</span>
    65. 

  65. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    66. 

  66. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h5 id="阻止事件冒泡"><a href="#阻止事件冒泡" class="header-anchor">#</a> 阻止事件冒泡</h5> <p>把绑定方式 bindtap 换成 catchtap 即可。</p> <h4 id="第三方库"><a href="#第三方库" class="header-anchor">#</a> 第三方库</h4> <p><strong>WeUI</strong></p> <p>weUI是一套同微信原生视觉体验一致的基础样式库</p> <p><strong>iView Weapp</strong></p> <p>一套高质量的微信小程序UI组件库</p> <p><strong>Vant Weapp</strong></p> <p>轻量、可靠的小程序UI组件库</p> <h4 id="云开发"><a href="#云开发" class="header-anchor">#</a> 云开发</h4> <p><strong>小程序传统开发模式</strong></p> <p>客户端  -----&gt; 服务端（后端代码、数据库）------&gt; 运维（DB维护、文件存储、内容加速、网络防护、容器服务、负载均衡、安全加固等...）</p> <p><strong>小程序云开发模式</strong></p> <p>客户端 -----&gt; 云开发（云函数、云数据库、云存储）</p> <p><strong>传统开发 VS 云开发</strong></p> <p>开发效率低         Serverless（无服务）</p> <p>运维成本高         开发者更关注业务逻辑</p> <p><strong>无服务（Serverless）开发是未来的发展趋势</strong></p> <h5 id="云开发三大基础能力"><a href="#云开发三大基础能力" class="header-anchor">#</a> <strong>云开发三大基础能力</strong></h5> <h5 id="云函数"><a href="#云函数" class="header-anchor">#</a> 云函数</h5> <p>（相当于传统开发中的后台接口）</p> <p>获取appid、获取openid、生成分享图、调用腾讯云SDK ...</p> <h5 id="云数据库"><a href="#云数据库" class="header-anchor">#</a> 云数据库</h5> <p>数据的增、删、改、查 ...</p> <h5 id="云存储"><a href="#云存储" class="header-anchor">#</a> 云存储</h5> <p>管理文件、上传文件、下载文件、分享文件 ...</p> <p><strong>每个小程序账号可免费创建两个环境，建议：开发环境、生成环境</strong></p> <h4 id="云数据库能力"><a href="#云数据库能力" class="header-anchor">#</a> 云数据库能力</h4> <p>云开发提供了一个json数据库，提供2GB免费存储空间。</p> <h4 id="数据类型"><a href="#数据类型" class="header-anchor">#</a> 数据类型</h4> <p>String 字符串</p> <p>Number 数字</p> <p>Object 对象</p> <p>Array 数组</p> <p>Boolean 布尔值</p> <p>GeoPoint 地理位置点</p> <p>Date 时间 （精确到毫秒ms，客户端时间）</p> <p>Null 空</p> <h4 id="操作云数据库"><a href="#操作云数据库" class="header-anchor">#</a> 操作云数据库</h4> <p>小程序控制（读写数据库受权限限制）</p> <p>云函数控制（拥有所有读写数据库的权限）</p> <p>控制台控制（拥有所有读写数据库的权限）</p> <h4 id="云数据库权限管理"><a href="#云数据库权限管理" class="header-anchor">#</a> 云数据库权限管理</h4> <p>仅创建者可写，所有人可读 （适合于文章）</p> <p>仅创建者可读写 (适用于私密内容)</p> <p>仅管理端可写，所有人可读（适用于商品信息）</p> <p>仅管理端可读写（适用于后台敏感数据）</p> <h4 id="操作云数据库-2"><a href="#操作云数据库-2" class="header-anchor">#</a> 操作云数据库</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//初始化数据库</span>
    67. 

  67. <span class="token keyword">const</span> db <span class="token operator">=</span> wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 小程序端初始化数据库，如果在云函数端不需要加wx</span>
    68. 

  68. 

  69. <span class="token comment">//切换环境(开发环境/生产环境)</span>
    70. 

  70. <span class="token keyword">const</span> testDB <span class="token operator">=</span> wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    71. 

  71. 	<span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token string">'test'</span>
    72. 

  72. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    73. 

  73. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="实战课程部分"><a href="#实战课程部分" class="header-anchor">#</a> 实战课程部分</h2> <h4 id="serverless-无服务"><a href="#serverless-无服务" class="header-anchor">#</a> serverless（无服务）</h4> <p>概念：函数即服务，当需要后端服务的时候，不需要关心后端的IP地址、域名，只需要像调用普通函数一样既可以实现调用。</p> <h4 id="云开发优势"><a href="#云开发优势" class="header-anchor">#</a> 云开发优势</h4> <p>快速上线、专注核心业务、独立开发一个完整的微信小程序、不需要学习新的语言，只需要会javascript、无需运维， 节约成本、数据安全、</p> <h4 id="云开发提供能力"><a href="#云开发提供能力" class="header-anchor">#</a> 云开发提供能力</h4> <p>云函数：在云端运行的代码，微信私有协议天然鉴权 （理解：相当于后端部分）</p> <p>云数据库：一个既可以在小程序端操作又可以在云函数中操作的JSON数据库</p> <p>云存储：在云端存储文件，可以在云端控制台可视化管理</p> <p>云调用：基于云函数免鉴权使用小程序开放接口的能力（比如说给用户推送消息等）</p> <p>HTTP API：使用HTTP API开发者可在已有服务器上访问云资源，实现与云开发的互通（作用：对原有传统模式下开发的小程序，可以与云开发进行互通）</p> <h4 id="appid"><a href="#appid" class="header-anchor">#</a> appID</h4> <p>每个小程序唯一的id</p> <h4 id="云开发项目默认目录结构"><a href="#云开发项目默认目录结构" class="header-anchor">#</a> 云开发项目默认目录结构</h4> <p>cloudfunctions ----------------------------云函数</p> <p>​	callback ---------------------------------- 回调函数</p> <p>​		config.json ---------------------------</p> <p>​		index.js --------------------------------</p> <p>​		package.json ------------------------</p> <p>​	echo ----------------------------------------</p> <p>​	login ----------------------------------------</p> <p>​	openapi -----------------------------------</p> <p>miniprogram ------------------------------- 小程序</p> <p>​	images ------------------------------------- 图片</p> <p>​	pages --------------------------------------- 页面</p> <p>​	style ----------------------------------------- 样式</p> <p>​	app.js --------------------------------------- 项目js</p> <p>​	app.json ----------------------------------- 全局配置</p> <p>​	app.wxss ---------------------------------- 项目样式</p> <p>​	sitemap.json -----------------------------  （小程序SEO相关）</p> <p>project.config.json ----------------------- 项目配置</p> <h4 id="云开发环境"><a href="#云开发环境" class="header-anchor">#</a> 云开发环境</h4> <p>云开发可创建两个环境，建议一个为开发环境，一个为生产环境</p> <h4 id="开发前的准备"><a href="#开发前的准备" class="header-anchor">#</a> 开发前的准备</h4> <p>开发工具 &gt; 右上角详情 &gt; 本地设置 &gt; 调试基础库  设置为最新版本</p> <p>app.js &gt; wx.cloud.init &gt; env 设置环境ID</p> <h4 id="project-config-json-文件说明"><a href="#project-config-json-文件说明" class="header-anchor">#</a> project.config.json 文件说明</h4> <p>miniprogramRoot 小程序前端代码目录</p> <p>cloudfunctionRoot 云函数代码目录</p> <h4 id="app-json"><a href="#app-json" class="header-anchor">#</a> app.json</h4> <p>pages  设置页面 ，设置后会自动在pages目录下生成相应的目录和文件</p> <p>设置底部导航按钮：</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;tabBar&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    74. 

  74.     <span class="token property">&quot;color&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#474747&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字颜色</span>
    75. 

  75.     <span class="token property">&quot;selectedColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#d43c43&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字选中颜色</span>
    76. 

  76.     <span class="token property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token comment">// 按钮列表，2-5项</span>
    77. 

  77.       <span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/playlist/playlist&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 按钮对应页面</span>
    78. 

  78.       <span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;音乐&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 文字</span>
    79. 

  79.       <span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;images/music.png&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 图标路径</span>
    80. 

  80.       <span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;images/music-actived.png&quot;</span> <span class="token comment">// 选中图标的路径</span>
    81. 

  81.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    82. 

  82.     <span class="token punctuation">{</span>
    83. 

  83.       <span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/blog/blog&quot;</span><span class="token punctuation">,</span>
    84. 

  84.       <span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;发现&quot;</span><span class="token punctuation">,</span>
    85. 

  85.       <span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;images/blog.png&quot;</span><span class="token punctuation">,</span>
    86. 

  86.       <span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;images/blog-actived.png&quot;</span>
    87. 

  87.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    88. 

  88.     <span class="token punctuation">{</span>
    89. 

  89.       <span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/profile/profile&quot;</span><span class="token punctuation">,</span>
    90. 

  90.       <span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;我的&quot;</span><span class="token punctuation">,</span>
    91. 

  91.       <span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;images/profile.png&quot;</span><span class="token punctuation">,</span>
    92. 

  92.       <span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;images/profile-actived.png&quot;</span>
    93. 

  93.     <span class="token punctuation">}</span><span class="token punctuation">]</span>
    94. 

  94.   <span class="token punctuation">}</span>
    95. 

  95. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><blockquote><p>图标来自于 <a href="https://www.iconfont.cn" target="_blank" rel="noopener noreferrer">https://www.iconfont.cn<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>阿里巴巴图标库，包含矢量图标、字体图标、字体等</p></blockquote> <h4 id="代码规范"><a href="#代码规范" class="header-anchor">#</a> 代码规范</h4> <p>很多公司借鉴的代码规范：<a href="https://github.com/airbnb/javascript" target="_blank" rel="noopener noreferrer">https://github.com/airbnb/javascript<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="《音乐》页面开发"><a href="#《音乐》页面开发" class="header-anchor">#</a> 《音乐》页面开发</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code> <span class="token comment">&lt;!-- 轮播图组件 参数：indicator-dots 小圆点，autoplay 自动播放, interval 间隔时间，duration 动画时长 --&gt;</span>
    96. 

  96. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper</span> <span class="token attr-name">indicator-dots</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">circular</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">interval</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>500<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    97. 

  97.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{swiperImgUrls}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{index}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- 空节点 --&gt;</span>
    98. 

  98.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
    99. 

  99.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.url}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
    100. 

  100.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
    101. 

  101.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
    102. 

  102. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper</span><span class="token punctuation">&gt;</span></span>
    103. 

  103. 

  104. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h4 id="自定义组件"><a href="#自定义组件" class="header-anchor">#</a> 自定义组件</h4> <p><strong>创建组件</strong></p> <p>创建目录 components &gt; 组件目录名称 &gt; 右键 <code>新建Component</code></p> <h5 id="引入组件"><a href="#引入组件" class="header-anchor">#</a> <strong>引入组件</strong></h5> <p>在page的json文件中：</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
    105. 

  105.   <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    106. 

  106.     <span class="token property">&quot;x-playlist&quot;</span><span class="token operator">:</span><span class="token string">&quot;/components/playlist/playlist&quot;</span>
    107. 

  107.   <span class="token punctuation">}</span>
    108. 

  108. <span class="token punctuation">}</span>
    109. 

  109. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>在page的wxml中：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>x-playlist</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-playlist</span><span class="token punctuation">&gt;</span></span>
    110. 

  110. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>页面引入组件以及组件内部在引用子组件的方法是一样的，同样需要设置json文件。</strong></p> <h5 id="组件传值"><a href="#组件传值" class="header-anchor">#</a> <strong>组件传值</strong></h5> <p>父组件中：在引入组件的时候自定义属性名称，并把数据传入子组件</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 参数：playlist 自定义名称，传入组件的数据 --&gt;</span>
    111. 

  111. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>x-playlist</span> <span class="token attr-name">playlist</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{传入的数据}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-playlist</span><span class="token punctuation">&gt;</span></span>
    112. 

  112. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>子组件中：
    113. 

  113. 子组件的js文件：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token comment">/**
    114. 

  114.    * 组件的属性列表
    115. 

  115.    */</span>
    116. 

  116.   <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    117. 

  117.     <span class="token literal-property property">playlist</span><span class="token operator">:</span><span class="token punctuation">{</span> <span class="token comment">// 接收父组件传输的数据</span>
    118. 

  118.       <span class="token literal-property property">type</span><span class="token operator">:</span> Object <span class="token comment">// 数据类型</span>
    119. 

  119.     <span class="token punctuation">}</span>
    120. 

  120.    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    121. 

  121. 

  122.  <span class="token comment">//子组件的wxml文件可直接引入数据{{playlist}}</span>
    123. 

  123. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="wx-key-的使用"><a href="#wx-key-的使用" class="header-anchor">#</a> wx:key 的使用</h4> <p>key的值不建议使用index，因为当数据发生变化会dom结构产生变化时，使用index的地方不会随之变化。</p> <p>可以使用数据内部每项不一样的一个数值，如id</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{swiperImgUrls}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>url<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 这里url不需要双大括号，如使用index则需要{{}}
    124. 

  124.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    125. 

  125.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.url}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
    126. 

  126.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    127. 

  127. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
    128. 

  128. 

  129. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>playlist-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    130. 

  130.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{playlist}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    131. 

  131.     <span class="token comment">&lt;!-- 参数：playlist 自定义名称，传入组件的数据 --&gt;</span>
    132. 

  132.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>x-playlist</span> <span class="token attr-name">playlist</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-playlist</span><span class="token punctuation">&gt;</span></span>
    133. 

  133.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
    134. 

  134. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    135. 

  135. 

  136. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="async-await-语法"><a href="#async-await-语法" class="header-anchor">#</a> async/await 语法</h4> <p>目前，在云函数里，由于 Node 版本最低是 8.9，因此是天然支持 async/await 语法的。而在小程序端则不然。在微信开发者工具里，以及 Android 端手机（浏览器内核是 QQ浏览器的 X5），async/await是天然支持的，但 iOS 端手机在较低版本则不支持，因此需要引入额外的 文件。</p> <p>可把这个 <a href="https://github.com/xiecheng328/miniprogram/blob/master/regenerator/runtime.js" target="_blank" rel="noopener noreferrer">runtime.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 文件引用到有使用 async/await 的文件当中。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 注意，必须命名为 regeneratorRuntime</span>
    137. 

  137. <span class="token keyword">import</span> regeneratorRuntime <span class="token keyword">from</span> <span class="token string">'../../utils/runtime.js'</span>
    138. 

  138. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="云函数的使用"><a href="#云函数的使用" class="header-anchor">#</a> 云函数的使用</h4> <p>cloudfunctions目录 右键 <code>新建 Node.js 云函数</code>  &gt; 输入目录名 <code>getPlaylist</code></p> <p>在云函数中向第三方服务器发送请求要依赖第三方库</p> <p><strong>安装依赖包</strong></p> <p>云函数目录  <code>getPlaylist</code> 右键 <code>在终端打开</code> 打开命令行  输入命令：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> request
    139. 

  139. <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> request-promise
    140. 

  140. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>github request-promise：<a href="https://github.com/request/request-promise" target="_blank" rel="noopener noreferrer">https://github.com/request/request-promise<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>然后写相应代码</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 云函数入口文件</span>
    141. 

  141. <span class="token keyword">const</span> cloud <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'wx-server-sdk'</span><span class="token punctuation">)</span>
    142. 

  142. 

  143. cloud<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    144. 

  144. 

  145. <span class="token keyword">const</span> rp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'request-promise'</span><span class="token punctuation">)</span> <span class="token comment">// 需安装依赖包</span>
    146. 

  146. 

  147. <span class="token keyword">const</span> <span class="token constant">URL</span> <span class="token operator">=</span> <span class="token string">'http://musicapi.xiecheng.live/personalized'</span>
    148. 

  148. 

  149. <span class="token comment">// 云函数入口函数</span>
    150. 

  150. exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    151. 

  151.   <span class="token keyword">const</span> playlist <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">rp</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    152. 

  152.     <span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">.</span>result
    153. 

  153.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    154. 

  154.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>playlist<span class="token punctuation">)</span>
    155. 

  155. <span class="token punctuation">}</span>
    156. 

  156. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>写完代码，云函数目录  <code>getPlaylist</code> 右键 <code>上传并部署：云端安装依赖（不上传node_modules）</code> 进行上传部署代码到云端，等待上传成功，打开云开发控制台即可看到已经上传的云函数，并可对云函数进行测试。</p> <h5 id="数据库操作"><a href="#数据库操作" class="header-anchor">#</a> 数据库操作</h5> <p>数据库&gt; 创建集合 &gt; playlist</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 云函数入口文件</span>
    157. 

  157. <span class="token keyword">const</span> cloud <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'wx-server-sdk'</span><span class="token punctuation">)</span>
    158. 

  158. 

  159. cloud<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    160. 

  160. 

  161. <span class="token keyword">const</span> db <span class="token operator">=</span> cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 初始化数据库,如果在小程序端初始化数据库需要在前面加wx.</span>
    162. 

  162. 

  163. <span class="token keyword">const</span> rp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'request-promise'</span><span class="token punctuation">)</span> <span class="token comment">// 需安装依赖包</span>
    164. 

  164. 

  165. <span class="token keyword">const</span> <span class="token constant">URL</span> <span class="token operator">=</span> <span class="token string">'http://musicapi.xiecheng.live/personalized'</span> <span class="token comment">// 第三方服务器地址（老师从网易云获取的数据部署在其服务器，每天的数据会更新）</span>
    166. 

  166. 

  167. <span class="token keyword">const</span> playlistCollection <span class="token operator">=</span> db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'playlist'</span><span class="token punctuation">)</span> <span class="token comment">// 获取到数据库playlist集合</span>
    168. 

  168. 

  169. <span class="token keyword">const</span> <span class="token constant">MAX_LIMIT</span> <span class="token operator">=</span> <span class="token number">10</span> <span class="token comment">// 定义常量，获取数据库条数最大的限制</span>
    170. 

  170. 

  171. <span class="token comment">// 云函数入口函数</span>
    172. 

  172. exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    173. 

  173.   <span class="token comment">/**
    174. 

  174.    * 注：
    175. 

  175.    * - 关于数据库的操作都是异步操作，都需添加await关键字
    176. 

  176.    * - console.log 打印在云开发控制台 云函数测试内查看
    177. 

  177.    * - 单次获取数据库数据有条数限制，云函数端最多获取100条，小程序端最多获取20条
    178. 

  178.    */</span>
    179. 

  179. 

  180.   <span class="token comment">// const list = await playlistCollection.get() // 获取数据库集合的数据 （因为有条数限制，不直接用此方法）</span>
    181. 

  181. 

  182.   <span class="token comment">// 突破条数限制 （为了读取到全部数据然后与第三方服务器获取的数据进行对比去重）</span>
    183. 

  183.   <span class="token keyword">const</span> countResult <span class="token operator">=</span> <span class="token keyword">await</span> playlistCollection<span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取数据总条数 返回为对象</span>
    184. 

  184.   <span class="token keyword">const</span> total <span class="token operator">=</span> countResult<span class="token punctuation">.</span>total <span class="token comment">// 取得总条数</span>
    185. 

  185.   <span class="token keyword">const</span> batchTimes <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>total <span class="token operator">/</span> <span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span>
    186. 

  186.   <span class="token keyword">const</span> tasks <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    187. 

  187.   <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> batchTimes<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    188. 

  188.     <span class="token keyword">let</span> promise <span class="token operator">=</span> playlistCollection<span class="token punctuation">.</span><span class="token function">skip</span><span class="token punctuation">(</span>i <span class="token operator">*</span> <span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span><span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 从第 skip 条开始取，最多取 limit 条数据</span>
    189. 

  189.     tasks<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>promise<span class="token punctuation">)</span>
    190. 

  190.   <span class="token punctuation">}</span>
    191. 

  191.   <span class="token keyword">let</span> list <span class="token operator">=</span> <span class="token punctuation">{</span>
    192. 

  192.     <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    193. 

  193.   <span class="token punctuation">}</span>
    194. 

  194.   <span class="token keyword">if</span> <span class="token punctuation">(</span>tasks<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    195. 

  195.     list <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>tasks<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> cur</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// reduce数组方法 累积拼接</span>
    196. 

  196.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    197. 

  197.         <span class="token literal-property property">data</span><span class="token operator">:</span> acc<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>cur<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
    198. 

  198.       <span class="token punctuation">}</span>
    199. 

  199.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    200. 

  200.   <span class="token punctuation">}</span>
    201. 

  201. 

  202.   <span class="token comment">// 获取第三方服务器端数据</span>
    203. 

  203.   <span class="token keyword">const</span> playlist <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">rp</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    204. 

  204.     <span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">.</span>result
    205. 

  205.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    206. 

  206. 

  207.   <span class="token comment">// 数据库与服务器数据对比去重（数据已存在数据库的无需再重复添加）</span>
    208. 

  208.   <span class="token keyword">const</span> newData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    209. 

  209.   <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len1 <span class="token operator">=</span> playlist<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len1<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    210. 

  210.     <span class="token keyword">let</span> flag <span class="token operator">=</span> <span class="token boolean">true</span>
    211. 

  211.     <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len2 <span class="token operator">=</span> list<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> j <span class="token operator">&lt;</span> len2<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    212. 

  212.       <span class="token keyword">if</span><span class="token punctuation">(</span>playlist<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id <span class="token operator">===</span> list<span class="token punctuation">.</span>data<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">{</span>
    213. 

  213.         flag <span class="token operator">=</span> <span class="token boolean">false</span>
    214. 

  214.         <span class="token keyword">break</span>
    215. 

  215.       <span class="token punctuation">}</span>
    216. 

  216.     <span class="token punctuation">}</span>
    217. 

  217.     <span class="token keyword">if</span><span class="token punctuation">(</span>flag<span class="token punctuation">)</span><span class="token punctuation">{</span>
    218. 

  218.       newData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>playlist<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
    219. 

  219.     <span class="token punctuation">}</span>
    220. 

  220.   <span class="token punctuation">}</span>
    221. 

  221. 

  222.   <span class="token comment">// 把数据插入数据库，需要单条插入</span>
    223. 

  223.   <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> newData<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    224. 

  224.     <span class="token keyword">await</span> playlistCollection<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 给数据库集合添加数据</span>
    225. 

  225.       <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    226. 

  226.         <span class="token operator">...</span>newData<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>
    227. 

  227.         <span class="token literal-property property">createTime</span><span class="token operator">:</span> db<span class="token punctuation">.</span><span class="token function">serverDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// db.serverDate() 获取服务器时间</span>
    228. 

  228.       <span class="token punctuation">}</span>
    229. 

  229.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 数据添加成功</span>
    230. 

  230.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'数据添加成功'</span><span class="token punctuation">)</span>
    231. 

  231.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 失败</span>
    232. 

  232.       console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
    233. 

  233.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    234. 

  234.   <span class="token punctuation">}</span>
    235. 

  235.   <span class="token keyword">return</span> newData<span class="token punctuation">.</span>length <span class="token comment">// 插入多少条数据</span>
    236. 

  236. <span class="token punctuation">}</span>
    237. 

  237. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br></div></div><h5 id="查询数据库"><a href="#查询数据库" class="header-anchor">#</a> 查询数据库</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//云函数中查询数据库的例子：</span>
    238. 

  238. 

  239. <span class="token comment">// 云函数入口文件</span>
    240. 

  240. <span class="token keyword">const</span> cloud <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'wx-server-sdk'</span><span class="token punctuation">)</span>
    241. 

  241. 

  242. cloud<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    243. 

  243. 

  244. <span class="token keyword">const</span> TcbRouter <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'tcb-router'</span><span class="token punctuation">)</span>
    245. 

  245. <span class="token keyword">const</span> db <span class="token operator">=</span> cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 初始化数据库</span>
    246. 

  246. <span class="token keyword">const</span> blogCollection <span class="token operator">=</span> db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'blog'</span><span class="token punctuation">)</span> <span class="token comment">// 博客的数据库集合</span>
    247. 

  247. 

  248. <span class="token comment">// 云函数入口函数</span>
    249. 

  249. exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    250. 

  250.   <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TcbRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span> event <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 初始化TcbRouter</span>
    251. 

  251. 

  252.   app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    253. 

  253.     <span class="token comment">// skip 从第几条开始查，limit 查几条数据，orderBy(排序字段，排序方式) 排序，排序方式desc降序/asc升序</span>
    254. 

  254.     ctx<span class="token punctuation">.</span>body <span class="token operator">=</span>  <span class="token keyword">await</span> blogCollection<span class="token punctuation">.</span><span class="token function">skip</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>start<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
    255. 

  255.     <span class="token punctuation">.</span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string">'createTime'</span><span class="token punctuation">,</span> <span class="token string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    256. 

  256.       <span class="token keyword">return</span> res<span class="token punctuation">.</span>data
    257. 

  257.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    258. 

  258. 

  259.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    260. 

  260. 

  261. 

  262.   <span class="token keyword">return</span> app<span class="token punctuation">.</span><span class="token function">serve</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 必需返回</span>
    263. 

  263. <span class="token punctuation">}</span>
    264. 

  264. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h5 id="云函数调试"><a href="#云函数调试" class="header-anchor">#</a> 云函数调试</h5> <p>云控制台中可会云函数进行云端测试</p> <p>在小程序调用云函数后，可查看云函数<strong>日志</strong></p> <h4 id="定时触发云函数"><a href="#定时触发云函数" class="header-anchor">#</a> 定时触发云函数</h4> <p>如果云函数需要定时 / 定期执行，也就是定时触发，我们可以使用云函数定时触发器。配置了定时触发器的云函数，会在相应时间点被自动触发，函数的返回结果不会返回给调用方</p> <p>云函数目录下新建 config.json</p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/triggers.html" target="_blank" rel="noopener noreferrer">API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
    265. 

  265.   <span class="token property">&quot;triggers&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    266. 

  266.     <span class="token punctuation">{</span>
    267. 

  267.       <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;myTriggers&quot;</span><span class="token punctuation">,</span>
    268. 

  268.       <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;timer&quot;</span><span class="token punctuation">,</span>
    269. 

  269.       <span class="token property">&quot;config&quot;</span><span class="token operator">:</span><span class="token string">&quot;0 0 10,14,16,20 * * * *&quot;</span> <span class="token comment">//表示每天的10点、14点、16点、20点触发一次</span>
    270. 

  270.     <span class="token punctuation">}</span>
    271. 

  271.   <span class="token punctuation">]</span>
    272. 

  272. <span class="token punctuation">}</span>
    273. 

  273. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>编辑好触发器之后，要在云函数目录 &gt; 右键 &gt; <code>上传触发器</code></p> <h4 id="配置云函数超时时间"><a href="#配置云函数超时时间" class="header-anchor">#</a> 配置云函数超时时间</h4> <p>当云函数比较复杂的时候，默认的超时时间3秒可能不能够满足需求，可以适当的设置更为合理的时间</p> <p>云开发控制台 &gt; 云函数 &gt; 配置 &gt; 超时时间</p> <h4 id="上拉加载与下拉刷新"><a href="#上拉加载与下拉刷新" class="header-anchor">#</a> 上拉加载与下拉刷新</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>page页面json中：
    274. 

  274. <span class="token string-property property">&quot;enablePullDownRefresh&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
    275. 

  275. 

  276. 

  277. page页面js中有这两个函数：
    278. 

  278. 

  279.  <span class="token comment">/**
    280. 

  280.    * 页面相关事件处理函数--监听用户下拉动作
    281. 

  281.    */</span>
    282. 

  282.   <span class="token function-variable function">onPullDownRefresh</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    283. 

  283. 	 <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    284. 

  284.       <span class="token literal-property property">playlist</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    285. 

  285.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    286. 

  286.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_getPlaylist</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    287. 

  287.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    288. 

  288. 

  289.   <span class="token comment">/**
    290. 

  290.    * 页面上拉触底事件的处理函数
    291. 

  291.    */</span>
    292. 

  292.   <span class="token function-variable function">onReachBottom</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    293. 

  293.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_getPlaylist</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    294. 

  294.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    295. 

  295. 

  296. 

  297. 

  298.  下拉刷新请求完数据后
    299. 

  299.  wx<span class="token punctuation">.</span><span class="token function">stopPullDownRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 停止下拉刷新动画</span>
    300. 

  300. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h4 id="云函数路由优化tcb-router"><a href="#云函数路由优化tcb-router" class="header-anchor">#</a> 云函数路由优化tcb-router</h4> <p>一个用户在一个云环境只能创建50个云函数</p> <p>假如小程序非常复杂，50个云函数不能够满足业务需求怎么办？</p> <p>相似的请求归类到同一个云函数处理</p> <p>tcb-router是一个koa风格的云函数路由库</p> <p>通俗理解就是可以把很多个接口归类到同一个云函数内。</p> <p>github-tcb-router:  <a href="https://github.com/TencentCloudBase/tcb-router" target="_blank" rel="noopener noreferrer">https://github.com/TencentCloudBase/tcb-router<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>koa洋葱模型...</p> <p>安装：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code>在使用到tcb-router的云函数目录下打开命令行，输入命令进行安装
    301. 

  301. <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> tcb-router
    302. 

  302. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 云函数的 index.js</span>
    303. 

  303. <span class="token keyword">const</span> TcbRouter <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'router'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 必需</span>
    304. 

  304. 

  305. exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    306. 

  306.     <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TcbRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span> event <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 必需</span>
    307. 

  307. 

  308.     <span class="token comment">// app.use 表示该中间件会适用于所有的路由(全局中间件) 非必需</span>
    309. 

  309.     app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 这个中间件表示所有路由都会调用到，而路由中间件为单独调用</span>
    310. 

  310.         ctx<span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// 获取要传给小程序端的数据</span>
    311. 

  311.         ctx<span class="token punctuation">.</span>data<span class="token punctuation">.</span>openId <span class="token operator">=</span> event<span class="token punctuation">.</span>userInfo<span class="token punctuation">.</span>openId <span class="token comment">// 这里获取到的openId将分布到所有路由</span>
    312. 

  312.         <span class="token keyword">await</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 执行下一中间件</span>
    313. 

  313.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    314. 

  314. 

  315.     <span class="token comment">// 路由为数组表示，该中间件适用于 user 和 timer 两个路由</span>
    316. 

  316.     app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'user'</span><span class="token punctuation">,</span> <span class="token string">'timer'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    317. 

  317.         ctx<span class="token punctuation">.</span>data<span class="token punctuation">.</span>company <span class="token operator">=</span> <span class="token string">'Tencent'</span><span class="token punctuation">;</span> <span class="token comment">// 这里获取到的数据将分布到 user 和 timer 两个路由</span>
    318. 

  318.         <span class="token keyword">await</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 执行下一中间件</span>
    319. 

  319.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    320. 

  320. 

  321.     <span class="token comment">// 路由为字符串，该中间件只适用于 user 路由</span>
    322. 

  322.     app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    323. 

  323.         ctx<span class="token punctuation">.</span>data<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'heyli'</span><span class="token punctuation">;</span>  <span class="token comment">// 获取要传给小程序端的数据</span>
    324. 

  324.         <span class="token keyword">await</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 执行下一中间件</span>
    325. 

  325.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    326. 

  326.         ctx<span class="token punctuation">.</span>data<span class="token punctuation">.</span>sex <span class="token operator">=</span> <span class="token string">'male'</span><span class="token punctuation">;</span> <span class="token comment">// 获取要传给小程序端的数据</span>
    327. 

  327.         <span class="token keyword">await</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 执行下一中间件</span>
    328. 

  328.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    329. 

  329.         ctx<span class="token punctuation">.</span>data<span class="token punctuation">.</span>city <span class="token operator">=</span> <span class="token string">'Foshan'</span><span class="token punctuation">;</span> <span class="token comment">// 获取要传给小程序端的数据</span>
    330. 

  330.         <span class="token comment">// ctx.body 返回数据到小程序端</span>
    331. 

  331.         ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> ctx<span class="token punctuation">.</span>data<span class="token punctuation">}</span><span class="token punctuation">;</span>  <span class="token comment">// 要传给小程序端的数据</span>
    332. 

  332.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    333. 

  333. 

  334.     <span class="token comment">// 路由为字符串，该中间件只适用于 timer 路由</span>
    335. 

  335.     app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token string">'timer'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    336. 

  336.         ctx<span class="token punctuation">.</span>data<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'flytam'</span><span class="token punctuation">;</span>
    337. 

  337.         <span class="token keyword">await</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 执行下一中间件</span>
    338. 

  338.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    339. 

  339.         ctx<span class="token punctuation">.</span>data<span class="token punctuation">.</span>sex <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    340. 

  340.         <span class="token comment">// 等待500ms，再执行下一中间件</span>
    341. 

  341.         <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    342. 

  342.             <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'male'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    343. 

  343.         <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    344. 

  344.         <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    345. 

  345.         <span class="token keyword">await</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 执行下一中间件</span>
    346. 

  346.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>  <span class="token punctuation">{</span>
    347. 

  347.         ctx<span class="token punctuation">.</span>data<span class="token punctuation">.</span>city <span class="token operator">=</span> <span class="token string">'Taishan'</span><span class="token punctuation">;</span>
    348. 

  348. 

  349.         <span class="token comment">// ctx.body 返回数据到小程序端</span>
    350. 

  350.         ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> ctx<span class="token punctuation">.</span>data <span class="token punctuation">}</span><span class="token punctuation">;</span>
    351. 

  351.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    352. 

  352. 

  353.     <span class="token keyword">return</span> app<span class="token punctuation">.</span><span class="token function">serve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 必需</span>
    354. 

  354. 

  355. <span class="token punctuation">}</span>
    356. 

  356. 

  357. 

  358. 小程序端：
    359. 

  359. 

  360. <span class="token comment">// 调用名为 router 的云函数，路由名为 user</span>
    361. 

  361. wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    362. 

  362.     <span class="token comment">// 要调用的云函数名称</span>
    363. 

  363.     <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;router&quot;</span><span class="token punctuation">,</span>
    364. 

  364.     <span class="token comment">// 传递给云函数的参数</span>
    365. 

  365.     <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    366. 

  366.         <span class="token literal-property property">$url</span><span class="token operator">:</span> <span class="token string">&quot;user&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 要调用的路由的路径，传入准确路径或者通配符*</span>
    367. 

  367.         <span class="token literal-property property">other</span><span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span>
    368. 

  368.     <span class="token punctuation">}</span>
    369. 

  369. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    370. 

  370. 	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    371. 

  371. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    372. 

  372. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br></div></div><p>上面tcb-router代码会按照洋葱模型执行，即先从上往下逐个进入中间件，再从下往上逐个退出中间件。</p> <h4 id="本地存储-缓存"><a href="#本地存储-缓存" class="header-anchor">#</a> 本地存储（缓存）</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 存储：</span>
    373. 

  373. wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token comment">// 同步存储（存储成功再继续下一步操作）</span>
    374. 

  374. wx<span class="token punctuation">.</span><span class="token function">setStorage</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token comment">// 异步存储（即使存储没成功也会执行下一步代码）、</span>
    375. 

  375. 

  376. <span class="token comment">// 读取：</span>
    377. 

  377. wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token comment">// 同步 （读取到数据在进行下一步操作）</span>
    378. 

  378. wx<span class="token punctuation">.</span><span class="token function">setStorage</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token comment">// 异步</span>
    379. 

  379. 

  380. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="api设置title"><a href="#api设置title" class="header-anchor">#</a> api设置title</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>wx<span class="token punctuation">.</span><span class="token function">setNavigationBarTitle</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    381. 

  381.       <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    382. 

  382. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    383. 

  383. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="背景播放音"><a href="#背景播放音" class="header-anchor">#</a> 背景播放音</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html" target="_blank" rel="noopener noreferrer">BackgroundAudioManager<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 全局唯一的背景音频管理器</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token comment">// 需要在app.json配置，才能使用后台音乐播放的能力</span>
    384. 

  384. 

  385. <span class="token property">&quot;requiredBackgroundModes&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;audio&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;location&quot;</span><span class="token punctuation">]</span>
    386. 

  386. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 获取全局唯一的背景音频管理器</span>
    387. 

  387. <span class="token keyword">const</span> backgroundAudioManager <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getBackgroundAudioManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    388. 

  388. 

  389. 

  390. backgroundAudioManager<span class="token punctuation">.</span>src <span class="token operator">=</span> 音频链接
    391. 

  391. backgroundAudioManager<span class="token punctuation">.</span>title <span class="token operator">=</span> 音频标题
    392. 

  392. 

  393. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="createselectorquery查询节点信息"><a href="#createselectorquery查询节点信息" class="header-anchor">#</a> createSelectorQuery查询节点信息</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html" target="_blank" rel="noopener noreferrer">createSelectorQuery<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 小程序的方法，用于查询节点等操作</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> query <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">createSelectorQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    394. 

  394. query<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'#the-id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">boundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 节点的布局信息</span>
    395. 

  395. query<span class="token punctuation">.</span><span class="token function">selectViewport</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollOffset</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    396. 

  396. query<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    397. 

  397.   res<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>top       <span class="token comment">// #the-id节点的上边界坐标</span>
    398. 

  398.   res<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>scrollTop <span class="token comment">// 显示区域的竖直滚动位置</span>
    399. 

  399. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    400. 

  400. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="组件内的方法"><a href="#组件内的方法" class="header-anchor">#</a> 组件内的方法</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html" target="_blank" rel="noopener noreferrer">Component(Object object)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="组件生命周期"><a href="#组件生命周期" class="header-anchor">#</a> 组件生命周期</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html" target="_blank" rel="noopener noreferrer">lifetimes<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 生命周期</span>
    401. 

  401. <span class="token literal-property property">lifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    402. 

  402.     <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 在组件在视图层布局完成后执行</span>
    403. 

  403.    	 <span class="token operator">...</span>
    404. 

  404.     <span class="token punctuation">}</span>
    405. 

  405. <span class="token punctuation">}</span><span class="token punctuation">,</span>
    406. 

  406. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h5 id="组件所在页面的生命周期"><a href="#组件所在页面的生命周期" class="header-anchor">#</a> 组件所在页面的生命周期</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    407. 

  407.   <span class="token literal-property property">pageLifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    408. 

  408.     <span class="token function-variable function">show</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    409. 

  409.       <span class="token comment">// 页面被展示</span>
    410. 

  410.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    411. 

  411.     <span class="token function-variable function">hide</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    412. 

  412.       <span class="token comment">// 页面被隐藏</span>
    413. 

  413.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    414. 

  414.     <span class="token function-variable function">resize</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">size</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    415. 

  415.       <span class="token comment">// 页面尺寸变化</span>
    416. 

  416.     <span class="token punctuation">}</span>
    417. 

  417.   <span class="token punctuation">}</span>
    418. 

  418. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    419. 

  419. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="组件对数据的监听"><a href="#组件对数据的监听" class="header-anchor">#</a> 组件对数据的监听</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html" target="_blank" rel="noopener noreferrer">observers<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token literal-property property">observers</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 对数据的监听(数据初次加载完成也会执行)</span>
    420. 

  420.     <span class="token function">监听的数据对象</span><span class="token punctuation">(</span><span class="token parameter">newData</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    421. 

  421.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newData<span class="token punctuation">)</span>
    422. 

  422.     <span class="token punctuation">}</span>
    423. 

  423. <span class="token punctuation">}</span><span class="token punctuation">,</span>
    424. 

  424. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="子组件自定义事件传递给父组件"><a href="#子组件自定义事件传递给父组件" class="header-anchor">#</a> 子组件自定义事件传递给父组件</h4> <div class="language- line-numbers-mode"><pre class="language-text"><code>子组件js：
    425. 

  425. // 触发自定义事件 向父组件传值， 参数x（可选，传递给父组件的参数，可以是对象或其他）
    426. 

  426. this.triggerEvent('自定义事件名', 参数x)
    427. 

  427. 

  428. 

  429. 父组件wxml：
    430. 

  430. &lt;子组件标签 bind:自定义事件名=&quot;执行的事件&quot; /&gt;
    431. 

  431. 

  432. 父组件js：
    433. 

  433. 执行的事件(event) {
    434. 

  434. 	console.log(event.detil.参数)
    435. 

  435. }
    436. 

  436. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h4 id="父组件自定义事件传递给子组件"><a href="#父组件自定义事件传递给子组件" class="header-anchor">#</a> 父组件自定义事件传递给子组件</h4> <div class="language- line-numbers-mode"><pre class="language-text"><code>父组件wxml：
    437. 

  437. &lt;子组件标签 class=&quot;子组件类名&quot;&gt;
    438. 

  438. 

  439. 父组件JS：
    440. 

  440. // 选择组件，并传入事件和参数
    441. 

  441. this.selectComponent('.子组件类名').自定义事件名(传入参数)
    442. 

  442. 

  443. 子组件js：
    444. 

  444. methods: {
    445. 

  445. 	自定义事件名(参数x){
    446. 

  446. 		console.log(参数x)
    447. 

  447. 	}
    448. 

  448. }
    449. 

  449. 

  450. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h4 id="兄弟组件间传递事件和传值"><a href="#兄弟组件间传递事件和传值" class="header-anchor">#</a> 兄弟组件间传递事件和传值</h4> <div class="language- line-numbers-mode"><pre class="language-text"><code>例子：子组件1向子组件2传递参数
    451. 

  451. 

  452. 父组件wxml中：
    453. 

  453. &lt;子组件标签1 bind:自定义事件名1=&quot;执行的事件&quot;&gt;
    454. 

  454. &lt;子组件标签2 class=&quot;子组件2类名&quot;&gt;
    455. 

  455. 

  456. 父组件js：
    457. 

  457. 执行的事件(event) {
    458. 

  458. 	this.selectComponent('.子组件2类名').自定义事件名2(event.detil.参数x) // 向子组件2传值
    459. 

  459. }
    460. 

  460. 

  461. 子组件1js：
    462. 

  462. // 触发自定义事件 向父组件传值， 参数x（可选，传递给父组件的参数，可以是对象或其他）
    463. 

  463. this.triggerEvent('自定义事件名1', 参数x)
    464. 

  464. 

  465. 

  466. 

  467. 子组件2js：
    468. 

  468. methods: {
    469. 

  469. 	自定义事件名2(参数x){
    470. 

  470. 		console.log(参数x)  // 接收父组件传入的值
    471. 

  471. 	}
    472. 

  472. }
    473. 

  473. 

  474. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h4 id="获取手机信息"><a href="#获取手机信息" class="header-anchor">#</a> 获取手机信息</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html" target="_blank" rel="noopener noreferrer">wx.getSystemInfo(Object object)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>wx<span class="token punctuation">.</span><span class="token function">getSystemInfo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    475. 

  475. 	<span class="token function">success</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    476. 

  476. 		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token comment">//手机信息</span>
    477. 

  477. 	<span class="token punctuation">}</span>
    478. 

  478. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    479. 

  479. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="滚动组件"><a href="#滚动组件" class="header-anchor">#</a> 滚动组件</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html" target="_blank" rel="noopener noreferrer">scroll-view<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">scroll-top</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{scrollTop}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-with-animation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    480. 

  480. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
    481. 

  481. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="全局属性、方法-类似vuex"><a href="#全局属性、方法-类似vuex" class="header-anchor">#</a> 全局属性、方法（类似vuex）</h4> <div class="language- line-numbers-mode"><pre class="language-text"><code>在app.js中：
    482. 

  482. 

  483. onLaunch: function () {
    484. 

  484. 	this.globalData = {// 设置全局属性、方法
    485. 

  485. 		test: 0
    486. 

  486. 	}
    487. 

  487. },
    488. 

  488. setGlobalData(dataItem, val) { // 设置全局属性
    489. 

  489. 	this.globalData[dataItem] = val
    490. 

  490. },
    491. 

  491. getGlobalData(dataItem) { // 获取全局属性
    492. 

  492. 	return this.globalData[dataItem]
    493. 

  493. }
    494. 

  494. 

  495. 

  496. 在需要调用的页面js中：
    497. 

  497. const app = getApp() // 在最顶部先调用app方法
    498. 

  498. 

  499. // 设置全局属性
    500. 

  500. app.setGlobalData('test', 1)
    501. 

  501. 

  502. // 获取全局属性
    503. 

  503. app.getGlobalData('test')
    504. 

  504. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h4 id="消息提示框"><a href="#消息提示框" class="header-anchor">#</a> 消息提示框</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html" target="_blank" rel="noopener noreferrer">showToast<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    505. 

  505.   <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'成功'</span><span class="token punctuation">,</span>
    506. 

  506.   <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'success'</span><span class="token punctuation">,</span> <span class="token comment">//图标： success 成功、loading 加载中、none 无</span>
    507. 

  507.   <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span>
    508. 

  508. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    509. 

  509. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="《发现》页面"><a href="#《发现》页面" class="header-anchor">#</a> 《发现》页面</h2> <h4 id="调用组件外部的样式"><a href="#调用组件外部的样式" class="header-anchor">#</a> 调用组件外部的样式</h4> <p>components内部的组件无法直接调用外部的样式。可通过以下方式调用组件外部样式：</p> <p><strong>方法一：</strong></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>父组件wxml：
    510. 

  510. &lt;!-- iconfont 和 icon-sousuo 是传入组件内部的样式名称，iconfont（自定义名称）=&quot;iconfont（外部样式文件中定义的样式名）&quot;  --&gt;
    511. 

  511. &lt;x-search iconfont=&quot;iconfont&quot; icon-sousuo=&quot;icon-sousuo&quot;/&gt;
    512. 

  512. 

  513. 

  514. 子组件js:
    515. 

  515. // 组件外部样式
    516. 

  516.   externalClasses: [
    517. 

  517.     'iconfont', // 对应的是上面等号前面的名称
    518. 

  518.     'icon-sousuo'
    519. 

  519.   ],
    520. 

  520. 

  521.  子组件wxml： 即可实现调用组件外的样式
    522. 

  522.  &lt;i class=&quot;iconfont icon-sousuo&quot; /&gt;
    523. 

  523. 

  524. 

  525.   注意：如果想在组件内部再次修改样式，不能够引用外部传进来的class名称进行修改，可以另起一个class名称进行修改。
    526. 

  526. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><strong>方法二：</strong></p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB" target="_blank" rel="noopener noreferrer">消除样式隔离<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token literal-property property">组件内</span><span class="token operator">:</span>
    527. 

  527. <span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    528. 

  528.   <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    529. 

  529.     <span class="token literal-property property">styleIsolation</span><span class="token operator">:</span> <span class="token string">'apply-shared'</span>
    530. 

  530.   <span class="token punctuation">}</span>
    531. 

  531. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    532. 

  532. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="组件插槽slot"><a href="#组件插槽slot" class="header-anchor">#</a> 组件插槽slot</h4> <p><strong>单个插槽</strong></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>父组件调用传入插槽内容:
    533. 

  533. &lt;组件标签&gt;
    534. 

  534.     &lt;view&gt;
    535. 

  535.       &lt;view&gt;插槽内容&lt;/view&gt;
    536. 

  536.       &lt;view&gt;插槽内容&lt;/view&gt;
    537. 

  537.     &lt;/view&gt;
    538. 

  538. &lt;/组件标签&gt;
    539. 

  539. 

  540.  组件内部定义slot标签:
    541. 

  541.  &lt;view&gt;
    542. 

  542.     &lt;!-- slot插槽 --&gt;
    543. 

  543.     &lt;slot&gt;&lt;/slot&gt;
    544. 

  544. &lt;/view&gt;
    545. 

  545. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><strong>如果需要实现多个插槽</strong></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>
    546. 

  546. 父组件调用传入插槽内容:
    547. 

  547. &lt;组件标签&gt;
    548. 

  548.     &lt;view slot=&quot;slot2&quot;&gt;
    549. 

  549.       &lt;view&gt;插槽1内容&lt;/view&gt;
    550. 

  550.       &lt;view&gt;插槽1内容&lt;/view&gt;
    551. 

  551.     &lt;/view&gt;
    552. 

  552. 

  553.      &lt;view slot=&quot;slot1&quot;&gt;
    554. 

  554.       &lt;view&gt;插槽2内容&lt;/view&gt;
    555. 

  555.       &lt;view&gt;插槽2内容&lt;/view&gt;
    556. 

  556.     &lt;/view&gt;
    557. 

  557. &lt;/组件标签&gt;
    558. 

  558. 

  559. 组件js :
    560. 

  560. options: {// 设置
    561. 

  561.     multipleSlots: true // 打开多个插槽功能
    562. 

  562. },
    563. 

  563. 

  564. 

  565. 组件内部定义slot标签:
    566. 

  566. &lt;view&gt;
    567. 

  567.     &lt;!-- slot插槽 具名插槽--&gt;
    568. 

  568.     &lt;slot name=&quot;slot1&quot;&gt;&lt;/slot&gt;
    569. 

  569.     &lt;slot name=&quot;slot2&quot;&gt;&lt;/slot&gt;
    570. 

  570. &lt;/view&gt;
    571. 

  571. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h4 id="判断用户授权"><a href="#判断用户授权" class="header-anchor">#</a> 判断用户授权</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html" target="_blank" rel="noopener noreferrer">授权<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 判断用户是否授权</span>
    572. 

  572.     wx<span class="token punctuation">.</span><span class="token function">getSetting</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    573. 

  573.       <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 这里使用箭头函数可改变内部this指向为外部的this</span>
    574. 

  574.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    575. 

  575.         <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>authSetting<span class="token punctuation">[</span><span class="token string">'scope.userInfo'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 已授权</span>
    576. 

  576.          wx<span class="token punctuation">.</span><span class="token function">getUserInfo</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 获取用户信息</span>
    577. 

  577.            <span class="token function">success</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    578. 

  578.              console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    579. 

  579.            <span class="token punctuation">}</span>
    580. 

  580.          <span class="token punctuation">}</span><span class="token punctuation">)</span>
    581. 

  581.         <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 未授权</span>
    582. 

  582. 

  583.         <span class="token punctuation">}</span>
    584. 

  584.       <span class="token punctuation">}</span>
    585. 

  585.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    586. 

  586. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h4 id="button的开发能力-获取用户信息-1"><a href="#button的开发能力-获取用户信息-1" class="header-anchor">#</a> button的开发能力（获取用户信息）1</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;login&quot;</span>
    587. 

  587.     open<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;getUserInfo&quot;</span>
    588. 

  588.     bindgetuserinfo<span class="token operator">=</span><span class="token string">&quot;onGetUserInfo&quot;</span>     <span class="token comment">// bindgetuserinfo 为固定的</span>
    589. 

  589. <span class="token operator">&gt;</span>
    590. 

  590. 	获取微信授权信息
    591. 

  591. <span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    592. 

  592. 

  593. 

  594. bindgetuserinfo 事件会询问用户是否同意授权
    595. 

  595. 

  596. 

  597. js中：
    598. 

  598.     <span class="token function">onGetUserInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 获取用户信息</span>
    599. 

  599.       <span class="token keyword">const</span> userInfo <span class="token operator">=</span> event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>userInfo
    600. 

  600.       <span class="token keyword">if</span> <span class="token punctuation">(</span>userInfo<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 用户允许授权</span>
    601. 

  601.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    602. 

  602.           <span class="token literal-property property">modalShow</span><span class="token operator">:</span> <span class="token boolean">false</span>
    603. 

  603.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    604. 

  604.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">'loginSuccess'</span><span class="token punctuation">,</span> userInfo<span class="token punctuation">)</span> <span class="token comment">// 给父组件传用户数据</span>
    605. 

  605.       <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 用户拒绝授权</span>
    606. 

  606.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">'loginFail'</span><span class="token punctuation">)</span>
    607. 

  607.       <span class="token punctuation">}</span>
    608. 

  608.     <span class="token punctuation">}</span>
    609. 

  609. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h4 id="原生组件"><a href="#原生组件" class="header-anchor">#</a> 原生组件</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html" target="_blank" rel="noopener noreferrer">原生组件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>
    610. 

  610. auto-focus 自动获取焦点
    611. 

  611. 

  612. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span>
    613. 

  613.     <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span>
    614. 

  614.     <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>分享新鲜事...<span class="token punctuation">&quot;</span></span>
    615. 

  615.     <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>140<span class="token punctuation">&quot;</span></span>
    616. 

  616.     <span class="token attr-name">auto-focus</span>
    617. 

  617.     <span class="token attr-name">bindinput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onInput<span class="token punctuation">&quot;</span></span>
    618. 

  618.     <span class="token attr-name">bindfocus</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onFocus<span class="token punctuation">&quot;</span></span>
    619. 

  619.     <span class="token attr-name">bindblur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onBlur<span class="token punctuation">&quot;</span></span>
    620. 

  620.   <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
    621. 

  621. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h4 id="选择上传图片"><a href="#选择上传图片" class="header-anchor">#</a> 选择上传图片</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html" target="_blank" rel="noopener noreferrer">上传图片<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> max <span class="token operator">=</span> <span class="token number">9</span> <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>images<span class="token punctuation">.</span>length <span class="token comment">// 还能再选几张图片</span>
    622. 

  622. wx<span class="token punctuation">.</span><span class="token function">chooseImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    623. 

  623.       <span class="token literal-property property">count</span><span class="token operator">:</span> max<span class="token punctuation">,</span> <span class="token comment">// 还能再选几张图片</span>
    624. 

  624.       <span class="token literal-property property">sizeType</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'original'</span><span class="token punctuation">,</span> <span class="token string">'compressed'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 初始值 and 压缩过的</span>
    625. 

  625.       <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'album'</span><span class="token punctuation">,</span> <span class="token string">'camera'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 手机相册选择 and 拍照选择</span>
    626. 

  626.       <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 箭头函数改变this指向</span>
    627. 

  627.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    628. 

  628.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    629. 

  629.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    630. 

  630. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h4 id="图片裁剪"><a href="#图片裁剪" class="header-anchor">#</a> 图片裁剪</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/component/image.html" target="_blank" rel="noopener noreferrer">图片裁剪<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- mode 图片裁剪 aspectFill 保证短边完整显示 --&gt;</span>
    631. 

  631. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
    632. 

  632. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="获取标签自定义属性data-删除图片的实现"><a href="#获取标签自定义属性data-删除图片的实现" class="header-anchor">#</a> 获取标签自定义属性data-* （删除图片的实现）</h4> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;!-- 显示图片 --&gt;
    633. 

  633.     &lt;block wx:for=&quot;{{images}}&quot; wx:key=&quot;*this&quot;&gt;
    634. 

  634.       &lt;view class=&quot;image-wrap&quot;&gt;
    635. 

  635.         &lt;!-- mode 图片裁剪 aspectFill 保证短边完整显示 --&gt;
    636. 

  636.         &lt;image class=&quot;image&quot; src=&quot;{{item}}&quot; mode=&quot;aspectFill&quot;&gt;&lt;/image&gt;
    637. 

  637.         &lt;icon class=&quot;iconfont icon-shanchu&quot; bindtap=&quot;onDelImage&quot; data-index=&quot;{{index}}&quot;&gt;&lt;/icon&gt;
    638. 

  638.       &lt;/view&gt;
    639. 

  639.     &lt;/block&gt;
    640. 

  640. 

  641. 

  642.     // 删除图片
    643. 

  643.   onDelImage(event) {
    644. 

  644.   	// event.target.dataset.index 获取标签属性data-index的值
    645. 

  645.     this.data.images.splice(event.target.dataset.index, 1) // splice会改变原有数组
    646. 

  646.     this.setData({
    647. 

  647.       images: this.data.images
    648. 

  648.     })
    649. 

  649.   },
    650. 

  650. 

  651. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h4 id="全屏预览图片-点击图片放大预览"><a href="#全屏预览图片-点击图片放大预览" class="header-anchor">#</a> 全屏预览图片(点击图片放大预览)</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html" target="_blank" rel="noopener noreferrer">全屏预览图片<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 全屏预览图片</span>
    652. 

  652.   <span class="token function">onPreviewImage</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    653. 

  653.     wx<span class="token punctuation">.</span><span class="token function">previewImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    654. 

  654.       <span class="token literal-property property">urls</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>images<span class="token punctuation">,</span> <span class="token comment">// 图片地址列表</span>
    655. 

  655.       <span class="token literal-property property">current</span><span class="token operator">:</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>imgsrc <span class="token comment">// 当前预览图片地址</span>
    656. 

  656.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    657. 

  657.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    658. 

  658. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="文件上传云存储-发布博客例子"><a href="#文件上传云存储-发布博客例子" class="header-anchor">#</a> 文件上传云存储（发布博客例子）</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/storage/uploadFile.html" target="_blank" rel="noopener noreferrer">文件上传云存储<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">//  结合'发布'的例子：</span>
    659. 

  659.   <span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    660. 

  660.     <span class="token comment">// 验证是否输入内容</span>
    661. 

  661.     <span class="token keyword">if</span> <span class="token punctuation">(</span>content<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// trim() 去掉字符串空格</span>
    662. 

  662.       wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    663. 

  663.         <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'请输入内容'</span><span class="token punctuation">,</span>
    664. 

  664.         <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'none'</span>
    665. 

  665.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    666. 

  666.       <span class="token keyword">return</span>
    667. 

  667.     <span class="token punctuation">}</span>
    668. 

  668.     wx<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    669. 

  669.       <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'发布中'</span><span class="token punctuation">,</span>
    670. 

  670.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    671. 

  671.     <span class="token comment">/**
    672. 

  672.      * 实现思路及步骤：
    673. 

  673.      * 1、图片 -&gt; 上传 云存储  -&gt; 生成 图片fineID（云文件ID）
    674. 

  674.      * 2、数据 -&gt; 录入 云数据库
    675. 

  675.      *    数据包括：文字内容、图片fineID、昵称、头像、发布时间、openId(用户唯一标识，在插入数据库是系统会自动添加_openId字段，不需要另外插入)
    676. 

  676.      */</span>
    677. 

  677.     <span class="token keyword">let</span> promiseArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    678. 

  678.     <span class="token keyword">let</span> fileIds <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    679. 

  679.     <span class="token comment">// 图片上传云存储</span>
    680. 

  680.     <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    681. 

  681.       <span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    682. 

  682.         <span class="token keyword">let</span> suffix <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.\w+$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 文件扩展名(文件后缀)</span>
    683. 

  683.         wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 每次只能上传一个文件</span>
    684. 

  684.           <span class="token comment">/**
    685. 

  685.            * cloudPath 云路径。如果路径相同，后上传的文件会覆盖原文件
    686. 

  686.            * 路径：blog/云存储中的文件夹 + Date.now()时间戳 + Math.random()*1000000随机数 + 文件后缀
    687. 

  687.            */</span>
    688. 

  688.           <span class="token literal-property property">cloudPath</span><span class="token operator">:</span> <span class="token string">'blog/'</span> <span class="token operator">+</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'-'</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1000000</span> <span class="token operator">+</span> suffix<span class="token punctuation">,</span>
    689. 

  689.           <span class="token literal-property property">filePath</span><span class="token operator">:</span> item<span class="token punctuation">,</span> <span class="token comment">// 文件本地临时路径</span>
    690. 

  690.           <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    691. 

  691.             fileIds<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>fileID<span class="token punctuation">)</span>
    692. 

  692.             <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    693. 

  693.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    694. 

  694.           <span class="token function-variable function">fail</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    695. 

  695.             console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
    696. 

  696.             <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    697. 

  697.           <span class="token punctuation">}</span>
    698. 

  698.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    699. 

  699.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    700. 

  700.       promiseArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span>
    701. 

  701.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    702. 

  702. 

  703.     <span class="token comment">// 存入云数据库</span>
    704. 

  704.     Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>promiseArr<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    705. 

  705.       db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'blog'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    706. 

  706.         <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    707. 

  707.           <span class="token operator">...</span>userInfo<span class="token punctuation">,</span> <span class="token comment">// 昵称、头像</span>
    708. 

  708.           content<span class="token punctuation">,</span> <span class="token comment">// 内容</span>
    709. 

  709.           <span class="token literal-property property">img</span><span class="token operator">:</span> fileIds<span class="token punctuation">,</span> <span class="token comment">// 图片fileID列表</span>
    710. 

  710.           <span class="token literal-property property">createTime</span><span class="token operator">:</span> db<span class="token punctuation">.</span><span class="token function">serverDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 创建时间，取服务端时间</span>
    711. 

  711.         <span class="token punctuation">}</span>
    712. 

  712.       <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    713. 

  713.         wx<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    714. 

  714.         wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    715. 

  715.           <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'发布成功'</span><span class="token punctuation">,</span>
    716. 

  716.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    717. 

  717.         <span class="token comment">// 返回博客页面，并刷新</span>
    718. 

  718.         wx<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    719. 

  719. 

  720.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    721. 

  721.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    722. 

  722.       wx<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    723. 

  723.       wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    724. 

  724.         <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'抱歉，发布失败'</span><span class="token punctuation">,</span>
    725. 

  725.         <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'none'</span>
    726. 

  726.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    727. 

  727.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    728. 

  728.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    729. 

  729. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br></div></div><h4 id="js模块化-时间格式化"><a href="#js模块化-时间格式化" class="header-anchor">#</a> js模块化 （时间格式化）</h4> <p>在目录utils 中新建formatTime.js文件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 时间格式化 模块封装</span>
    730. 

  730. module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// date 数据格式为 date</span>
    731. 

  731.   <span class="token keyword">let</span> fmt <span class="token operator">=</span> <span class="token string">'yyyy-MM-dd hh:mm:ss'</span> <span class="token comment">// 预定格式</span>
    732. 

  732.   <span class="token keyword">const</span> o <span class="token operator">=</span> <span class="token punctuation">{</span>
    733. 

  733.     <span class="token comment">// + 正则中的1个或多个</span>
    734. 

  734.     <span class="token string-property property">'M+'</span><span class="token operator">:</span> date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
    735. 

  735.     <span class="token string-property property">'d+'</span><span class="token operator">:</span> date<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    736. 

  736.     <span class="token string-property property">'h+'</span><span class="token operator">:</span> date<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    737. 

  737.     <span class="token string-property property">'m+'</span><span class="token operator">:</span> date<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    738. 

  738.     <span class="token string-property property">'s+'</span><span class="token operator">:</span> date<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    739. 

  739.   <span class="token punctuation">}</span>
    740. 

  740. 

  741.   <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(y+)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>fmt<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    742. 

  742.     <span class="token comment">// $1 表示正则中的第一个，即(y+)</span>
    743. 

  743.     fmt <span class="token operator">=</span> fmt<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$1<span class="token punctuation">,</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// replace 替换</span>
    744. 

  744.   <span class="token punctuation">}</span>
    745. 

  745. 

  746.   <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> k <span class="token keyword">in</span> o<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    747. 

  747.     <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">'('</span><span class="token operator">+</span> k <span class="token operator">+</span><span class="token string">')'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>fmt<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    748. 

  748.       fmt <span class="token operator">=</span> fmt<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$1<span class="token punctuation">,</span> o<span class="token punctuation">[</span>k<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> o<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">:</span> o<span class="token punctuation">[</span>k<span class="token punctuation">]</span><span class="token punctuation">)</span>
    749. 

  749.     <span class="token punctuation">}</span>
    750. 

  750.   <span class="token punctuation">}</span>
    751. 

  751. 

  752.   <span class="token keyword">return</span> fmt
    753. 

  753. <span class="token punctuation">}</span>
    754. 

  754. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><p>在组件引入js模块</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> formatTime <span class="token keyword">from</span> <span class="token string">'../../utils/formatTime.js'</span>
    755. 

  755. 

  756. 使用：
    757. 

  757. <span class="token function">formatTime</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'Wed Aug 28 2019 16:23:06 GMT+0800 (中国标准时间)'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    758. 

  758. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="阻止事件冒泡-2"><a href="#阻止事件冒泡-2" class="header-anchor">#</a> 阻止事件冒泡</h4> <p><code>bind</code> 和 <code>catch</code> 都可以绑定事件，它们的区别是 <code>bind</code> 有事件冒泡，而 <code>catch</code> 没有</p> <h4 id="返回上一个页面并执行方法"><a href="#返回上一个页面并执行方法" class="header-anchor">#</a> 返回上一个页面并执行方法</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html" target="_blank" rel="noopener noreferrer">API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 返回博客页面，并刷新</span>
    759. 

  759.  wx<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    760. 

  760.  <span class="token keyword">const</span> pages <span class="token operator">=</span> <span class="token function">getCurrentPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取当前页面栈</span>
    761. 

  761.  <span class="token keyword">const</span> prevPage <span class="token operator">=</span> pages<span class="token punctuation">[</span>pages<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">]</span>  <span class="token comment">// 取到上一个页面</span>
    762. 

  762.  prevPage<span class="token punctuation">.</span><span class="token function">onPullDownRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 执行上一个页面的方法 onPullDownRefresh</span>
    763. 

  763. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="图片懒加载"><a href="#图片懒加载" class="header-anchor">#</a> 图片懒加载</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/component/image.html" target="_blank" rel="noopener noreferrer">API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>给image标签设置 lazy-load 为 true
    764. 

  764. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lazy-load</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
    765. 

  765. 

  766. .img {
    767. 

  767.   background: #eee;
    768. 

  768. }
    769. 

  769. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>懒加载占位图可以给image设置背景图或背景色</strong></p> <h4 id="模糊查询"><a href="#模糊查询" class="header-anchor">#</a> 模糊查询</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 获取博客列表</span>
    770. 

  770.   app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token string">'blogList'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    771. 

  771.     <span class="token keyword">const</span> keyword <span class="token operator">=</span> event<span class="token punctuation">.</span>keyword <span class="token comment">// 搜索关键字 调用接口时传递来的数据</span>
    772. 

  772.     <span class="token keyword">let</span> w <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    773. 

  773.     <span class="token keyword">if</span> <span class="token punctuation">(</span>keyword<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    774. 

  774.       w <span class="token operator">=</span> <span class="token punctuation">{</span>
    775. 

  775.         <span class="token literal-property property">content</span><span class="token operator">:</span> db<span class="token punctuation">.</span><span class="token function">RegExp</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 正则</span>
    776. 

  776.           <span class="token literal-property property">regexp</span><span class="token operator">:</span> keyword<span class="token punctuation">,</span>
    777. 

  777.           <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token string">'i'</span> <span class="token comment">// i表示忽略大小写</span>
    778. 

  778.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    779. 

  779.       <span class="token punctuation">}</span>
    780. 

  780.     <span class="token punctuation">}</span>
    781. 

  781. 

  782.     <span class="token comment">// where查询条件 skip 从第几条开始查，limit 查几条数据，orderBy(排序字段，排序方式) 排序，排序方式desc降序/asc升序</span>
    783. 

  783.     ctx<span class="token punctuation">.</span>body <span class="token operator">=</span>  <span class="token keyword">await</span> blogCollection<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span>w<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">skip</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>start<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
    784. 

  784.     <span class="token punctuation">.</span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string">'createTime'</span><span class="token punctuation">,</span> <span class="token string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    785. 

  785.       <span class="token keyword">return</span> res<span class="token punctuation">.</span>data
    786. 

  786.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    787. 

  787. 

  788.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    789. 

  789. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h4 id="提升模糊查询的效率-添加索引-对数据量大的查询效果明显"><a href="#提升模糊查询的效率-添加索引-对数据量大的查询效果明显" class="header-anchor">#</a> 提升模糊查询的效率 （添加索引，对数据量大的查询效果明显）</h4> <p>云开发控制台  &gt; 数据库相应的集合 &gt; 索引管理 &gt; 添加索引 &gt; 输入自定义索引名称、该字段的值是否唯一、被查询的字段名、升序/降序 &gt; ok</p> <h4 id="小程序端调用云数据库"><a href="#小程序端调用云数据库" class="header-anchor">#</a> 小程序端调用云数据库</h4> <p>一般调用云数据库的操作都写在云函数内，其实小程序端也可以对数据库进行操作。</p> <p>小程序端一次最多只能查询20条数据，云函数端最多可查询100条数据，可使用多次查询拼接的方式突破限制。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 小程序端调用云数据库示例</span>
    790. 

  790.     <span class="token keyword">const</span> db <span class="token operator">=</span> wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 初始化数据库</span>
    791. 

  791.     db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'blog'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string">'createTime'</span><span class="token punctuation">,</span><span class="token string">'deac'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    792. 

  792.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    793. 

  793.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    794. 

  794. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="云数据库权限管理-2"><a href="#云数据库权限管理-2" class="header-anchor">#</a> 云数据库权限管理</h4> <p><strong>注意：云控制台和服务端（云函数）始终有所有数据读写权限，</strong></p> <p><strong>但权限的管理仅对小程序端发起的请求有效。</strong></p> <ul><li><p>仅创建者可写，所有人可读 （适合于文章）</p></li> <li><p>仅创建者可读写 (适用于私密内容)</p></li> <li><p>仅管理端可写，所有人可读（适用于商品信息）</p></li> <li><p>仅管理端可读写（适用于后台敏感数据）</p></li></ul> <h4 id="数据库中1对n关系的三种设计方式"><a href="#数据库中1对n关系的三种设计方式" class="header-anchor">#</a> 数据库中1对N关系的三种设计方式</h4> <h5 id="第一种-n的数量较少-几十个以内"><a href="#第一种-n的数量较少-几十个以内" class="header-anchor">#</a> 第一种：N的数量较少 几十个以内</h5> <p><strong>1 条记录存储 N 个子数据</strong></p> <p>​	如一条博客中，最多有9张图片，这9张图片可和其他数据放在一个记录中。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">[</span>
    795. 

  795. 	<span class="token punctuation">{</span>
    796. 

  796. 		<span class="token literal-property property">id</span><span class="token operator">:</span><span class="token operator">...</span>
    797. 

  797. 		<span class="token literal-property property">img</span><span class="token operator">:</span><span class="token punctuation">[</span>
    798. 

  798. 		<span class="token string">'...'</span><span class="token punctuation">,</span> <span class="token string">'...'</span><span class="token punctuation">,</span> <span class="token string">'...'</span><span class="token punctuation">,</span> <span class="token string">'...'</span><span class="token punctuation">,</span> <span class="token string">'...'</span><span class="token punctuation">,</span> <span class="token string">'...'</span><span class="token punctuation">,</span> <span class="token string">'...'</span><span class="token punctuation">,</span> <span class="token string">'...'</span><span class="token punctuation">,</span> <span class="token string">'...'</span>
    799. 

  799. 		<span class="token punctuation">]</span>
    800. 

  800. 	<span class="token punctuation">}</span>
    801. 

  801. <span class="token punctuation">]</span>
    802. 

  802. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h5 id="第二种-n的数量较多-几十到几百个"><a href="#第二种-n的数量较多-几十到几百个" class="header-anchor">#</a> 第二种：N的数量较多  几十到几百个</h5> <p><strong>1 存储 每个N的 id</strong></p> <p>可分两个数据库集合，</p> <p>一个为 '目录' 集合，存放 '详情' 集合下的每条数据的 id 目录</p> <p>一个为 '详情' 集合，每条数据对应一个单独的 id 和 详细数据</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>目录集合：
    803. 

  803. <span class="token punctuation">[</span>
    804. 

  804. 	<span class="token punctuation">{</span>
    805. 

  805. 		<span class="token string-property property">'id'</span><span class="token operator">:</span><span class="token string">&quot;11&quot;</span><span class="token punctuation">,</span>
    806. 

  806. 		<span class="token string-property property">'name'</span><span class="token operator">:</span> <span class="token string">'产品1'</span><span class="token punctuation">,</span>
    807. 

  807. 		<span class="token string-property property">'xqs'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'111'</span><span class="token punctuation">,</span><span class="token string">'222'</span><span class="token punctuation">,</span><span class="token string">'333'</span><span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">]</span>  <span class="token comment">// 存放 详情集合 中的每条数据 id</span>
    808. 

  808. 	<span class="token punctuation">}</span>
    809. 

  809. <span class="token punctuation">]</span>
    810. 

  810. 

  811. 

  812. 

  813. 详情集合：
    814. 

  814. <span class="token punctuation">[</span>
    815. 

  815. <span class="token punctuation">{</span><span class="token string-property property">'id'</span><span class="token operator">:</span><span class="token string">&quot;111&quot;</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'零件1'</span><span class="token punctuation">,</span><span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'...'</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    816. 

  816. <span class="token punctuation">{</span><span class="token string-property property">'id'</span><span class="token operator">:</span><span class="token string">&quot;222&quot;</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'零件2'</span><span class="token punctuation">,</span><span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'...'</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    817. 

  817. <span class="token punctuation">{</span><span class="token string-property property">'id'</span><span class="token operator">:</span><span class="token string">&quot;333&quot;</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'零件3'</span><span class="token punctuation">,</span><span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'...'</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    818. 

  818. <span class="token operator">...</span>
    819. 

  819. <span class="token punctuation">]</span>
    820. 

  820. 

  821. 

  822. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>如歌单列表，与歌曲详情的数据组合设计。</p> <h5 id="第三种-n的数量巨大-几百成千上万个"><a href="#第三种-n的数量巨大-几百成千上万个" class="header-anchor">#</a> 第三种：N的数量巨大  几百成千上万个</h5> <p><strong>每个 N 都存储 1 的 id</strong></p> <p>如新浪博客中的一条博客下面有几千条评论</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>一条新浪博客：
    823. 

  823. <span class="token punctuation">[</span><span class="token punctuation">{</span>
    824. 

  824. 	<span class="token string-property property">'id'</span><span class="token operator">:</span><span class="token string">'11'</span><span class="token punctuation">,</span>
    825. 

  825. 	<span class="token string-property property">'content'</span><span class="token operator">:</span><span class="token string">'博客内容'</span>
    826. 

  826. 	<span class="token operator">...</span>
    827. 

  827. <span class="token punctuation">}</span><span class="token punctuation">]</span>
    828. 

  828. 

  829. 

  830. 上千条评价：
    831. 

  831. <span class="token punctuation">[</span>
    832. 

  832. <span class="token punctuation">{</span>
    833. 

  833. 	<span class="token string-property property">'id'</span><span class="token operator">:</span><span class="token string">'111111'</span>
    834. 

  834. 	<span class="token string-property property">'blogId'</span><span class="token operator">:</span><span class="token string">'11'</span><span class="token punctuation">,</span> <span class="token comment">// 这个id对应的是那一条博客的id</span>
    835. 

  835. 	<span class="token string-property property">'content'</span><span class="token operator">:</span> <span class="token string">'评价内容1'</span>
    836. 

  836. <span class="token punctuation">}</span><span class="token punctuation">,</span>
    837. 

  837. <span class="token punctuation">{</span>
    838. 

  838. 	<span class="token string-property property">'id'</span><span class="token operator">:</span><span class="token string">'222222'</span>
    839. 

  839. 	<span class="token string-property property">'blogId'</span><span class="token operator">:</span><span class="token string">'11'</span><span class="token punctuation">,</span> <span class="token comment">// 这个id对应的是那一条博客的id</span>
    840. 

  840. 	<span class="token string-property property">'content'</span><span class="token operator">:</span> <span class="token string">'评价内容2'</span>
    841. 

  841. <span class="token punctuation">}</span><span class="token punctuation">,</span>
    842. 

  842. <span class="token punctuation">{</span>
    843. 

  843. 	<span class="token string-property property">'id'</span><span class="token operator">:</span><span class="token string">'33333'</span>
    844. 

  844. 	<span class="token string-property property">'blogId'</span><span class="token operator">:</span><span class="token string">'11'</span><span class="token punctuation">,</span> <span class="token comment">// 这个id对应的是那一条博客的id</span>
    845. 

  845. 	<span class="token string-property property">'content'</span><span class="token operator">:</span> <span class="token string">'评价内容3'</span>
    846. 

  846. <span class="token punctuation">}</span><span class="token punctuation">,</span>
    847. 

  847. <span class="token operator">...</span>
    848. 

  848. <span class="token punctuation">]</span>
    849. 

  849. 

  850. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h4 id="云调用"><a href="#云调用" class="header-anchor">#</a> 云调用</h4> <p>通过云函数调用服务端的开发接口</p> <p>这些接口如：模板消息推送、生成小程序码...</p> <h4 id="模板消息推送"><a href="#模板消息推送" class="header-anchor">#</a> 模板消息推送</h4> <p><strong>1、使用from表单才能触发消息推送，并设置report-submit=&quot;true&quot;</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>
    851. 

  851. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>modal-content<span class="token punctuation">&quot;</span></span> <span class="token attr-name">report-submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    852. 

  852.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comment-content<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>写评论<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{content}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fixed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
    853. 

  853.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>send<span class="token punctuation">&quot;</span></span> <span class="token attr-name">form-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>发送<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    854. 

  854.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
    855. 

  855. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>2、需要到微信公众平台做相应的设置：</strong></p> <p>微信公众平台 &gt;  功能 &gt; 模板消息 &gt; 添加模板 &gt; 选择相应的模板&gt; 添加成功后会有一个模板ID</p> <p><strong>3、新建一个云函数，用于云调用。在该云函数下新建配置文件：config.json ，用于配置权限</strong></p> <p>config.json ：</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
    856. 

  856.   <span class="token property">&quot;permissions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    857. 

  857.     <span class="token property">&quot;openapi&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    858. 

  858.       <span class="token string">&quot;templateMessage.send&quot;</span>
    859. 

  859.     <span class="token punctuation">]</span>
    860. 

  860.   <span class="token punctuation">}</span>
    861. 

  861. <span class="token punctuation">}</span>
    862. 

  862. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>云函数设置消息推送：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 云函数入口函数</span>
    863. 

  863. exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    864. 

  864.   <span class="token comment">// 获取openid</span>
    865. 

  865.   <span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token constant">OPENID</span> <span class="token punctuation">}</span> <span class="token operator">=</span> cloud<span class="token punctuation">.</span><span class="token function">getWXContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    866. 

  866. 

  867.   <span class="token comment">// 模板推送消息</span>
    868. 

  868.   <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> cloud<span class="token punctuation">.</span>openapi<span class="token punctuation">.</span>templateMessage<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    869. 

  869.     <span class="token literal-property property">touser</span><span class="token operator">:</span> <span class="token constant">OPENID</span><span class="token punctuation">,</span>
    870. 

  870.     <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/pages/blog-comment/blog-comment?blogId=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>event<span class="token punctuation">.</span>blogId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token comment">// 用户点击推送消息打开的页面</span>
    871. 

  871.     <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 模板的内容，keyword为在公众平台设置模板时对应的字段</span>
    872. 

  872.       <span class="token literal-property property">keyword1</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 评价内容</span>
    873. 

  873.         <span class="token literal-property property">value</span><span class="token operator">:</span> event<span class="token punctuation">.</span>context
    874. 

  874.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    875. 

  875.       <span class="token literal-property property">keyword2</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 评价时间</span>
    876. 

  876.         <span class="token literal-property property">value</span><span class="token operator">:</span> event<span class="token punctuation">.</span>time
    877. 

  877.       <span class="token punctuation">}</span>
    878. 

  878.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    879. 

  879.     <span class="token literal-property property">templateId</span><span class="token operator">:</span> <span class="token string">'LNwKMcYwlz-0HabgBhmZi6CWZrlNSBiNJ2h0SMorcxQ'</span><span class="token punctuation">,</span> <span class="token comment">// 模板id，到公众平台模板消息上获取</span>
    880. 

  880.     <span class="token literal-property property">formId</span><span class="token operator">:</span> event<span class="token punctuation">.</span>formId <span class="token comment">// 触发消息推送的form表单的id</span>
    881. 

  881.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    882. 

  882. 

  883.   <span class="token keyword">return</span> result
    884. 

  884. <span class="token punctuation">}</span>
    885. 

  885. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p><strong>4、在提交表单事件完成后调用消息推送云函数</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    886. 

  886.           <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'sendMessage'</span><span class="token punctuation">,</span>
    887. 

  887.           <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    888. 

  888.             content<span class="token punctuation">,</span>
    889. 

  889.             formId<span class="token punctuation">,</span>
    890. 

  890.             <span class="token literal-property property">blogId</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>properties<span class="token punctuation">.</span>blogId
    891. 

  891.           <span class="token punctuation">}</span>
    892. 

  892.         <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    893. 

  893.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    894. 

  894.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    895. 

  895. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="云函数多集合查询数据库"><a href="#云函数多集合查询数据库" class="header-anchor">#</a> 云函数多集合查询数据库</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 博客详情(博客内容、评论)</span>
    896. 

  896.   app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token string">'blogDetail'</span><span class="token punctuation">,</span> <span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    897. 

  897.     <span class="token keyword">let</span> blogId <span class="token operator">=</span> event<span class="token punctuation">.</span>blogId
    898. 

  898. 

  899.     <span class="token comment">// 博客内容</span>
    900. 

  900.     <span class="token keyword">let</span> detail <span class="token operator">=</span> <span class="token keyword">await</span> blogCollection<span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    901. 

  901.       <span class="token literal-property property">_id</span><span class="token operator">:</span> blogId
    902. 

  902.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    903. 

  903.       <span class="token keyword">return</span> res<span class="token punctuation">.</span>data
    904. 

  904.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    905. 

  905. 

  906.     <span class="token comment">// 评论查询</span>
    907. 

  907.     <span class="token keyword">const</span> countResult <span class="token operator">=</span> <span class="token keyword">await</span> blogCollection<span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    908. 

  908.     <span class="token keyword">const</span> total <span class="token operator">=</span> countResult<span class="token punctuation">.</span>total
    909. 

  909.     <span class="token keyword">let</span> commentList <span class="token operator">=</span> <span class="token punctuation">{</span>
    910. 

  910.       <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    911. 

  911.     <span class="token punctuation">}</span>
    912. 

  912.     <span class="token keyword">if</span> <span class="token punctuation">(</span>total <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    913. 

  913.       <span class="token comment">// 突破100条限制</span>
    914. 

  914.       <span class="token keyword">const</span> batchTimes <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>total <span class="token operator">/</span> <span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span>
    915. 

  915.       <span class="token keyword">const</span> tasks <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    916. 

  916.       <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> batchTimes<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    917. 

  917.         <span class="token keyword">let</span> promise <span class="token operator">=</span> db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'blog-comment'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">skip</span><span class="token punctuation">(</span>i <span class="token operator">*</span> <span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span>
    918. 

  918.           <span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span><span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    919. 

  919.             blogId
    920. 

  920.           <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string">'createTime'</span><span class="token punctuation">,</span> <span class="token string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    921. 

  921.         tasks<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>promise<span class="token punctuation">)</span>
    922. 

  922.       <span class="token punctuation">}</span>
    923. 

  923.       <span class="token keyword">if</span> <span class="token punctuation">(</span>tasks<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    924. 

  924.         commentList <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>tasks<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> cur</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    925. 

  925.           <span class="token keyword">return</span> <span class="token punctuation">{</span>
    926. 

  926.             <span class="token literal-property property">data</span><span class="token operator">:</span> acc<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>cur<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
    927. 

  927.           <span class="token punctuation">}</span>
    928. 

  928.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    929. 

  929.       <span class="token punctuation">}</span>
    930. 

  930. 

  931.     <span class="token punctuation">}</span>
    932. 

  932.     ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token punctuation">{</span>
    933. 

  933.       detail<span class="token punctuation">,</span>
    934. 

  934.       commentList
    935. 

  935.     <span class="token punctuation">}</span>
    936. 

  936.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    937. 

  937. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><h4 id="分享功能"><a href="#分享功能" class="header-anchor">#</a> 分享功能</h4> <p>分享功能需要button标签，设置open-type=&quot;share&quot;</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>
    938. 

  938. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>share<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-blogid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{blogId}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-blog</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{blog}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>share-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hover-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>share-hover<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    939. 

  939.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont icon-fenxiang icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
    940. 

  940.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>分享<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
    941. 

  941.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    942. 

  942. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>在js中有onShareAppMessage方法，点击button会自动执行此方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function-variable function">onShareAppMessage</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    943. 

  943.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span>
    944. 

  944. 

  945.     <span class="token comment">// 对分享卡片的设置</span>
    946. 

  946.     <span class="token keyword">let</span> blogObj <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>blog
    947. 

  947.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    948. 

  948.       <span class="token literal-property property">title</span><span class="token operator">:</span> blogObj<span class="token punctuation">.</span>content<span class="token punctuation">,</span>
    949. 

  949.       <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/pages/blog-comment/blog-comment?blogId=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>blogObj<span class="token punctuation">.</span>_id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
    950. 

  950.       <span class="token comment">// imageUrl: '' // 自定义图片，不支持云存储的图片</span>
    951. 

  951.     <span class="token punctuation">}</span>
    952. 

  952.   <span class="token punctuation">}</span>
    953. 

  953. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="不同场景获取用户信息的方式"><a href="#不同场景获取用户信息的方式" class="header-anchor">#</a> 不同场景获取用户信息的方式</h4> <h5 id="场景一-只想在界面上显示自己的昵称和头像"><a href="#场景一-只想在界面上显示自己的昵称和头像" class="header-anchor">#</a> 场景一：只想在界面上显示自己的昵称和头像</h5> <p>以组件的方式：根据type类型获取不同用户数据</p> <p><strong>该方式不需要授权，只能用于在wxml显示自己的信息</strong></p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html" target="_blank" rel="noopener noreferrer">open-data<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>open-data</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userAvatarUrl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>open-data</span><span class="token punctuation">&gt;</span></span>
    954. 

  954. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>open-data</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userNickName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>open-data</span><span class="token punctuation">&gt;</span></span>
    955. 

  955. ...
    956. 

  956. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h5 id="场景二-在js中获取用户信息"><a href="#场景二-在js中获取用户信息" class="header-anchor">#</a> 场景二：在JS中获取用户信息</h5> <p>该方式要在用户授权以后才能获取用户信息</p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html" target="_blank" rel="noopener noreferrer">wx.getUserInfo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>wx<span class="token punctuation">.</span><span class="token function">getUserInfo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    957. 

  957.       <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    958. 

  958.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    959. 

  959.       <span class="token punctuation">}</span>
    960. 

  960.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    961. 

  961. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>在未授权的情况下需要用户先授权：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 判断用户是否授权</span>
    962. 

  962.       wx<span class="token punctuation">.</span><span class="token function">getSetting</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    963. 

  963.         <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 这里使用箭头函数可改变内部this指向为外部的this</span>
    964. 

  964.           <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>authSetting<span class="token punctuation">[</span><span class="token string">'scope.userInfo'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 已授权</span>
    965. 

  965.             wx<span class="token punctuation">.</span><span class="token function">getUserInfo</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 获取用户信息</span>
    966. 

  966.               <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 这里使用箭头函数可改变内部this指向为外部的this</span>
    967. 

  967. 

  968.                 app<span class="token punctuation">.</span><span class="token function">setGlobalData</span><span class="token punctuation">(</span><span class="token string">'userInfo'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>userInfo<span class="token punctuation">)</span> <span class="token comment">// 设置app全局属性</span>
    969. 

  969. 

  970.                 <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onLoginSuccess</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    971. 

  971.                   <span class="token literal-property property">detail</span><span class="token operator">:</span> res<span class="token punctuation">.</span>userInfo
    972. 

  972.                 <span class="token punctuation">}</span><span class="token punctuation">)</span>
    973. 

  973.               <span class="token punctuation">}</span>
    974. 

  974.             <span class="token punctuation">}</span><span class="token punctuation">)</span>
    975. 

  975.           <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 未授权</span>
    976. 

  976.             <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 打开弹出层，显示获取用户信息按钮</span>
    977. 

  977.               <span class="token literal-property property">modalShow</span><span class="token operator">:</span> <span class="token boolean">true</span>
    978. 

  978.             <span class="token punctuation">}</span><span class="token punctuation">)</span>
    979. 

  979.           <span class="token punctuation">}</span>
    980. 

  980.         <span class="token punctuation">}</span>
    981. 

  981.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    982. 

  982. 

  983. 

  984.   授权按钮
    985. 

  985.  <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;login&quot;</span> open<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;getUserInfo&quot;</span> bindgetuserinfo<span class="token operator">=</span><span class="token string">&quot;onGetUserInfo&quot;</span><span class="token operator">&gt;</span>获取微信授权信息<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    986. 

  986. 

  987. 

  988.     <span class="token function">onGetUserInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 获取用户信息</span>
    989. 

  989.       <span class="token keyword">const</span> userInfo <span class="token operator">=</span> event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>userInfo
    990. 

  990.       <span class="token keyword">if</span> <span class="token punctuation">(</span>userInfo<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 用户允许授权</span>
    991. 

  991.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    992. 

  992.           <span class="token literal-property property">modalShow</span><span class="token operator">:</span> <span class="token boolean">false</span>
    993. 

  993.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    994. 

  994.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">'loginSuccess'</span><span class="token punctuation">,</span> userInfo<span class="token punctuation">)</span> <span class="token comment">// 给父组件传用户数据</span>
    995. 

  995.       <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 用户拒绝授权</span>
    996. 

  996.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">'loginFail'</span><span class="token punctuation">)</span>
    997. 

  997.       <span class="token punctuation">}</span>
    998. 

  998.     <span class="token punctuation">}</span>
    999. 

  999. 

  1000. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><blockquote><p>注意：上面这种方式没有获取到openId</p></blockquote> <h5 id="场景三-获取openid"><a href="#场景三-获取openid" class="header-anchor">#</a> 场景三：获取openId</h5> <p><strong>获取openId不需要用户授权</strong></p> <p>1、传统开发方式获取openId，后台服务器由自己开发，没使用云开发</p> <p>小程序端                 微信服务器            后端服务器</p> <p>步骤：</p> <p>小程序端 调用 wx.login 向微信服务器 获取code</p> <p>小程序端 调用 wx.request 将 code 传递给 后端服务器</p> <p>后端服务器 使用code 向微信服务器 换取openid和session_key</p> <p>后端服务器 将openid 发送给 小程序端</p> <p>2、云开发方式获取openId</p> <p>云函数login中</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）</span>
    1001. 

  1001.   <span class="token keyword">const</span> wxContext <span class="token operator">=</span> cloud<span class="token punctuation">.</span><span class="token function">getWXContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1002. 

  1002. 

  1003.   <span class="token keyword">return</span> <span class="token punctuation">{</span>
    1004. 

  1004.     event<span class="token punctuation">,</span>
    1005. 

  1005.     <span class="token literal-property property">openid</span><span class="token operator">:</span> wxContext<span class="token punctuation">.</span><span class="token constant">OPENID</span><span class="token punctuation">,</span>
    1006. 

  1006.     <span class="token literal-property property">appid</span><span class="token operator">:</span> wxContext<span class="token punctuation">.</span><span class="token constant">APPID</span><span class="token punctuation">,</span>
    1007. 

  1007.     <span class="token literal-property property">unionid</span><span class="token operator">:</span> wxContext<span class="token punctuation">.</span><span class="token constant">UNIONID</span><span class="token punctuation">,</span>
    1008. 

  1008.   <span class="token punctuation">}</span>
    1009. 

  1009. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>普通按钮
    1010. 

  1010. <span class="token operator">&lt;</span>button bindtap<span class="token operator">=</span><span class="token string">&quot;getOpenid&quot;</span><span class="token operator">&gt;</span>获取openid<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    1011. 

  1011. 

  1012. <span class="token function">getOpenid</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1013. 

  1013. 	wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1014. 

  1014. 		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'login'</span>
    1015. 

  1015. 	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1016. 

  1016. 		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    1017. 

  1017. 	<span class="token punctuation">}</span><span class="token punctuation">)</span>
    1018. 

  1018. <span class="token punctuation">}</span>
    1019. 

  1019. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><blockquote><p>openid 在小程序和公众号下是不一样的</p> <p>unionid 在小程序和公众号下都是一样的</p></blockquote> <h2 id="《我的》页面"><a href="#《我的》页面" class="header-anchor">#</a> 《我的》页面</h2> <p>json文件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token string-property property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;我的&quot;</span><span class="token punctuation">,</span>
    1020. 

  1020.   <span class="token string-property property">&quot;disableScroll&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>  <span class="token comment">// 使页面无法滚动</span>
    1021. 

  1021. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="导航页面链接跳转"><a href="#导航页面链接跳转" class="header-anchor">#</a> 导航页面链接跳转</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html" target="_blank" rel="noopener noreferrer">navigator<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="背景图片"><a href="#背景图片" class="header-anchor">#</a> 背景图片</h4> <p>wxss背景图片不支持本地相对路径的图片，只支持网络图片和base64图片</p> <p>建议使用base64图片，图片文件最好不要太大。</p> <h4 id="每个页面都有的page标签"><a href="#每个页面都有的page标签" class="header-anchor">#</a> 每个页面都有的page标签</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>page <span class="token punctuation">{</span>
    1022. 

  1022.   background<span class="token operator">-</span>color<span class="token operator">:</span> #f1f1f1<span class="token punctuation">;</span>
    1023. 

  1023. <span class="token punctuation">}</span>
    1024. 

  1024. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="播放历史与本地存储"><a href="#播放历史与本地存储" class="header-anchor">#</a> 播放历史与本地存储</h4> <p>方案一：播放历史存储在数据库当中，这样在不同设备访问都可查看播放历史。读取速度相对较慢</p> <p>方案二：播放历史存储在本地，仅当前设备可查看播放历史。读取速度较快</p> <p>本项目采用本地存储：</p> <p>使用openid作为本地存储的key，播放历史存入value</p> <p>在app.js中获取openid，即打开小程序就获取openid。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// app.js</span>
    1025. 

  1025. <span class="token function-variable function">onLaunch</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1026. 

  1026. 	<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getOpenid</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取openid并存储</span>
    1027. 

  1027. <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1028. 

  1028. <span class="token function">getOpenid</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 获取openid并存储</span>
    1029. 

  1029.     wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1030. 

  1030.       <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'login'</span>
    1031. 

  1031.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1032. 

  1032.       <span class="token keyword">const</span> openid <span class="token operator">=</span> res<span class="token punctuation">.</span>result<span class="token punctuation">.</span>openid
    1033. 

  1033.       <span class="token keyword">this</span><span class="token punctuation">.</span>globalData<span class="token punctuation">.</span>openid <span class="token operator">=</span> openid <span class="token comment">// 保存到全局变量</span>
    1034. 

  1034.       <span class="token keyword">if</span> <span class="token punctuation">(</span>wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span>openid<span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 该用户从未打开过小程序，未存储过openid在本地</span>
    1035. 

  1035.         wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span>openid<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 存储openid到本地</span>
    1036. 

  1036.       <span class="token punctuation">}</span>
    1037. 

  1037.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1038. 

  1038.   <span class="token punctuation">}</span>
    1039. 

  1039. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>歌曲播放时</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 保存播放历史到本地存储</span>
    1040. 

  1040.   <span class="token function">savePlayHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1041. 

  1041.     <span class="token keyword">const</span> currentSong <span class="token operator">=</span> musiclist<span class="token punctuation">[</span>nowPlayingIndex<span class="token punctuation">]</span> <span class="token comment">// 当前播放歌曲</span>
    1042. 

  1042.     <span class="token keyword">const</span> openid <span class="token operator">=</span> app<span class="token punctuation">.</span>globalData<span class="token punctuation">.</span>openid <span class="token comment">// 从全局属性获取openid</span>
    1043. 

  1043.     <span class="token keyword">const</span> playHistory <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span>openid<span class="token punctuation">)</span> <span class="token comment">// 从本地存储获取播放历史数组</span>
    1044. 

  1044. 

  1045.     <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> playHistory<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1046. 

  1046.       <span class="token keyword">if</span> <span class="token punctuation">(</span>playHistory<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id <span class="token operator">===</span> currentSong<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 当前播放歌曲已存在播放历史中</span>
    1047. 

  1047.         playHistory<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 删除原纪录</span>
    1048. 

  1048.         <span class="token keyword">break</span>
    1049. 

  1049.       <span class="token punctuation">}</span>
    1050. 

  1050.     <span class="token punctuation">}</span>
    1051. 

  1051. 

  1052.     playHistory<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>currentSong<span class="token punctuation">)</span> <span class="token comment">// 在数组开头插入</span>
    1053. 

  1053.     wx<span class="token punctuation">.</span><span class="token function">setStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 存入本地</span>
    1054. 

  1054.       <span class="token literal-property property">key</span><span class="token operator">:</span> openid<span class="token punctuation">,</span>
    1055. 

  1055.       <span class="token literal-property property">data</span><span class="token operator">:</span> playHistory
    1056. 

  1056.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1057. 

  1057. 

  1058.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1059. 

  1059. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>播放历史页面获取</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function-variable function">onLoad</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1060. 

  1060. 

  1061.     <span class="token keyword">const</span> openid <span class="token operator">=</span> app<span class="token punctuation">.</span>globalData<span class="token punctuation">.</span>openid <span class="token comment">//从全局属性获取openid</span>
    1062. 

  1062.     <span class="token keyword">const</span> playHistory <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span>openid<span class="token punctuation">)</span> <span class="token comment">// 读取本地播放历史数据</span>
    1063. 

  1063. 

  1064.     <span class="token keyword">if</span> <span class="token punctuation">(</span>playHistory<span class="token punctuation">.</span>length <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 有播放历史</span>
    1065. 

  1065.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1066. 

  1066.         playHistory
    1067. 

  1067.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1068. 

  1068.       wx<span class="token punctuation">.</span><span class="token function">setStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// storage里把musiclist（播放列表）的内容换成播放历史的列表</span>
    1069. 

  1069.         <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'musiclist'</span><span class="token punctuation">,</span>
    1070. 

  1070.         <span class="token literal-property property">data</span><span class="token operator">:</span> playHistory<span class="token punctuation">,</span>
    1071. 

  1071.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1072. 

  1072.     <span class="token punctuation">}</span>
    1073. 

  1073. 

  1074.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1075. 

  1075. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h4 id="我的发现"><a href="#我的发现" class="header-anchor">#</a> 我的发现</h4> <p>代码分别演示了从云函数和小程序端获取数据，从小程序端获取数据享有<strong>权限管理</strong>的能力，不需要传openid。</p> <h4 id="小程序码"><a href="#小程序码" class="header-anchor">#</a> 小程序码</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html" target="_blank" rel="noopener noreferrer">获取小程序码<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>本项目演示使用<a href="https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html" target="_blank" rel="noopener noreferrer">接口 B：适用于需要的码数量极多的业务场景<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <code>云调用</code> 的方式。</p> <p>步骤：</p> <ul><li><p>创建云函数 gteQRCode</p></li> <li><p>gteQRCode云函数下创建config.json配置权限，代码如下：</p></li></ul> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
    1076. 

  1076.   <span class="token property">&quot;permissions&quot;</span><span class="token operator">:</span><span class="token punctuation">{</span>
    1077. 

  1077.     <span class="token property">&quot;openapi&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span>
    1078. 

  1078.       <span class="token string">&quot;wxacode.getUnlimited&quot;</span>
    1079. 

  1079.     <span class="token punctuation">]</span>
    1080. 

  1080.   <span class="token punctuation">}</span>
    1081. 

  1081. <span class="token punctuation">}</span>
    1082. 

  1082. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 云函数入口函数</span>
    1083. 

  1083. exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1084. 

  1084.   <span class="token keyword">const</span> wxContext <span class="token operator">=</span> cloud<span class="token punctuation">.</span><span class="token function">getWXContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1085. 

  1085. 

  1086.   <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> cloud<span class="token punctuation">.</span>openapi<span class="token punctuation">.</span>wxacode<span class="token punctuation">.</span><span class="token function">getUnlimited</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1087. 

  1087.     <span class="token literal-property property">scene</span><span class="token operator">:</span> wxContext<span class="token punctuation">.</span><span class="token constant">OPENID</span><span class="token punctuation">,</span> <span class="token comment">// 链接参数 不一定传openid，可传其他任意数据，然后通过此数据，在别人扫码进入时就可用于判断</span>
    1088. 

  1088.     <span class="token comment">// page: &quot;pages/blog/blog&quot; // 默认进入主页</span>
    1089. 

  1089.     <span class="token comment">// lineColor: { // 线条颜色</span>
    1090. 

  1090.     <span class="token comment">//   'r': 211,</span>
    1091. 

  1091.     <span class="token comment">//   'g': 60,</span>
    1092. 

  1092.     <span class="token comment">//   'b': 57</span>
    1093. 

  1093.     <span class="token comment">// },</span>
    1094. 

  1094.     <span class="token comment">// isHyaline: true // 是否透明</span>
    1095. 

  1095.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1096. 

  1096. 

  1097.   <span class="token comment">// result为二进制数据, 先上传到云存储</span>
    1098. 

  1098. 

  1099.   <span class="token comment">// 上传云存储</span>
    1100. 

  1100.   <span class="token keyword">const</span> upload <span class="token operator">=</span> <span class="token keyword">await</span> cloud<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1101. 

  1101.     <span class="token literal-property property">cloudPath</span><span class="token operator">:</span> <span class="token string">'qrcode/qrcode'</span> <span class="token operator">+</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.png'</span><span class="token punctuation">,</span>
    1102. 

  1102.     <span class="token literal-property property">fileContent</span><span class="token operator">:</span> result<span class="token punctuation">.</span>buffer
    1103. 

  1103.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1104. 

  1104. 

  1105.   <span class="token keyword">return</span> upload<span class="token punctuation">.</span>fileID
    1106. 

  1106. <span class="token punctuation">}</span>
    1107. 

  1107. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h5 id="判断是从扫码小程序码进入-以及参数获取"><a href="#判断是从扫码小程序码进入-以及参数获取" class="header-anchor">#</a> 判断是从扫码小程序码进入，以及参数获取</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 在从小程序码进入的页面js，onLoad方法中，</span>
    1108. 

  1108. 

  1109. <span class="token function-variable function">onLoad</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1110. 

  1110. 	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>scene<span class="token punctuation">)</span> <span class="token comment">// 获取到小程序码进入的参数</span>
    1111. 

  1111. <span class="token punctuation">}</span>
    1112. 

  1112. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="版本更新检测"><a href="#版本更新检测" class="header-anchor">#</a> 版本更新检测</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// app.js</span>
    1113. 

  1113. <span class="token function-variable function">onLaunch</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1114. 

  1114.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkUpate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1115. 

  1115. <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1116. 

  1116. <span class="token function">checkUpate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1117. 

  1117.     <span class="token keyword">const</span> updateManager <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getUpdateManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1118. 

  1118.     <span class="token comment">// 检测版本更新</span>
    1119. 

  1119.     updateManager<span class="token punctuation">.</span><span class="token function">onCheckForUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    1120. 

  1120.       <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>hasUpdate<span class="token punctuation">)</span><span class="token punctuation">{</span>
    1121. 

  1121.         updateManager<span class="token punctuation">.</span><span class="token function">onUpdateReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    1122. 

  1122.           wx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1123. 

  1123.             <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'更新提示'</span><span class="token punctuation">,</span>
    1124. 

  1124.             <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'新版本已经准备好，是否重启应用'</span><span class="token punctuation">,</span>
    1125. 

  1125.             <span class="token function">success</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1126. 

  1126.               <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>confirm<span class="token punctuation">)</span><span class="token punctuation">{</span>
    1127. 

  1127.                 updateManager<span class="token punctuation">.</span><span class="token function">applyUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1128. 

  1128.               <span class="token punctuation">}</span>
    1129. 

  1129.             <span class="token punctuation">}</span>
    1130. 

  1130.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1131. 

  1131.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1132. 

  1132.       <span class="token punctuation">}</span>
    1133. 

  1133.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1134. 

  1134.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1135. 

  1135. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h3> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html" target="_blank" rel="noopener noreferrer">官网文档优化建议<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>使用开发者工具的调试器，Audits进行评分，然后根据提示针对项目进行优化。</p> <h3 id="场景值scene的作用与应用场景"><a href="#场景值scene的作用与应用场景" class="header-anchor">#</a> 场景值scene的作用与应用场景</h3> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html" target="_blank" rel="noopener noreferrer">场景值<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>场景值用来描述用户进入小程序的路径。完整场景值的含义请查看<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html" target="_blank" rel="noopener noreferrer">场景值列表<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>可根据不同场景进入实现不同业务处理，比如一个点餐小程序，店家内贴了小程序码，用户通过扫码进入，可立即进入点餐页面，等等</p> <p>在app.js中的onLaunch(options) 、onShow(options)，options包含scene场景值</p> <p><strong>开发者工具中，切后台，可模拟进入场景。</strong></p> <h3 id="小程序的-seo-页面收录sitemap"><a href="#小程序的-seo-页面收录sitemap" class="header-anchor">#</a> 小程序的&quot;SEO&quot;---页面收录sitemap</h3> <p>在app.js的同级目录下有sitemap.json文件，用于配置收录规则</p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html" target="_blank" rel="noopener noreferrer">stiemap配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>作用：</p> <p>使小程序搜索可根据小程序的内容进行搜索到</p> <p>使用方法：</p> <p>1、在微信公众平台，小程序信息 &gt; 页面收录设置 &gt; 打开 (默认是已开启)</p> <p>2、打开sitemap.json文件，配置收录规则</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
    1136. 

  1136.   <span class="token property">&quot;desc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html&quot;</span><span class="token punctuation">,</span>
    1137. 

  1137.   <span class="token property">&quot;rules&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token comment">// 收录规则</span>
    1138. 

  1138.   <span class="token property">&quot;action&quot;</span><span class="token operator">:</span> <span class="token string">&quot;allow&quot;</span><span class="token punctuation">,</span><span class="token comment">// 是否被收录，allow允许被收录，disallow不允许</span>
    1139. 

  1139.   <span class="token property">&quot;page&quot;</span><span class="token operator">:</span> <span class="token string">&quot;*&quot;</span> <span class="token comment">// *星号表示所有页面都被收录</span>
    1140. 

  1140.   <span class="token punctuation">}</span><span class="token punctuation">]</span>
    1141. 

  1141. <span class="token punctuation">}</span>
    1142. 

  1142. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
    1143. 

  1143.   <span class="token property">&quot;desc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html&quot;</span><span class="token punctuation">,</span>
    1144. 

  1144.   <span class="token property">&quot;rules&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token comment">// 收录规则，可添加多条</span>
    1145. 

  1145.   <span class="token property">&quot;action&quot;</span><span class="token operator">:</span> <span class="token string">&quot;allow&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 是否被收录</span>
    1146. 

  1146.   <span class="token property">&quot;page&quot;</span><span class="token operator">:</span><span class="token string">&quot;pages/player/player&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// 页面</span>
    1147. 

  1147.   <span class="token property">&quot;params&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;musicId&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;index&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 链接的动态参数</span>
    1148. 

  1148.    <span class="token property">&quot;matching&quot;</span><span class="token operator">:</span>'exact' <span class="token comment">// 表示params的参数是否要准确的匹配</span>
    1149. 

  1149.   <span class="token punctuation">}</span>，<span class="token punctuation">{</span>
    1150. 

  1150.   <span class="token property">&quot;action&quot;</span><span class="token operator">:</span> <span class="token string">&quot;disallow&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 是否被收录</span>
    1151. 

  1151.   <span class="token property">&quot;page&quot;</span><span class="token operator">:</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">,</span>  /
    1152. 

  1152.   <span class="token punctuation">}</span><span class="token punctuation">]</span>
    1153. 

  1153. <span class="token punctuation">}</span>
    1154. 

  1154. 

  1155. <span class="token comment">// 上面配置规则表示除了player页面被收录外，其他页面不被收录</span>
    1156. 

  1156. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="小程序上线审核流程"><a href="#小程序上线审核流程" class="header-anchor">#</a> 小程序上线审核流程</h3> <p>微信公众平台，版本管理&gt;把小程序上传为体验版》提交审核》上线</p> <h2 id="后台管理系统"><a href="#后台管理系统" class="header-anchor">#</a> 后台管理系统</h2> <h4 id="架构示意图"><a href="#架构示意图" class="header-anchor">#</a> 架构示意图</h4> <p>​				前端                                                           后台                                                         小程序云开发</p> <p>vue-admin-template  &lt;---通过ajax--&gt; 基于Koa2；HTTP API 或 tcb-admin-node    ----&gt;云函数、云数据库、云存储</p> <p>​</p> <h4 id="vue-admin-template构建管理系统前端"><a href="#vue-admin-template构建管理系统前端" class="header-anchor">#</a> vue-admin-template构建管理系统前端</h4> <p><a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" rel="noopener noreferrer">vue-element-admin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 基于element的后台管理系统模板</p> <p><a href="https://github.com/PanJiaChen/vue-admin-template" target="_blank" rel="noopener noreferrer">vue-admin-template<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是 <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" rel="noopener noreferrer">vue-element-admin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的简化版</p> <p>使用方法查看官方文档。</p> <h4 id="koa2构建管理系统后端"><a href="#koa2构建管理系统后端" class="header-anchor">#</a> Koa2构建管理系统后端</h4> <p>官网： <a href="https://koa.bootcss.com/" target="_blank" rel="noopener noreferrer">https://koa.bootcss.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>新建空文件夹wx-music-admin-backend，打开终端：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token comment"># 生成package.json文件，-y 表示默认的配置</span>
    1157. 

  1157. <span class="token function">npm</span> init <span class="token parameter variable">-y</span>
    1158. 

  1158. 

  1159. <span class="token comment"># 安装koa</span>
    1160. 

  1160. <span class="token function">npm</span> <span class="token function">install</span> koa
    1161. 

  1161. 

  1162. <span class="token comment"># 新建app.js文件 (win10系统命令)，作为项目入口文件</span>
    1163. 

  1163. <span class="token builtin class-name">type</span> nul <span class="token operator">&gt;</span> app.js
    1164. 

  1164. 

  1165. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>app.js:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> Koa <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'koa'</span><span class="token punctuation">)</span>
    1166. 

  1166. <span class="token keyword">const</span> chalk <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'chalk'</span><span class="token punctuation">)</span> <span class="token comment">// 使console.log打印文字有颜色的插件，需: npm i chalk</span>
    1167. 

  1167. <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Koa</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1168. 

  1168. 

  1169. app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1170. 

  1170.   ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token string">'Hello Wolrd'</span>
    1171. 

  1171. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1172. 

  1172. <span class="token keyword">const</span> port <span class="token operator">=</span> <span class="token number">3000</span>
    1173. 

  1173. app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span>port<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 端口号，开启服务后的回调函数</span>
    1174. 

  1174.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>chalk<span class="token punctuation">.</span><span class="token function">green</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&gt; 服务已开启，访问：http://localhost:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>port<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    1175. 

  1175. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1176. 

  1176. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>终端：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token comment"># node启动项目</span>
    1177. 

  1177. <span class="token function">node</span> app.js
    1178. 

  1178. 

  1179. <span class="token comment"># 访问：http://localhost:3000</span>
    1180. 

  1180. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="接口调用凭证-access-token-的缓存与更新"><a href="#接口调用凭证-access-token-的缓存与更新" class="header-anchor">#</a> 接口调用凭证 access_token 的缓存与更新</h4> <p>access_token，微信的接口调用凭证，详情：<a href="https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html" target="_blank" rel="noopener noreferrer">https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>回到项目wx-music-admin-backend，打开终端：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token comment"># HTTP 请求 插件</span>
    1181. 

  1181. <span class="token function">npm</span> i request
    1182. 

  1182. <span class="token function">npm</span> i request-promise
    1183. 

  1183. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
    1184. 

  1184.  * 获取微信接口调用凭证
    1185. 

  1185.  * 详情：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html
    1186. 

  1186.  */</span>
    1187. 

  1187. 

  1188. 

  1189. <span class="token keyword">const</span> rp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'request-promise'</span><span class="token punctuation">)</span> <span class="token comment">// node发送http请求的插件</span>
    1190. 

  1190. <span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span> <span class="token comment">// node文件模块</span>
    1191. 

  1191. <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> <span class="token comment">// node 路径模块</span>
    1192. 

  1192. 

  1193. <span class="token comment">//fileName = __dirname 当前文件所在目录的绝对路径, 加上 './access_token.json'</span>
    1194. 

  1194. <span class="token keyword">const</span> fileName <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./access_token.json'</span><span class="token punctuation">)</span>
    1195. 

  1195. 

  1196. <span class="token comment">// 这两个参数的获取：微信公众平台&gt;开发&gt;开发设置</span>
    1197. 

  1197. <span class="token keyword">const</span> <span class="token constant">APPID</span> <span class="token operator">=</span> <span class="token string">'wxc4e0b2d98063b103'</span>
    1198. 

  1198. <span class="token keyword">const</span> <span class="token constant">APPSECRET</span> <span class="token operator">=</span> <span class="token string">'xxx'</span> <span class="token comment">//小程序密钥，注意保密!</span>
    1199. 

  1199. 

  1200. <span class="token comment">// 微信 access_token 请求地址</span>
    1201. 

  1201. <span class="token keyword">const</span> <span class="token constant">URL</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&amp;appid=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">APPID</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;secret=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">APPSECRET</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
    1202. 

  1202. 

  1203. <span class="token comment">// 发送请求获取AccessToken</span>
    1204. 

  1204. <span class="token keyword">const</span> <span class="token function-variable function">updateAccessToken</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1205. 

  1205.   <span class="token keyword">const</span> resStr <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">rp</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span>
    1206. 

  1206.   <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>resStr<span class="token punctuation">)</span>
    1207. 

  1207. 

  1208.   <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>access_token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1209. 

  1209.     <span class="token comment">// node写文件,参数：1 文件路径，2 文件内容, 首次写文件为新建，往后为覆盖</span>
    1210. 

  1210.     fs<span class="token punctuation">.</span><span class="token function">writeFileSync</span><span class="token punctuation">(</span>fileName<span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1211. 

  1211.       <span class="token literal-property property">access_token</span><span class="token operator">:</span> res<span class="token punctuation">.</span>access_token<span class="token punctuation">,</span>
    1212. 

  1212.       <span class="token literal-property property">createTime</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1213. 

  1213.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    1214. 

  1214.   <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 如获取不到，再次获取</span>
    1215. 

  1215.     <span class="token keyword">await</span> <span class="token function">updateAccessToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1216. 

  1216.   <span class="token punctuation">}</span>
    1217. 

  1217. <span class="token punctuation">}</span>
    1218. 

  1218. 

  1219. <span class="token comment">// 读取access_token</span>
    1220. 

  1220. <span class="token keyword">const</span> <span class="token function-variable function">getAccessToken</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1221. 

  1221.   <span class="token keyword">try</span> <span class="token punctuation">{</span>
    1222. 

  1222.      <span class="token comment">// node读取文件,参数：1 读取的文件，2 字符集</span>
    1223. 

  1223.     <span class="token keyword">const</span> readRes <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span>fileName<span class="token punctuation">,</span> <span class="token string">'utf8'</span><span class="token punctuation">)</span>
    1224. 

  1224.     <span class="token keyword">const</span> readObj <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>readRes<span class="token punctuation">)</span>
    1225. 

  1225. 

  1226.     <span class="token comment">// 如果服务器宕机导致setInterval无法定时更新，这里需要再次判断access_token的有效性</span>
    1227. 

  1227.     <span class="token keyword">const</span> createTime <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>readObj<span class="token punctuation">.</span>createTime<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1228. 

  1228.     <span class="token keyword">const</span> nowTime <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1229. 

  1229.     <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token punctuation">(</span>nowTime <span class="token operator">-</span> createTime<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">60</span> <span class="token operator">/</span> <span class="token number">60</span> <span class="token operator">&gt;=</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1230. 

  1230.       <span class="token keyword">await</span> <span class="token function">updateAccessToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1231. 

  1231.       <span class="token keyword">await</span> <span class="token function">getAccessToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1232. 

  1232.       <span class="token keyword">return</span>
    1233. 

  1233.     <span class="token punctuation">}</span>
    1234. 

  1234.     <span class="token keyword">return</span> readObj<span class="token punctuation">.</span>access_token
    1235. 

  1235. 

  1236.   <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//捕获异常，在未创建文件时，先创建文件</span>
    1237. 

  1237.     <span class="token keyword">await</span> <span class="token function">updateAccessToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1238. 

  1238.     <span class="token keyword">await</span> <span class="token function">getAccessToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1239. 

  1239.   <span class="token punctuation">}</span>
    1240. 

  1240. <span class="token punctuation">}</span>
    1241. 

  1241. 

  1242. <span class="token comment">// access_token有效期为2个小时，定时更新</span>
    1243. 

  1243. <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1244. 

  1244.   <span class="token keyword">await</span> <span class="token function">updateAccessToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1245. 

  1245. <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">7200</span> <span class="token operator">-</span> <span class="token number">300</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">)</span>
    1246. 

  1246. 

  1247. module<span class="token punctuation">.</span>exports <span class="token operator">=</span> getAccessToken
    1248. 

  1248. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br></div></div><h4 id="后端代码通过http-api-触发云函数获取数据"><a href="#后端代码通过http-api-触发云函数获取数据" class="header-anchor">#</a> 后端代码通过HTTP API 触发云函数获取数据</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/functions/invokeCloudFunction.html" target="_blank" rel="noopener noreferrer">HTTP API 触发云函数<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="产生跨域和后端解决跨域问题"><a href="#产生跨域和后端解决跨域问题" class="header-anchor">#</a> 产生跨域和后端解决跨域问题</h4> <p>管理系统前端向管理系统后端请求数据，产生了跨域问题</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token comment">// 产生跨域的几种情况</span>
    1249. 

  1249.   <span class="token comment">// http://www.a.com  https://www.a.com 协议不同</span>
    1250. 

  1250.   <span class="token comment">// http://www.a.com  http://www.b.com 域名不同</span>
    1251. 

  1251.   <span class="token comment">// http://www.a.com  http://news.a.com 主域与子域不同</span>
    1252. 

  1252.   <span class="token comment">// http://www.a.com:8080  http://www.a.com:3000 端口不同</span>
    1253. 

  1253. 

  1254. <span class="token comment">// 解决跨域的几种方法</span>
    1255. 

  1255. <span class="token comment">// jsonp</span>
    1256. 

  1256. <span class="token comment">// iframe</span>
    1257. 

  1257. <span class="token comment">// postMessage跨域</span>
    1258. 

  1258. <span class="token comment">// 跨域资源共享（CORS）</span>
    1259. 

  1259. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>管理系统后端，安装</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code>// 解决跨域问题的koa包
    1260. 

  1260. <span class="token function">npm</span> i koa2-cors
    1261. 

  1261. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>app.js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//处理跨域</span>
    1262. 

  1262. app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">cors</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1263. 

  1263.   <span class="token literal-property property">origin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'http://localhost:9528'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 允许访问本服务的域</span>
    1264. 

  1264.   <span class="token literal-property property">credentials</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1265. 

  1265. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    1266. 

  1266. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="云数据库的增删改查接口"><a href="#云数据库的增删改查接口" class="header-anchor">#</a> 云数据库的增删改查接口</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/database/databaseQuery.html" target="_blank" rel="noopener noreferrer">数据库查询记录<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="后端获取前端post请求传来的数据"><a href="#后端获取前端post请求传来的数据" class="header-anchor">#</a> 后端获取前端post请求传来的数据</h4> <p>get请求可以直接通过ctx.request.query获取，但是post请求需要安装koa-body</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">npm</span> i koa-body
    1267. 

  1267. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>app.js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> koaBody <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'koa-body'</span><span class="token punctuation">)</span> <span class="token comment">// 对post请求前端传来的数据的获取，需要此依赖</span>
    1268. 

  1268. 

  1269. <span class="token comment">// 接收post参数解析</span>
    1270. 

  1270. app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">koaBody</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1271. 

  1271.   <span class="token literal-property property">multipart</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1272. 

  1272. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    1273. 

  1273. 

  1274. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>接口.js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/updatePlaylist'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1275. 

  1275. 

  1276.   <span class="token keyword">const</span> params <span class="token operator">=</span> ctx<span class="token punctuation">.</span>request<span class="token punctuation">.</span>body <span class="token comment">// post请求获取前端传来的数据，需安装和配置koa-body</span>
    1277. 

  1277. 

  1278. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1279. 

  1279. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="后端获取云存储图片"><a href="#后端获取云存储图片" class="header-anchor">#</a> 后端获取云存储图片</h4> <p>云存储中上传图片，云数据库中新建图片的集合，并添加数据字段，字段包含云文件的fileid。</p> <p>后端项目通过调用云数据库的方式获取数据</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/list'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1280. 

  1280.   <span class="token comment">// 接口中读取数据库默认最多10条数据</span>
    1281. 

  1281.   <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">db.collection('swiper').get()</span><span class="token template-punctuation string">`</span></span>
    1282. 

  1282.   <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">callCloudDB</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token string">'databasequery'</span><span class="token punctuation">,</span> query<span class="token punctuation">)</span>
    1283. 

  1283.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    1284. 

  1284. 

  1285. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1286. 

  1286. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>但获取到的数据为fileid，并不能用于显示图片，需要通过微信HTTP API获取云存储的接口来获取图片地址</p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/batchDownloadFile.html" target="_blank" rel="noopener noreferrer">获取云存储<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="后端上传图片到云存储"><a href="#后端上传图片到云存储" class="header-anchor">#</a> 后端上传图片到云存储</h4> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html" target="_blank" rel="noopener noreferrer">文件上传<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div></div>  <div class="page-edit"><div class="edit-link"><a href="https://github.com/heBody/blog/edit/master/docs/01.前端/40.学习笔记/40.小程序笔记.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="tags"><a href="/blog/tags/?tag=%E5%B0%8F%E7%A8%8B%E5%BA%8F" title="标签">#小程序</a></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/12/14, 19:36:42</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/blog/pages/51afd6/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">TypeScript笔记</div></a> <a href="/blog/pages/4643cd/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">JS设计模式总结笔记</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
    1287. 

  1287.         ←
    1288. 

  1288.         <a href="/blog/pages/51afd6/" class="prev">TypeScript笔记</a></span> <span class="next"><a href="/blog/pages/4643cd/">JS设计模式总结笔记</a>→
    1289. 

  1289.       </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/blog/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/blog/pages/922650/"><div>
    1290. 

  1290.             Git修改分支名
    1291. 

  1291.             <!----></div></a> <span class="date">08-11</span></dt></dl><dl><dd>02</dd> <dt><a href="/blog/pages/55f894/"><div>
    1292. 

  1292.             CSS给table的tbody添加滚动条
    1293. 

  1293.             <!----></div></a> <span class="date">06-29</span></dt></dl><dl><dd>03</dd> <dt><a href="/blog/pages/829589/"><div>
    1294. 

  1294.             我做了一个手写春联小网页，祝大家虎年暴富
    1295. 

  1295.             <span class="title-tag">
    1296. 

  1296.               原创
    1297. 

  1297.             </span></div></a> <span class="date">01-28</span></dt></dl> <dl><dd></dd> <dt><a href="/blog/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:30363811@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/heBody" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
    1298. 

  1298.   Theme by
    1299. 

  1299.   <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    1300. 

  1300.     | Copyright © 2019-2022
    1301. 

  1301.     <span>Evan Xu | <a href="https://github.com/heBody/blob/master/LICENSE" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
    1302. 

  1302.           跟随系统
    1303. 

  1303.         </li><li class="iconfont icon-rijianmoshi">
    1304. 

  1304.           浅色模式
    1305. 

  1305.         </li><li class="iconfont icon-yejianmoshi">
    1306. 

  1306.           深色模式
    1307. 

  1307.         </li><li class="iconfont icon-yuedu">
    1308. 

  1308.           阅读模式
    1309. 

  1309.         </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    1310. 

  1310.     <script src="/blog/assets/js/app.b419507c.js" defer></script><script src="/blog/assets/js/2.602aac03.js" defer></script><script src="/blog/assets/js/31.4d385616.js" defer></script>
    1311. 

  1311.   </body>
    1312. 

  1312. </html>
    1313.