-
Notifications
You must be signed in to change notification settings - Fork 0
/
mini-program.html
391 lines (377 loc) · 38.6 KB
/
mini-program.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>微信小程序知识点（一） | 小李の博客</title><meta name="keywords" content="小程序,前端"><meta name="author" content="Pride_Lee"><meta name="copyright" content="Pride_Lee"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="微信小程序知识点">
<meta property="og:type" content="article">
<meta property="og:title" content="微信小程序知识点（一）">
<meta property="og:url" content="https://lhx.zzux.com/mini-program.html">
<meta property="og:site_name" content="小李の博客">
<meta property="og:description" content="微信小程序知识点">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s1.ax1x.com/2022/07/05/jNqUyD.png">
<meta property="article:published_time" content="2022-11-27T11:45:28.000Z">
<meta property="article:modified_time" content="2022-11-28T16:54:32.593Z">
<meta property="article:author" content="Pride_Lee">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="小程序">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s1.ax1x.com/2022/07/05/jNqUyD.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://lhx.zzux.com/mini-program"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="google-site-verification" content="gHN_afDedvo00U6YhKTblmdcWb6sw0-3uRkGD1xwr28"/><meta name="baidu-site-verification" content="code-kFbZe5nv4p"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"limitCount":50,"languages":{"author":"作者: Pride_Lee","link":"链接: ","source":"来源: 小李の博客","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
lightbox: 'fancybox',
Snackbar: undefined,
source: {
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
}
},
isPhotoFigcaption: false,
islazyload: false,
isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '微信小程序知识点（一）',
isPost: true,
isHome: false,
isHighlightShrink: false,
isToc: true,
postUpdate: '2022-11-29 00:54:32'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><meta name="generator" content="Hexo 6.2.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://s1.ax1x.com/2022/07/05/jNgtYj.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">19</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">13</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">14</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间线</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-heartbeat"></i><span> 清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/Gallery/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://s1.ax1x.com/2022/07/05/jNqUyD.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">小李の博客</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间线</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-heartbeat"></i><span> 清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/Gallery/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">微信小程序知识点（一）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-11-27T11:45:28.000Z" title="发表于 2022-11-27 19:45:28">2022-11-27</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-28T16:54:32.593Z" title="更新于 2022-11-29 00:54:32">2022-11-29</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>4分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="微信小程序知识点（一）"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h2><h3 id="项目的基本组成结构"><a href="#项目的基本组成结构" class="headerlink" title="项目的基本组成结构"></a>项目的基本组成结构</h3><p><img src="https://s1.ax1x.com/2022/11/28/zaDSiR.png" alt="根目录文件"></p>
<h3 id="小程序页面的组成部分"><a href="#小程序页面的组成部分" class="headerlink" title="小程序页面的组成部分"></a>小程序页面的组成部分</h3><p>小程序官方建议把所有小程序的页面，都存放在==pages目录==中，以单独的文件夹存在，如图</p>
<p><img src="https://s1.ax1x.com/2022/11/28/zaDCz6.png" alt="页面文件"></p>
<h2 id="小程序的配置文件"><a href="#小程序的配置文件" class="headerlink" title="小程序的配置文件"></a>小程序的配置文件</h2><blockquote>
<p>JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目中也不例外：通过不同的 .Json 配置文件，可以对小程序项目进行不同级别的配置。</p>
</blockquote>
<p>小程序项目中有4种配置文件，分别是：</p>
<ol>
<li><p>项目根目录中的 app.json 配置文件</p>
<blockquote>
<p>app.json是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。</p>
<p><img src="https://s1.ax1x.com/2022/11/28/zaDZod.png" alt="app.json"></p>
</blockquote>
</li>
<li><p>项目根目录中的 project.config.json 配置文件</p>
<blockquote>
<p>project.config.json用来记录我们对小程序开发工具所做的个性化配置</p>
<ul>
<li>setting 中保存了编译相关的配置</li>
<li>projectname 中保存的是项目名称(不影响小程序的名称)</li>
<li>appid 中保存的是小程序的账号ID</li>
</ul>
</blockquote>
</li>
<li><p>项目根目录中的 sitemap.json 配置文件</p>
<blockquote>
<p>这是微信开放的小程序内搜索，类似于PC网页的SEO。sitemap.json文件用于配置小程序页面是否允许微信索引。</p>
<p>默认是所有页面都允许被索引，如果要设置所有页面都不允许索引，把配置文件中 “action” : “allow” 改为 ”disallow“即可。</p>
</blockquote>
</li>
<li><p>每个页面文件夹中的.json配置文件</p>
<blockquote>
<p>小程序的每个页面都可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json 的 window 中相同的配置项。</p>
<p>如下图的例子，我们页面的 json 配置就覆盖了根目录的 app.json 配置</p>
<p><img src="https://s1.ax1x.com/2022/11/28/zaDQQf.png" alt="页面json"></p>
</blockquote>
</li>
</ol>
<h2 id="新建小程序页面"><a href="#新建小程序页面" class="headerlink" title="新建小程序页面"></a>新建小程序页面</h2><p>只需要在 app.json –> pages 中新增页面的存放路径，小程序开发者工具可以帮我们自动创建对应的页面文件。如下图：</p>
<p><img src="https://s1.ax1x.com/2022/11/28/zaDGwQ.png" alt="新建页面"></p>
<h2 id="修改项目首页"><a href="#修改项目首页" class="headerlink" title="修改项目首页"></a>修改项目首页</h2><p>小程序的首页默认是 app.json –> pages 数组中的第一个，想要修改项目的首页，我们只需要调整路径的先后顺序即可。比如我们想把刚创建的 home 作为项目首页的话就可以把 home 的路径放在第一行即可。</p>
<p><img src="https://s1.ax1x.com/2022/11/28/zaDJoj.png" alt="修改首页"></p>
<h2 id="WXML和HTML的区别"><a href="#WXML和HTML的区别" class="headerlink" title="WXML和HTML的区别"></a>WXML和HTML的区别</h2><ul>
<li>标签名不同</li>
</ul>
<blockquote>
<p>HTML： div、 span、img、 a</p>
<p>WXML：view、text、image、navigator</p>
</blockquote>
<ul>
<li>属性节点不同</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">HTML: <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>超链接<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"></span><br><span class="line">WXML: <span class="tag"><<span class="name">navigator</span> <span class="attr">url</span>=<span class="string">"/pages/home/home"</span>></span><span class="tag"></<span class="name">navigator</span>></span></span><br></pre></td></tr></table></figure>
<ul>
<li>提供了类似vue中的模板语法</li>
</ul>
<blockquote>
<p>数据绑定</p>
<p>列表渲染</p>
<p>条件渲染</p>
</blockquote>
<h2 id="WXSS和CSS的区别"><a href="#WXSS和CSS的区别" class="headerlink" title="WXSS和CSS的区别"></a>WXSS和CSS的区别</h2><ul>
<li>新增了rpx尺寸单位</li>
</ul>
<blockquote>
<p>CSS中需要手动进行像素单位换算，如rem</p>
<p>WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上，小程序会自动进行换算</p>
</blockquote>
<ul>
<li>提供了全局的样式和局部样式</li>
</ul>
<blockquote>
<p>项目根目录中的app.wxss会作用于所有小程序页面</p>
<p>局部页面的.wxss样式仅对当前页面生效</p>
</blockquote>
<ul>
<li>WXSS仅支持部分CSS选择器</li>
</ul>
<blockquote>
<p>.class和#id</p>
<p>element</p>
<p>并集选择器、后代选择器</p>
<p>::after和::before等伪类选择器</p>
</blockquote>
<h2 id="小程序JS逻辑交互"><a href="#小程序JS逻辑交互" class="headerlink" title="小程序JS逻辑交互"></a>小程序JS逻辑交互</h2><ul>
<li>小程序中.js文件的分类</li>
</ul>
<blockquote>
<p>小程序中的JS文件分为三大类，分别是：</p>
</blockquote>
<ol>
<li>app.js –>是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序</li>
<li>页面的.js文件 –>是页面的入口文件，通过调用Page()函数来创建并运行页面</li>
<li>普通的.js文件 –>是普通的功能模块文件，用来封装公共的函数或者属性供页面使用</li>
</ol>
<h2 id="小程序的启动步骤"><a href="#小程序的启动步骤" class="headerlink" title="小程序的启动步骤"></a>小程序的启动步骤</h2><ol>
<li>把小程序的代码包下载到本地</li>
<li>解析app.json全局配置文件</li>
<li>执行app.js小程序入口文件，调用App()创建小程序实例</li>
<li>渲染小程序首页</li>
<li>小程序启动完成</li>
</ol>
<h2 id="小程序页面渲染过程"><a href="#小程序页面渲染过程" class="headerlink" title="小程序页面渲染过程"></a>小程序页面渲染过程</h2><ol>
<li>加载解析页面的.json配置文件</li>
<li>加载页面的.wxml模板和.wxss样式</li>
<li>执行页面的.js文件，调用Page()创建页面实例</li>
<li>页面渲染完成</li>
</ol>
<h2 id="小程序组件"><a href="#小程序组件" class="headerlink" title="小程序组件"></a>小程序组件</h2><p>小程序中的组件也是由宿主环境提供的，主要分为九大类</p>
<ol>
<li><p>视图容器</p>
<details>
<summary>展开/收起</summary>
<p>
view------------------------------->普通视图区域,类似div，是一个块级元素
</p>
<p>
scroll-view------------------------>可滚动的视图区域，常用来实现滚动列表
</p>
<p>
swiper和swiper-item---------------->轮播图容器组件 和 轮播图item组件
</p>
</details>
</li>
<li><p>基础内容</p>
<details>
<summary>展开/收起</summary>
<h4>text</h4>
<p>
文本组件，类似html中的span，行内元素，加selectable属性支持长按选中操作
</p>
<h4>rich-text</h4>
<p>
富文本组件，通过nodes属性节点支持把HTML字符串渲染成WXML结构
</p>
<h4>button</h4>
<p>
按钮，功能比HTML的button丰富，通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
</p>
<h4>image</h4>
<p>
图片组件，image组件默认宽度约300px，高度约240px
</p>
<img src="https://s1.ax1x.com/2022/11/28/za0whq.png">
<h4>navigator</h4>
<p>
页面导航组件，类似于HTML中的a链接
</p>
</details>
</li>
<li><p>表单组件</p>
</li>
<li><p>导航组件</p>
</li>
<li><p>媒体组件</p>
</li>
<li><p>map地图组件</p>
</li>
<li><p>canvas画布组件</p>
</li>
<li><p>开放能力</p>
</li>
<li><p>无障碍访问</p>
</li>
</ol>
<h2 id="小程序API"><a href="#小程序API" class="headerlink" title="小程序API"></a>小程序API</h2><p>小程序官方把API分为了如下三大类</p>
<ol>
<li>事件监听API<ul>
<li>特点：以 on 开头，用来监听某些事件的触发</li>
<li>比如：wx.onWindowResize(function callback)监听窗口尺寸变化事件（wx相当于浏览器里的window）</li>
</ul>
</li>
<li>同步API<ul>
<li>特点1：以Sync结尾的API都是同步API</li>
<li>特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常</li>
<li>比如：wx.setStorageSync(‘key’,’value’)向本地存储中写入内容</li>
</ul>
</li>
<li>异步API<ul>
<li>特点：类似于jQuery 中的 $.ajax(options)函数，需要通过success、fail、complete接收调用的结果</li>
<li>比如：wx.request()发起网络请求，通过success回调函数接收数据</li>
</ul>
</li>
</ol>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://lhx.zzux.com">Pride_Lee</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://lhx.zzux.com/mini-program.html">https://lhx.zzux.com/mini-program.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://lhx.zzux.com" target="_blank">小李の博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a></div><div class="post_share"><div class="social-share" data-image="https://s1.ax1x.com/2022/07/05/jNqUyD.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src="/img/wechat.jpg" alt="wechat"/></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="/img/alipay.jpg" alt="alipay"/></a><div class="post-qr-code-desc">alipay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/mini-program-2.html"><img class="prev-cover" src="https://s1.ax1x.com/2022/07/05/jNjg4s.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">微信小程序知识点（二）</div></div></a></div><div class="next-post pull-right"><a href="/chrome-cache.html"><img class="next-cover" src="https://s1.ax1x.com/2022/07/25/jvWCsH.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">浏览器的缓存机制</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/mini-program-2.html" title="微信小程序知识点（二）"><img class="cover" src="https://s1.ax1x.com/2022/07/05/jNjg4s.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-28</div><div class="title">微信小程序知识点（二）</div></div></a></div><div><a href="/fe-css.html" title="前端面试题--css篇"><img class="cover" src="https://s1.ax1x.com/2022/07/22/jLbI8P.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-07-21</div><div class="title">前端面试题--css篇</div></div></a></div><div><a href="/fe-mianshi.html" title="前端综合面试题"><img class="cover" src="https://s1.ax1x.com/2022/07/05/jNjg4s.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-09-25</div><div class="title">前端综合面试题</div></div></a></div><div><a href="/fe-bfc.html" title="什么是BFC？它的作用是什么以及怎么创建BFC区域"><img class="cover" src="https://s1.ax1x.com/2022/07/22/jOrC59.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-22</div><div class="title">什么是BFC？它的作用是什么以及怎么创建BFC区域</div></div></a></div><div><a href="/FE-html.html" title="前端面试题--html篇"><img class="cover" src="https://s1.ax1x.com/2022/07/21/jqyBjK.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-07-20</div><div class="title">前端面试题--html篇</div></div></a></div><div><a href="/data-type.html" title="js数据类型和数据类型检测"><img class="cover" src="https://s1.ax1x.com/2022/07/05/jNqUyD.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-07-26</div><div class="title">js数据类型和数据类型检测</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div><div id="comment-switch"><span class="first-comment">Valine</span><span class="switch-btn"></span><span class="second-comment">Livere</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div><div><div id="lv-container" data-id="city" data-uid="MTAyMC81Njc0OS8zMzIxMw=="></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://s1.ax1x.com/2022/07/05/jNgtYj.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Pride_Lee</div><div class="author-info__description">99年的Fe(前端)小菜鸡一枚~</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">19</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">13</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">14</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Pride-lee"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/Pride-lee" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="http://wpa.qq.com/msgrd?v=3&uin=211977992&site=qq&menu=yes" target="_blank" title="qq"><i class="fa-brands fa-qq"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">99年程序猿，兴趣爱好多，代码、软件硬件、智能家居、穿越机甚至钓鱼，喜欢一切有意思的东西❤️🧡💛💚💙💜</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84"><span class="toc-number">1.</span> <span class="toc-text">项目结构</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%BB%84%E6%88%90%E7%BB%93%E6%9E%84"><span class="toc-number">1.1.</span> <span class="toc-text">项目的基本组成结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B5%E9%9D%A2%E7%9A%84%E7%BB%84%E6%88%90%E9%83%A8%E5%88%86"><span class="toc-number">1.2.</span> <span class="toc-text">小程序页面的组成部分</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">2.</span> <span class="toc-text">小程序的配置文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B0%E5%BB%BA%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B5%E9%9D%A2"><span class="toc-number">3.</span> <span class="toc-text">新建小程序页面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E9%A1%B9%E7%9B%AE%E9%A6%96%E9%A1%B5"><span class="toc-number">4.</span> <span class="toc-text">修改项目首页</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#WXML%E5%92%8CHTML%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">5.</span> <span class="toc-text">WXML和HTML的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#WXSS%E5%92%8CCSS%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.</span> <span class="toc-text">WXSS和CSS的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8FJS%E9%80%BB%E8%BE%91%E4%BA%A4%E4%BA%92"><span class="toc-number">7.</span> <span class="toc-text">小程序JS逻辑交互</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%90%AF%E5%8A%A8%E6%AD%A5%E9%AA%A4"><span class="toc-number">8.</span> <span class="toc-text">小程序的启动步骤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B"><span class="toc-number">9.</span> <span class="toc-text">小程序页面渲染过程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6"><span class="toc-number">10.</span> <span class="toc-text">小程序组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link"><span class="toc-number">10.0.1.</span> <span class="toc-text">text</span></a></li><li class="toc-item toc-level-4"><a class="toc-link"><span class="toc-number">10.0.2.</span> <span class="toc-text">rich-text</span></a></li><li class="toc-item toc-level-4"><a class="toc-link"><span class="toc-number">10.0.3.</span> <span class="toc-text">button</span></a></li><li class="toc-item toc-level-4"><a class="toc-link"><span class="toc-number">10.0.4.</span> <span class="toc-text">image</span></a></li><li class="toc-item toc-level-4"><a class="toc-link"><span class="toc-number">10.0.5.</span> <span class="toc-text">navigator</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8FAPI"><span class="toc-number">11.</span> <span class="toc-text">小程序API</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/jd-yangmao.html" title="全自动薅JD羊毛"><img src="https://s1.ax1x.com/2022/07/05/jNqUyD.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="全自动薅JD羊毛"/></a><div class="content"><a class="title" href="/jd-yangmao.html" title="全自动薅JD羊毛">全自动薅JD羊毛</a><time datetime="2023-03-12T14:45:28.000Z" title="发表于 2023-03-12 22:45:28">2023-03-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/mini-program-2.html" title="微信小程序知识点（二）"><img src="https://s1.ax1x.com/2022/07/05/jNjg4s.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="微信小程序知识点（二）"/></a><div class="content"><a class="title" href="/mini-program-2.html" title="微信小程序知识点（二）">微信小程序知识点（二）</a><time datetime="2022-11-28T12:13:10.000Z" title="发表于 2022-11-28 20:13:10">2022-11-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/mini-program.html" title="微信小程序知识点（一）"><img src="https://s1.ax1x.com/2022/07/05/jNqUyD.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="微信小程序知识点（一）"/></a><div class="content"><a class="title" href="/mini-program.html" title="微信小程序知识点（一）">微信小程序知识点（一）</a><time datetime="2022-11-27T11:45:28.000Z" title="发表于 2022-11-27 19:45:28">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/chrome-cache.html" title="浏览器的缓存机制"><img src="https://s1.ax1x.com/2022/07/25/jvWCsH.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="浏览器的缓存机制"/></a><div class="content"><a class="title" href="/chrome-cache.html" title="浏览器的缓存机制">浏览器的缓存机制</a><time datetime="2022-09-23T12:20:28.000Z" title="发表于 2022-09-23 20:20:28">2022-09-23</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fe-vuex.html" title="什么是Vuex?"><img src="https://s1.ax1x.com/2022/07/05/jNjg4s.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="什么是Vuex?"/></a><div class="content"><a class="title" href="/fe-vuex.html" title="什么是Vuex?">什么是Vuex?</a><time datetime="2022-07-23T10:06:04.000Z" title="发表于 2022-07-23 18:06:04">2022-07-23</time></div></div></div></div></div></div></main><footer id="footer" style="background: rgb(252,118,153)radial-gradient(circle, rgba(252,118,153,1) 0%, rgba(139,216,238,1) 100%);"><div id="footer-wrap"><div class="copyright">©2020 - 2023 By Pride_Lee</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
endLoading: () => {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>function loadValine () {
function initValine () {
const valine = new Valine(Object.assign({
el: '#vcomment',
appId: 'tLdhKVV1NoSACqDtL4PqycT5-gzGzoHsz',
appKey: 'V6GdVccl5jFRALt0jxwvRWNO',
avatar: 'monsterid',
serverURLs: '',
emojiMaps: "",
path: window.location.pathname,
visitor: false
}, null))
}
if (typeof Valine === 'function') initValine()
else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}
if ('Valine' === 'Valine' || !false) {
if (false) btf.loadComment(document.getElementById('vcomment'),loadValine)
else setTimeout(loadValine, 0)
} else {
function loadOtherComment () {
loadValine()
}
}</script><script>function loadLivere () {
if (typeof LivereTower === 'object') {
window.LivereTower.init()
}
else {
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
}
}
if ('Valine' === 'Livere' || !false) {
if (false) btf.loadComment(document.getElementById('lv-container'), loadLivere)
else loadLivere()
}
else {
function loadOtherComment () {
loadLivere()
}
}</script></div><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="true"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>