代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>原生小程序相关资源 | 前端宝典</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="涵盖常见面试题、开发工具介绍">
<link rel="preload" href="/front-end-dictionary/assets/css/0.styles.2a5baad3.css" as="style"><link rel="preload" href="/front-end-dictionary/assets/js/app.88ed2bc2.js" as="script"><link rel="preload" href="/front-end-dictionary/assets/js/2.22fea77d.js" as="script"><link rel="preload" href="/front-end-dictionary/assets/js/22.44f2db92.js" as="script"><link rel="prefetch" href="/front-end-dictionary/assets/js/10.c7840575.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/11.564b3bac.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/12.3de2e7ff.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/13.8666c730.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/14.d8abfcfe.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/15.15ad8667.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/16.854da236.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/17.d6fe8b8b.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/18.32323657.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/19.21b2db1c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/20.6d96ceec.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/21.14370795.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/3.099dce6b.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/4.47f3f56c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/5.f118685e.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/6.b79a085d.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/7.94eeef1c.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/8.f5e643c9.js"><link rel="prefetch" href="/front-end-dictionary/assets/js/9.e180f19c.js">
<link rel="stylesheet" href="/front-end-dictionary/assets/css/0.styles.2a5baad3.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div 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="/front-end-dictionary/" class="home-link router-link-active"><img src="http://www.itheima.com/images/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="http://www.itheima.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
黑马官网
<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="vue相关" class="dropdown-title"><span class="title">vue相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue相关" class="mobile-dropdown-title"><span class="title">vue相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="vue-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue相关
<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></li><li class="dropdown-item"><!----> <a href="vue-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-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></li><li class="dropdown-item"><!----> <a href="vue-vuex.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
vuex相关
<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></li><li class="dropdown-item"><!----> <a href="vue-ssr.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
服务器端渲染
<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></li><li class="dropdown-item"><!----> <a href="vue-project.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
项目相关
<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></li><li class="dropdown-item"><!----> <a href="vue-v3.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue3相关
<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></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="react相关" class="dropdown-title"><span class="title">react相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="react相关" class="mobile-dropdown-title"><span class="title">react相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="react-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
react基础
<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></li><li class="dropdown-item"><!----> <a href="react-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
react-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></li><li class="dropdown-item"><!----> <a href="react-redux.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
redux相关
<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></li><li class="dropdown-item"><!----> <a href="react-hooks.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
Hooks相关
<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></li><li class="dropdown-item"><!----> <a href="react-other.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
其他相关
<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></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序和uni-app" class="dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序和uni-app" class="mobile-dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="wxxcx.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
原生小程序
<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></li><li class="dropdown-item"><!----> <a href="uni-app.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
uni-app开发
<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></li></ul></div></div><div class="nav-item"><a href="/front-end-dictionary/tools.html" class="nav-link">
开发工具
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://www.itheima.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
黑马官网
<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="vue相关" class="dropdown-title"><span class="title">vue相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue相关" class="mobile-dropdown-title"><span class="title">vue相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="vue-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue相关
<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></li><li class="dropdown-item"><!----> <a href="vue-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-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></li><li class="dropdown-item"><!----> <a href="vue-vuex.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
vuex相关
<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></li><li class="dropdown-item"><!----> <a href="vue-ssr.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
服务器端渲染
<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></li><li class="dropdown-item"><!----> <a href="vue-project.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
项目相关
<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></li><li class="dropdown-item"><!----> <a href="vue-v3.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue3相关
<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></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="react相关" class="dropdown-title"><span class="title">react相关</span> <span class="arrow down"></span></button> <button type="button" aria-label="react相关" class="mobile-dropdown-title"><span class="title">react相关</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="react-index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
react基础
<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></li><li class="dropdown-item"><!----> <a href="react-router.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
react-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></li><li class="dropdown-item"><!----> <a href="react-redux.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
redux相关
<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></li><li class="dropdown-item"><!----> <a href="react-hooks.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
Hooks相关
<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></li><li class="dropdown-item"><!----> <a href="react-other.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
其他相关
<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></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序和uni-app" class="dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序和uni-app" class="mobile-dropdown-title"><span class="title">小程序和uni-app</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="wxxcx.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
原生小程序
<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></li><li class="dropdown-item"><!----> <a href="uni-app.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
uni-app开发
<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></li></ul></div></div><div class="nav-item"><a href="/front-end-dictionary/tools.html" class="nav-link">
开发工具
</a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>原生小程序相关资源</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-dictionary/wxxcx.html#_1、相关资源" class="sidebar-link">1、相关资源</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/front-end-dictionary/wxxcx.html#_2、面试题" class="sidebar-link">2、面试题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#什么是微信小程序" class="sidebar-link">什么是微信小程序</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序开发的流程" class="sidebar-link">微信小程序开发的流程</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序和网页开发的区别" class="sidebar-link">微信小程序和网页开发的区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序每个页面需要几个文件-各自什么含义" class="sidebar-link">小程序每个页面需要几个文件，各自什么含义</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序如何设置首页" class="sidebar-link">小程序如何设置首页</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#wxss-和-css有什么区别" class="sidebar-link">wxss 和 css有什么区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序中的js有几类" class="sidebar-link">小程序中的JS有几类</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序中的配置文件有哪些" class="sidebar-link">小程序中的配置文件有哪些</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#什么是宿主环境" class="sidebar-link">什么是宿主环境</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序的宿主环境是谁" class="sidebar-link">微信小程序的宿主环境是谁</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#有哪些常见的容器组件" class="sidebar-link">有哪些常见的容器组件</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序里面顶层对象是什么" class="sidebar-link">小程序里面顶层对象是什么？</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序的入口文件是什么" class="sidebar-link">微信小程序的入口文件是什么？</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序的运行机制" class="sidebar-link">微信小程序的运行机制</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序有哪些版本阶段" class="sidebar-link">微信小程序有哪些版本阶段</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序成员有几类、分别的作用" class="sidebar-link">小程序成员有几类、分别的作用</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序项目成员有几类角色" class="sidebar-link">小程序项目成员有几类角色</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何发布小程序" class="sidebar-link">如何发布小程序</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何进行数据绑定渲染" class="sidebar-link">如何进行数据绑定渲染</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何进行事件绑定" class="sidebar-link">如何进行事件绑定</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何进行事件传参" class="sidebar-link">如何进行事件传参</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序里如何修改数据" class="sidebar-link">小程序里如何修改数据</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#target和currenttarget的区别" class="sidebar-link">target和currentTarget的区别</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何阻止冒泡" class="sidebar-link">如何阻止冒泡</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何条件渲染" class="sidebar-link">如何条件渲染</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何列表渲染" class="sidebar-link">如何列表渲染</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#使用wxss需要注意什么" class="sidebar-link">使用wxss需要注意什么</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序有哪些常见配置" class="sidebar-link">小程序有哪些常见配置</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#tabbar最配置个数的范围是" class="sidebar-link">tabBar最配置个数的范围是</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何发起网络请求-需要注意什么" class="sidebar-link">如何发起网络请求，需要注意什么</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序里面如何实现双向绑定" class="sidebar-link">小程序里面如何实现双向绑定</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何实现页面跳转" class="sidebar-link">如何实现页面跳转</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#如何实现页面传参" class="sidebar-link">如何实现页面传参</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#有哪些页面事件" class="sidebar-link">有哪些页面事件</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序生命周期有哪些" class="sidebar-link">小程序生命周期有哪些？</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#wxs是什么-有什么作用-如何使用" class="sidebar-link">wxs是什么？有什么作用？如何使用</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序组件如何注册使用" class="sidebar-link">小程序组件如何注册使用</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序组件有哪些配置" class="sidebar-link">微信小程序组件有哪些配置</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序如何父子通信" class="sidebar-link">微信小程序如何父子通信</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序如何子父通信" class="sidebar-link">微信小程序如何子父通信</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信小程序如何实现全局数据共享" class="sidebar-link">微信小程序如何实现全局数据共享</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序中如何实现自定义tabbar" class="sidebar-link">小程序中如何实现自定义tabBar</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序如何实现分包-好处" class="sidebar-link">小程序如何实现分包，好处</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#微信登录如何实现" class="sidebar-link">微信登录如何实现</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序开发需要注意什么" class="sidebar-link">小程序开发需要注意什么</a></li><li class="sidebar-sub-header"><a href="/front-end-dictionary/wxxcx.html#小程序里有跨域吗" class="sidebar-link">小程序里有跨域吗？</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="原生小程序相关资源"><a href="#原生小程序相关资源" class="header-anchor">#</a> 原生小程序相关资源</h1> <h2 id="_1、相关资源"><a href="#_1、相关资源" class="header-anchor">#</a> 1、相关资源</h2> <h2 id="_2、面试题"><a href="#_2、面试题" class="header-anchor">#</a> 2、面试题</h2> <h3 id="什么是微信小程序"><a href="#什么是微信小程序" class="header-anchor">#</a> 什么是微信小程序</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>小程序是一种不需要下载、安装即可使用的应用，微信扫一扫就能打开应用，实现了用完即走的理念。</p></details> <h3 id="微信小程序开发的流程"><a href="#微信小程序开发的流程" class="header-anchor">#</a> 微信小程序开发的流程</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ol><li>注册账号</li> <li>完善信息</li> <li>开发代码</li> <li>提交审核、上线</li></ol></details> <h3 id="微信小程序和网页开发的区别"><a href="#微信小程序和网页开发的区别" class="header-anchor">#</a> 微信小程序和网页开发的区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>运行环境不同： 网页浏览器中, 微信小程序微信环境中</li> <li>提供的API不同：小程序中，无法调用 DOM 和 BOM 的 API； 可以调用微信的API，例如：微信支付、微信扫码等</li> <li>开发模式不同： 网页的开发模式：浏览器 + 编辑器 ； 小程序是：账号申请 + 开发工具 + 创建配置项目</li></ul></details> <h3 id="小程序每个页面需要几个文件-各自什么含义"><a href="#小程序每个页面需要几个文件-各自什么含义" class="header-anchor">#</a> 小程序每个页面需要几个文件，各自什么含义</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>wxml 页面结构 【必须】</li> <li>wxss 页面样式</li> <li>json 页面配置</li> <li>js 页面逻辑 【必须】</li></ul></details> <h3 id="小程序如何设置首页"><a href="#小程序如何设置首页" class="header-anchor">#</a> 小程序如何设置首页</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>方式1： 将页面路径写在在<code>app.json</code>里面<code>pages</code>数组的第一位</li> <li>方式2： 在<code>app.json</code>配置<code>entryPagePath</code></li></ul></details> <h3 id="wxss-和-css有什么区别"><a href="#wxss-和-css有什么区别" class="header-anchor">#</a> wxss 和 css有什么区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>wxss 支持rpx响应式单位</li> <li>wxss 只支持部分css选择器</li></ul></details> <h3 id="小程序中的js有几类"><a href="#小程序中的js有几类" class="header-anchor">#</a> 小程序中的JS有几类</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>分类1： 页面的JS逻辑</li> <li>分类2: 全局的JS逻辑 <code>app.js</code></li> <li>分类3： 工具函数逻辑 <code>utils/index.js</code> 【遵循es6模块规范和commonJS规范】</li></ul></details> <h3 id="小程序中的配置文件有哪些"><a href="#小程序中的配置文件有哪些" class="header-anchor">#</a> 小程序中的配置文件有哪些</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>app.json 全局配置</li> <li>页面.json 页面配置</li> <li>sitemap.json 搜索优化配置</li> <li>project.config.json 项目配置</li></ul></details> <h3 id="什么是宿主环境"><a href="#什么是宿主环境" class="header-anchor">#</a> 什么是宿主环境</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>程序依赖运行的环境就是宿主环境</p></details> <h3 id="微信小程序的宿主环境是谁"><a href="#微信小程序的宿主环境是谁" class="header-anchor">#</a> 微信小程序的宿主环境是谁</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>微信</p></details> <h3 id="有哪些常见的容器组件"><a href="#有哪些常见的容器组件" class="header-anchor">#</a> 有哪些常见的容器组件</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>view、swiper、scroll-view</p></details> <h3 id="小程序里面顶层对象是什么"><a href="#小程序里面顶层对象是什么" class="header-anchor">#</a> 小程序里面顶层对象是什么？</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>wx</p></details> <h3 id="微信小程序的入口文件是什么"><a href="#微信小程序的入口文件是什么" class="header-anchor">#</a> 微信小程序的入口文件是什么？</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>app.js 文件</p></details> <h3 id="微信小程序的运行机制"><a href="#微信小程序的运行机制" class="header-anchor">#</a> 微信小程序的运行机制</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ol><li>小程序启动的过程： ①. 把小程序的代码包下载到本地 ②. 解析 app.json 全局配置文件 ③. 执行 app.js 小程序入口文件，调用 App() 创建小程序实例 ④. 渲染小程序首页 ⑤. 小程序启动完成</li> <li>页面渲染的过程：①. 加载解析页面的.json 配置文件 ②. 加载页面的 .wxml 模板和 .wxss 样式 ③. 执行页面的 .js 文件，调用 Page() 创建页面实例 ④. 页面渲染完成</li></ol></details> <h3 id="微信小程序有哪些版本阶段"><a href="#微信小程序有哪些版本阶段" class="header-anchor">#</a> 微信小程序有哪些版本阶段</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>开发版本</li> <li>体验版本</li> <li>审核版本</li> <li>上线版本</li></ul></details> <h3 id="小程序成员有几类、分别的作用"><a href="#小程序成员有几类、分别的作用" class="header-anchor">#</a> 小程序成员有几类、分别的作用</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>分类1： 项目成员（可以登录小程序的管理后台）</li> <li>分类2： 体验成员（在开发阶段可以预览小程序效果）</li></ul></details> <h3 id="小程序项目成员有几类角色"><a href="#小程序项目成员有几类角色" class="header-anchor">#</a> 小程序项目成员有几类角色</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>运营者</li> <li>开发者 （前端工程师）</li> <li>数据分析者</li></ul></details> <h3 id="如何发布小程序"><a href="#如何发布小程序" class="header-anchor">#</a> 如何发布小程序</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>在小程序开发者工具点击发布按钮，填写信息===> 小程序后台版本管理、发布版本==>审核通过后，点击上线即可</p></details> <h3 id="如何进行数据绑定渲染"><a href="#如何进行数据绑定渲染" class="header-anchor">#</a> 如何进行数据绑定渲染</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><ol><li>页面的js里面data里定义变量</li></ol></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token literal-property property">变量</span><span class="token operator">:</span>数据
<span class="token punctuation">}</span>
</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><ul><li><ol start="2"><li>页面中，插值表达式渲染数据</li></ol></li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span><span class="token punctuation">></span></span>{{变量}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></details> <h3 id="如何进行事件绑定"><a href="#如何进行事件绑定" class="header-anchor">#</a> 如何进行事件绑定</h3> <details class="custom-block details"><summary>点击查看答案</summary> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</span> <span class="token attr-name">bind事件名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>事件函数<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</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>
<span class="token function">事件函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</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></details> <h3 id="如何进行事件传参"><a href="#如何进行事件传参" class="header-anchor">#</a> 如何进行事件传参</h3> <details class="custom-block details"><summary>点击查看答案</summary> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</span> <span class="token attr-name">data-属性名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>数据<span class="token punctuation">"</span></span> <span class="token attr-name">bind事件名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>事件函数<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</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>
<span class="token function">事件函数</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">// event.target.dataset.属性名 获取到自定义数据</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</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></details> <h3 id="小程序里如何修改数据"><a href="#小程序里如何修改数据" class="header-anchor">#</a> 小程序里如何修改数据</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>使用<code>setData</code>方法修改数据</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><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 literal-property property">key</span><span class="token operator">:</span>val <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></details> <h3 id="target和currenttarget的区别"><a href="#target和currenttarget的区别" class="header-anchor">#</a> <code>target</code>和<code>currentTarget</code>的区别</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>target是事件触发的源头</li> <li>currentTarget 是当前事件绑定所在的节点</li></ul></details> <h3 id="如何阻止冒泡"><a href="#如何阻止冒泡" class="header-anchor">#</a> 如何阻止冒泡</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>使用<code>catch</code>来绑定事件</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment"><!--冒泡--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>事件名<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token comment"><!--不冒泡--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</span> <span class="token attr-name">catchtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>事件名<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</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></details> <h3 id="如何条件渲染"><a href="#如何条件渲染" class="header-anchor">#</a> 如何条件渲染</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>节点的存在与否</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</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">"</span>{{表达式/变量}}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{表达式/变量}}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">/></span></span>
</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><ul><li>样式切换</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{表达式/变量}}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></details> <h3 id="如何列表渲染"><a href="#如何列表渲染" class="header-anchor">#</a> 如何列表渲染</h3> <details class="custom-block details"><summary>点击查看答案</summary> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</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">"</span>数组<span class="token punctuation">"</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">"</span>index<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>
{{index}} {{item}}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>标签</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</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">"</span>数组<span class="token punctuation">"</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">"</span>idx<span class="token punctuation">"</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">"</span>val<span class="token punctuation">"</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">"</span>idx<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>
{{idx}} {{val}}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>标签</span><span class="token punctuation">></span></span>
</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></details> <h3 id="使用wxss需要注意什么"><a href="#使用wxss需要注意什么" class="header-anchor">#</a> 使用<code>wxss</code>需要注意什么</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>rpx是按照iPhone6设计稿为基础的，设计图是多少px就写多少rpx</p></details> <h3 id="小程序有哪些常见配置"><a href="#小程序有哪些常见配置" class="header-anchor">#</a> 小程序有哪些常见配置</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><code>pages</code>页面路径</li> <li><code>window</code> 窗口表现</li> <li><code>tabBar</code> 底部tab表现</li></ul></details> <h3 id="tabbar最配置个数的范围是"><a href="#tabbar最配置个数的范围是" class="header-anchor">#</a> <code>tabBar</code>最配置个数的范围是</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p>最少2个最多5个</p></details> <h3 id="如何发起网络请求-需要注意什么"><a href="#如何发起网络请求-需要注意什么" class="header-anchor">#</a> 如何发起网络请求，需要注意什么</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>发起网络请求使用<code>wx.reuqest</code>方法</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">url</span><span class="token operator">:</span><span class="token string">"地址"</span><span class="token punctuation">,</span>
<span class="token literal-property property">method</span><span class="token operator">:</span><span class="token string">"方式"</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>提交的数据<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">headers</span><span class="token operator">:</span><span class="token punctuation">{</span>请求头<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">success</span><span class="token operator">:</span><span class="token parameter">res</span><span class="token operator">=></span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">fail</span><span class="token operator">:</span><span class="token parameter">err</span><span class="token operator">=></span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">complete</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</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><ul><li>注意点：请求的地址（需要是域名且开启https）需要配置在小程序后台的请求服务器名单中【上线阶段】，否则无法发起请求； 或者采用不校验域名和https正式的方式【开发阶段】</li></ul></details> <h3 id="小程序里面如何实现双向绑定"><a href="#小程序里面如何实现双向绑定" class="header-anchor">#</a> 小程序里面如何实现双向绑定</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>注意点： 小程序里面默认不是双向绑定，需要手动实现</li> <li>实现：</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">bindinput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>changeInputValue<span class="token punctuation">"</span></span> <span class="token attr-name">data-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
username：<span class="token string">''</span>
<span class="token punctuation">}</span>
<span class="token function">changeInputValue</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 keyword">const</span> key <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>key <span class="token comment">// 获取要修改的属性字段</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value <span class="token comment">// 输入的最新的值</span>
<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 literal-property property">key</span><span class="token operator">:</span>val
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</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></details> <h3 id="如何实现页面跳转"><a href="#如何实现页面跳转" class="header-anchor">#</a> 如何实现页面跳转</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>方式1： 声明式导航</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>navigator</span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>地址<span class="token punctuation">"</span></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">"</span>navigate/redirect/switchTab/reLaunch/navigateBack/exit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>navigator</span><span class="token punctuation">></span></span>
<span class="token comment"><!--常用是navigate（默认），switchTab 跳转到TabBar页面，navigateBack返回上一页，它不需要url--></span>
文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
</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><ul><li>方式2：编程式导航</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code> wx<span class="token punctuation">.</span>switchTab<span class="token operator">/</span>reLaunch<span class="token operator">/</span>redirectTo<span class="token operator">/</span>navigateTo<span class="token operator">/</span>navigateBack
<span class="token comment">// 常用的： wx.switchTab/navigateBack/navigateTo</span>
<span class="token comment">//文档地址： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html</span>
</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></details> <h3 id="如何实现页面传参"><a href="#如何实现页面传参" class="header-anchor">#</a> 如何实现页面传参</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>小程序里面页面传参通过查询参数绑定数据，在读取的页面的onLoad生命周期options里面读取</li> <li>伪代码</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment"><!--A页面的wxml里面--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>navigator</span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/地址?key=val&key2=val2<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>跳转到B页面<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>navigator</span><span class="token punctuation">></span></span>
</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">// B页面的JS里面</span>
<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// options 就是页面传入进去的数据 {key:val,key2:val2}</span>
<span class="token punctuation">}</span>
</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><ul><li>注意点：这种方式无法给TabBar页面传值，读取不到</li></ul></details> <h3 id="有哪些页面事件"><a href="#有哪些页面事件" class="header-anchor">#</a> 有哪些页面事件</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>页面滚动到底事件 <code>onReachBottom</code></li> <li>下拉刷新事件 <code>onPullDownRefresh</code> <ul><li><p>需要主动开启: <code>"enablePullDownRefresh": true</code></p></li> <li><p>需要主动关闭：<code>wx.stopPullDownRefresh()</code></p></li></ul></li></ul></details> <h3 id="小程序生命周期有哪些"><a href="#小程序生命周期有哪些" class="header-anchor">#</a> 小程序生命周期有哪些？</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>应用生命周期 <code>onLaunch,onShow,onHide,onError</code></p></li> <li><p>页面生命周期 <code>onLoad,onShow,onReady,onHide,onUnload</code></p> <ul><li>注意点： T
<ul><li>tabBar页面是会被缓存的，下次不会再触发<code>onLoad</code>，也不会触发<code>onUnload</code>，而是触发<code>onShow</code>和<code>onHide</code></li> <li>非TabBar页面，不会被缓存，离开就会销毁。执行<code>onUnload</code></li></ul></li></ul></li> <li><p>组件生命周期</p> <ul><li><p>组件生命周期</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token literal-property property">lifetimes</span><span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token function">attached</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
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>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">detached</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
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>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</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></li> <li><p>组件所在页面生命周期（监听组件所在的页面生命周期的变化）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 在组件内部的pageLifetimes 节点中，监听组件在页面的生命周期函数</span>
<span class="token literal-property property">pageLifetimes</span><span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 在页面被展示的时候，调用该方法</span>
<span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 页面被隐藏</span>
<span class="token function">resize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// 页面尺寸变化</span>
<span class="token punctuation">}</span>
</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></li></ul></li></ul></details> <h3 id="wxs是什么-有什么作用-如何使用"><a href="#wxs是什么-有什么作用-如何使用" class="header-anchor">#</a> wxs是什么？有什么作用？如何使用</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>是什么： 全程 weiXinScript 是微信开发的脚本语言，和JS很相似，但是不一样【不能使用es6语法】</p></li> <li><p>作用：可以在模板里面调用函数，有点过滤器的作用</p></li> <li><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"><</span>wxs</span> <span class="token attr-name">module</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>模块名<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
function 方法(){ ... }
module.exports = {
方法:方法
}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>wxs</span><span class="token punctuation">></span></span>
</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></li></ul></details> <h3 id="小程序组件如何注册使用"><a href="#小程序组件如何注册使用" class="header-anchor">#</a> 小程序组件如何注册使用</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>注册： 在<code>components</code>下面创建文件夹，再右键创建组件</p></li> <li><p>使用：</p> <ul><li><p>局部注册使用： 在页面的<code>.json</code>文件里面，配置</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
<span class="token comment">// 在页面的.json 文件 usingComponents 字段导入组件</span>
<span class="token string-property property">"usingComponents"</span><span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token string-property property">"标签名"</span><span class="token operator">:</span><span class="token string">"组件路径"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</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></li> <li><p>全局注册使用：在<code>app.json</code>里面配置</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
<span class="token comment">// 在页面的.json 文件 usingComponents 字段导入组件</span>
<span class="token string-property property">"usingComponents"</span><span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token string-property property">"标签名"</span><span class="token operator">:</span><span class="token string">"组件路径"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</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></li> <li><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"><</span>标签名</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>标签名</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul></li></ul></details> <h3 id="微信小程序组件有哪些配置"><a href="#微信小程序组件有哪些配置" class="header-anchor">#</a> 微信小程序组件有哪些配置</h3> <details class="custom-block details"><summary>点击查看答案</summary> <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>
<span class="token comment">// 数据</span>
<span class="token literal-property property">data</span><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>
<span class="token literal-property property">properties</span><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>
<span class="token literal-property property">methods</span><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>
<span class="token literal-property property">lifetimes</span><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>
<span class="token literal-property property">pageLifetimes</span><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>
<span class="token literal-property property">observers</span><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>
<span class="token literal-property property">behaviors</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</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></details> <h3 id="微信小程序如何父子通信"><a href="#微信小程序如何父子通信" class="header-anchor">#</a> 微信小程序如何父子通信</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>方式1：</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//1. 子组件 定义 properties</span>
<span class="token literal-property property">properties</span><span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token literal-property property">属性名</span><span class="token operator">:</span>类型
<span class="token punctuation">}</span>
</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><div class="language-wxml line-numbers-mode"><pre class="language-text"><code>// 2. 子组件使用自定义属性
{{ 属性名 }}
</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-html line-numbers-mode"><pre class="language-html"><code>// 3. 父组件传递数据
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>子组件</span> <span class="token attr-name">属性名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{变量}}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>子组件</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>方式2： 通过<code>selectComponent</code>获取子组件实例，调用方法修改</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>子组件</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id值<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>子组件</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">selectComponent</span><span class="token punctuation">(</span><span class="token string">'#id值'</span><span class="token punctuation">)</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 literal-property property">key</span><span class="token operator">:</span>val
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</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></details> <h3 id="微信小程序如何子父通信"><a href="#微信小程序如何子父通信" class="header-anchor">#</a> 微信小程序如何子父通信</h3> <details class="custom-block details"><summary>点击查看答案</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 1. 子组件 通过triggerEvent 触发自定义事件</span>
<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">'自定义事件名'</span><span class="token punctuation">,</span>数据<span class="token punctuation">)</span>
</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-html line-numbers-mode"><pre class="language-html"><code>// 2. 父组件个自定义事件绑定事件函数
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>子组件</span> <span class="token attr-name">bind自定义事件名</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>事件函数<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>子组件</span><span class="token punctuation">></span></span>
</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">// 3. 父组件定义事件函数</span>
<span class="token function">事件函数</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">// event.detail 就是子组件传递出来的数据</span>
<span class="token punctuation">}</span>
</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></details> <h3 id="微信小程序如何实现全局数据共享"><a href="#微信小程序如何实现全局数据共享" class="header-anchor">#</a> 微信小程序如何实现全局数据共享</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>给<code>app.js</code> 里面设置一些公共数据和方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 配合本地存储实现持久化</span>
<span class="token keyword">const</span> val1 <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'key1'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> val2 <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'key1'</span><span class="token punctuation">)</span>
<span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">globalData</span><span class="token operator">:</span><span class="token punctuation">{</span> <span class="token literal-property property">key1</span><span class="token operator">:</span>val1<span class="token punctuation">,</span><span class="token literal-property property">key2</span><span class="token operator">:</span>val2 <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 存储共享的数据</span>
<span class="token function">comFn1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 公用的方法</span>
<span class="token function">comFn2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 其他应用生命周期钩子</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</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></li> <li><p>在页面的<code>js</code>里面我们调用公共的方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 通过getApp可以获取到应用实例对象</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token literal-property property">key1</span><span class="token operator">:</span> app<span class="token punctuation">.</span>globalData<span class="token punctuation">.</span>key1
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">某个方法</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
app<span class="token punctuation">.</span>globalData<span class="token punctuation">.</span>key1 <span class="token operator">=</span> 数据
wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'key1'</span><span class="token punctuation">,</span>数据<span class="token punctuation">)</span>
<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 literal-property property">key1</span><span class="token operator">:</span>数据
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</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></li></ul></details> <h3 id="小程序中如何实现自定义tabbar"><a href="#小程序中如何实现自定义tabbar" class="header-anchor">#</a> 小程序中如何实现自定义<code>tabBar</code></h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>在<code>app.json</code>里面的<code>tabBar</code>配置里面设置<code>custom:true</code></li> <li>在根目录创建<code>custom-tab-bar</code>文件夹，里面创建一个<code>index</code>的组件，自己实现逻辑</li></ul></details> <h3 id="小程序如何实现分包-好处"><a href="#小程序如何实现分包-好处" class="header-anchor">#</a> 小程序如何实现分包，好处</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li><p>在<code>app.json</code>里面配置<code>subpackages</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token string-property property">"subpackages"</span><span class="token operator">:</span><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">"name"</span><span class="token operator">:</span><span class="token string">"别称"</span><span class="token punctuation">,</span>
<span class="token string-property property">"root"</span><span class="token operator">:</span><span class="token string">"分包文件夹名称"</span><span class="token punctuation">,</span>
<span class="token string-property property">"pages"</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 分包的页面路径</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string-property property">"name"</span><span class="token operator">:</span><span class="token string">"别称2"</span><span class="token punctuation">,</span>
<span class="token string-property property">"root"</span><span class="token operator">:</span><span class="token string">"分包文件夹名称2"</span><span class="token punctuation">,</span>
<span class="token string-property property">"pages"</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 分包的页面路径</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</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></li> <li><p>好处：</p> <ul><li>小程序单包体积不允许超过<code>2M</code>，所有分包加主包一起不可以超过<code>20M</code></li> <li>代码分工协作方便，维护方便</li></ul></li></ul></details> <h3 id="微信登录如何实现"><a href="#微信登录如何实现" class="header-anchor">#</a> 微信登录如何实现</h3> <details class="custom-block details"><summary>点击查看答案</summary> <p><img src="assets/image-20220419193423034.png" alt="image-20220419193423034"></p> <ol><li>我们调用<code>wx.login</code>获取登录<code>code</code>码； 及调用<code>wx.getUserProfile</code>获取用户资料及加密信息</li> <li>发送登录请求给后端服务器，提交code码、用户资料和加密信息；后端验证后返回<code>token</code>及用户资料给我们</li></ol></details> <h3 id="小程序开发需要注意什么"><a href="#小程序开发需要注意什么" class="header-anchor">#</a> 小程序开发需要注意什么</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>开发的时候必须要把自己加为开发者</li> <li>开发阶段要配置域名不校验； 上线阶段要将代码中的域名更换并将域名（带https）的配置到后台的域名列表中</li> <li>体积控制（注意分包）</li> <li>做支付需要小程序的ID的主体是企业，并且开通微信支付商户功能。</li></ul></details> <h3 id="小程序里有跨域吗"><a href="#小程序里有跨域吗" class="header-anchor">#</a> 小程序里有跨域吗？</h3> <details class="custom-block details"><summary>点击查看答案</summary> <ul><li>没有； 小程序发起网络请求是让微信客户端期发起的，所以不存在所谓同源策略，没有跨域问题</li></ul></details></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/front-end-dictionary/assets/js/app.88ed2bc2.js" defer></script><script src="/front-end-dictionary/assets/js/2.22fea77d.js" defer></script><script src="/front-end-dictionary/assets/js/22.44f2db92.js" defer></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手