微信小程序开发（1）

路过一下 發表於 2021-8-23 16:19:00

<h1 id="微信小程序开发1">微信小程序开发（1）</h1>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>微信小程序开发（1）</li><li>代码结构与基本配置<ul><li>代码结构与基本配置</li><li>基本HelloWorld创建</li><li>开发框架——基本构成</li></ul></li><li>微信开发者工具<ul><li>版本控制</li></ul></li><li>WXML<ul><li>wxml语法<ul><li>语法</li><li>案例</li></ul></li><li>wxml特性<ul><li>数据绑定<ul><li>案例<ul><li>1.文本内容绑定</li><li>2.属性绑定</li><li>3.运算符绑定</li></ul></li><li>view 标签属性</li></ul></li><li>列表渲染<ul><li>案例</li></ul></li><li>条件渲染<ul><li>案例</li></ul></li><li>模板及引用<ul><li>案例<ul><li>1.模板引用</li><li>2.文件引用<ul><li>import</li><li>include</li></ul></li></ul></li></ul></li></ul></li></ul></li><li>WXSS<ul><li>wxss特性<ul><li>响应式像素</li><li>样式<ul><li>案例<ul><li>外联样式导入</li><li>内联样式</li></ul></li></ul></li><li>选择器</li></ul></li></ul></li><li>JavaScript<ul><li>JavaScript介绍</li><li>小程序JavaScript实现<ul><li>不同环境中的 JavaScript 对比</li><li>小程序宿主环境差异</li></ul></li></ul></li><li>WXS<ul><li>WXS介绍</li><li>WXS 特性<ul><li>模块</li><li>变量</li><li>注释</li><li>运算符</li><li>数据类型</li><li>基础类库</li></ul></li></ul></li><li>MINA 框架</li><li>小程序运行机制<ul><li>启动<ul><li>热启动</li><li>冷启动</li></ul></li><li>加载<ul><li>CDN</li></ul></li></ul></li><li>生命周期<ul><li>应用生命周期</li><li>页面生命周期</li></ul></li><li>页面路由</li></ul></div><p></p>
<hr>
<h1 id="代码结构与基本配置">代码结构与基本配置</h1>
<h2 id="代码结构与基本配置-1">代码结构与基本配置</h2>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210714135241239.png" alt="image-20210714135241239" loading="lazy"></p>
<blockquote>
<ul>
<li>App.js注册一个微信小程序</li>
<li>App.json小程序全局配置（网络请求的超时时间、窗口表现、各个页面的注册路径</li>
<li>App.wxss 小程序全局样式</li>
<li>Project.config.json保存微信开发者工具的配置信息，重新安装工具时可用</li>
<li>Pages 所有页面，每个页面最多由四个文件组成：</li>
</ul>
<blockquote>
<ul>
<li>js：处理页面逻辑和一些数据交互</li>
<li>json：页面配置信息</li>
<li>wxml：展示页面元素和内容</li>
<li>wxss：设置页面元素样式</li>
</ul>
</blockquote>
<ul>
<li>Utils<br>
Util.js存放工具函数（达到代码复用的目的）</li>
</ul>
</blockquote>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210714140810403.png" alt="image-20210714140810403" loading="lazy"></p>
<h2 id="基本helloworld创建">基本HelloWorld创建</h2>
<blockquote>
<ul>
<li>
<p>App.js:注册小程序的应用，调用App()函数，传入Object类型参数 App({})</p>
</li>
<li>
<p>App.json:注册小程序所有页面的路径，通过pages属性，值为list类型，list中是所有页面的路径</p>
</li>
<li>
<pre><code class="language-js">{
"pages": [
]
}
</code></pre>
</li>
<li></li>
<li>
<p>Helloworld.wxml:描述页面的内容，view标签。<view>Helloworld</view></p>
</li>
<li>
<p>Helloworld.js:注册小程序页面，类似于app.js,通过page()函数,传入object类型参数（页面的生命周期钩子、时间处理函数、页面的默认数据等等）</p>
</li>
<li>
<p>Page({})</p>
</li>
<li>
<p>Helloworld.json:helloworld的页面一些配置</p>
</li>
<li>
<p>{}</p>
</li>
<li>
<p>Helloworld.wxss:描述小程序页面的样式</p>
</li>
</ul>
</blockquote>
<h2 id="开发框架基本构成">开发框架——基本构成</h2>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210714141404199.png" alt="image-20210714141404199" loading="lazy"></p>
<h1 id="微信开发者工具">微信开发者工具</h1>
<h2 id="版本控制">版本控制</h2>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210714141444060.png" alt="image-20210714141444061" loading="lazy"></p>
<ul>
<li>console：打印小程序页面调试log信息</li>
<li>sources：所有脚本文件，可进行断点调试</li>
<li>network：展示各个网络请求的状态信息、所请求资源的响应数据</li>
</ul>
<h1 id="wxml">WXML</h1>
<h2 id="wxml语法">wxml语法</h2>
<p>wxml（weixin markup language）是框架设计的一套标签语言，结合组件、 wxs和时间系统，可以构建处页面的结构。</p>
<h3 id="语法">语法</h3>
<blockquote>
<p><标签名属性名="属性名1" 属性名="属性名2" …></p>
<p>//属性值大小写敏感 …</p>
<p></标签名></p>
</blockquote>
<h3 id="案例">案例</h3>
<pre><code class="language-xml">
<view class="classname" data-name="A">
Hello woeld!
<view>
Hello China!
</view>
</view>
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210714141922687.png" alt="image-20210714141922687" loading="lazy"></p>
<blockquote>
<p>注意：</p>
<p>① view标签必须严格闭合</p>
<p>② 属性值大小写敏感</p>
</blockquote>
<h2 id="wxml特性">wxml特性</h2>
<blockquote>
<p>四个主要特性：数据绑定、列表渲染、条件渲染、模板引用</p>
</blockquote>
<h3 id="数据绑定">数据绑定</h3>
<blockquote>
<p>实现对数据的实时更新，使我们拥有动态改变页面的能力</p>
</blockquote>
<h4 id="案例-1">案例</h4>
<h5 id="1文本内容绑定">1.文本内容绑定</h5>
<pre><code class="language-xml">
<view>
<text>{{message}}</text>
</view>
</code></pre>
<blockquote>
<p>{{Mustache}} 绑定语法，把变量包起来</p>
</blockquote>
<pre><code class="language-js">//index.js
Page({
data:{
   message:"Hello world"
}
})
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210715170801158.png" alt="image-20210715170801158" loading="lazy"></p>
<h5 id="2属性绑定">2.属性绑定</h5>
<pre><code class="language-xml">
<view>
<text data-name="{{theName}}">
</text>
</view>
</code></pre>
<blockquote>
<p>注意：所有的组件和属性都必须是小写</p>
</blockquote>
<pre><code class="language-js">//index.js
Page({
data:{
   theName:"Jack"
}
})
</code></pre>
<p>页面渲染结果：</p>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210715172338793.png" alt="image-20210715172338793" loading="lazy"></p>
<h5 id="3运算符绑定">3.运算符绑定</h5>
<pre><code class="language-xml">
<view hidden="{{flag ? true : false}}">
Hidden
</view>
</code></pre>
<blockquote>
<p>hidden属性：值为 true 时隐藏 view 标签内容</p>
</blockquote>
<pre><code class="language-js">//index.js
Page({
data:{
   flag: false
}
})
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210715172851026.png" alt="image-20210715172851026" loading="lazy"></p>
<h4 id="view-标签属性">view 标签属性</h4>
<table>
<thead>
<tr>
<th style="text-align: left">属性名</th>
<th>类型</th>
<th>描述</th>
<th>注解</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">id</td>
<td>String</td>
<td>组件的唯一标示</td>
<td>保持整个页面唯一</td>
</tr>
<tr>
<td style="text-align: left">class</td>
<td>String</td>
<td>组件的样式类</td>
<td>在对应的 wxss 中定义的样式类，静态设置属性</td>
</tr>
<tr>
<td style="text-align: left">style</td>
<td>String</td>
<td>组件的内联样式</td>
<td>可以动态设置的内联样式</td>
</tr>
<tr>
<td style="text-align: left">hidden</td>
<td>Boolean</td>
<td>组件是否隐藏</td>
<td>默认值 false ，所有组件默认显示</td>
</tr>
<tr>
<td style="text-align: left">data-*</td>
<td>Any</td>
<td>自定义属性</td>
<td>组件上触发的事件时，会发送给事件处理函数</td>
</tr>
<tr>
<td style="text-align: left">bind* / catch*</td>
<td>EventHandler</td>
<td>组件的事件</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="列表渲染">列表渲染</h3>
<h4 id="案例-2">案例</h4>
<pre><code class="language-xml">
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
<view>{{index}}:{{item.name}}</view>
</block>
</view>
</code></pre>
<blockquote>
<ul>
<li>用 wx:for 绑定数组，从而使用列表渲染特性；</li>
<li>index 变量：当前元素在数组中的下标</li>
<li>item 变量：当前元素</li>
<li>wx:key 列表中的唯一标识符，若是静态列表，或不需要维护列表状态，可忽略该属性</li>
<li>block 标签：不是组件，而是包装元素，在页面渲染时不会被渲染</li>
</ul>
</blockquote>
<pre><code class="language-js">//index.js
Page({
data:{
   items:[
{name:"商品A"}，
{name:"商品B"}，
{name:"商品C"}，
{name:"商品D"}，
{name:"商品A"}
   ]
}
})
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210716113149622.png" alt="image-20210716113149622" loading="lazy"></p>
<h3 id="条件渲染">条件渲染</h3>
<h4 id="案例-3">案例</h4>
<pre><code class="language-xml">
<view>今天吃什么？</view>
<view wx:if="{{condition === 1}}">
饺子
</view>
<view wx:elif="{{condition === 2}}">
米饭
</view>
<view wx:else>
面食
</view>
</code></pre>
<blockquote>
<ul>
<li>condition 传入 1-3 随机整数</li>
<li>hidden 始终渲染，wx:if 在切换代码块时局部渲染；相比之下，hidden 有更高的初始化渲染消耗，wx:if 有更高的切换消耗，因此，当元素需要频繁切换显示时，使用 hidden 属性更好。</li>
</ul>
</blockquote>
<pre><code class="language-js">//index.js
Page({
data:{
   condition: Math.floor(Math.random()*3+1)
}
})
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210716122444804.png" alt="image-20210716122444804" loading="lazy"></p>
<h3 id="模板及引用">模板及引用</h3>
<blockquote>
<p>在模板中自定义代码片段，在不同的地方调用或引用</p>
</blockquote>
<h4 id="案例-4">案例</h4>
<h5 id="1模板引用">1.模板引用</h5>
<pre><code class="language-xml">
<template name="tempItem">
<view>
<view>收件人：{{name}}</view>
   <view>联系方式：{{phone}}</view>
   <view>地址：{{address}}</view>
</view>
</template>

<template is="template" data="{{...item}}"></template>
</code></pre>
<blockquote>
<ul>
<li>is 属性：进行动态绑定模板</li>
<li>data 属性：向模板中传入数据信息，模板拥有自己的作用域，只能通过 data 属性传值</li>
</ul>
</blockquote>
<pre><code class="language-js">//index.js
Page({
data:{
   item:{
         name:"张三",
         phone:"11122223333",
         address:"中国"
   }
}
})
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210716123731967.png" alt="image-20210716123731967" loading="lazy"></p>
<h5 id="2文件引用">2.文件引用</h5>
<h6 id="import">import</h6>
<ul>
<li>import 只能引用模板文件中的模板内容块</li>
</ul>
<pre><code class="language-xml">
<import src="a.wxml"></import>
<template is="a"></template>
</code></pre>
<blockquote>
<ul>
<li>src 属性：声明模板文件路径</li>
<li>is 属性：声明所引用的模板名</li>
</ul>
</blockquote>
<pre><code class="language-xml">
<view>Hello world</view>
<template name="a">
Hello,World!
</template>
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210716124755885.png" alt="image-20210716124755885" loading="lazy"></p>
<ul>
<li>import 作用域：只能引用目标文件中定义的 template 模板，如果目标文件中还嵌套了其他文件的 template 模板，那么其他文件中的模板就不会被引用</li>
</ul>
<pre><code class="language-xml">
<import src="a.wxml"></import>
<template is="a"></template>
</code></pre>
<pre><code class="language-xml">
<import src="b.wxml"></import>
<template name="a">
This is a.wxml
</template>
<template is="b"></template>
</code></pre>
<pre><code class="language-xml">
<template name="b">
This is b.wxml
</template>
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210716125903447.png" alt="image-20210716125903447" loading="lazy"></p>
<h6 id="include">include</h6>
<p>include 是把目标文件内除了模板代码块之外的所有代码都引入，相当于将代码拷贝到了 include 的位置</p>
<pre><code class="language-xml">
<include src="a.wxml"></include>
<template is="a"></template>
</code></pre>
<pre><code class="language-xml">
<template name="a">
<view>
This is a.wxml
</view>
</template>
<view>Hello,world</view>
</code></pre>
<p>运行之后可以发现，并没有将 a.wxml 文件中的 a 模板渲染出来。</p>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210716130432616.png" alt="image-20210716130432616" loading="lazy"></p>
<h1 id="wxss">WXSS</h1>
<p>WXSS(WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式，与 Web 开发中的 CSS(Cascading Style Sheets) 极为相似，为了适合小程序的开发， wxss 对 css 做了一定的修改和补充。</p>
<blockquote>
<ul>
<li>尺寸单位 rpx</li>
<li>样式导入</li>
<li>内联样式</li>
<li>选择器</li>
</ul>
</blockquote>
<h2 id="wxss特性">wxss特性</h2>
<h3 id="响应式像素">响应式像素</h3>
<ul>
<li>
<p>设备像素（device pixels）：设备屏幕的像素点，即屏幕分辨率</p>
</li>
<li>
<p>css 像素（css pixels）：css样式代码中所使用的逻辑像素</p>
</li>
<li>
<p>PPI/DPI（pixel per inch）：每英寸的像素数，数值越大，表示显示屏能以越高的密度显示图像，计算公式如下：</p>
</li>
</ul>
<p></p><div class="math display">\[屏幕分辨率：x * y
\]</div><p></p><p></p><div class="math display">\[PPI = √（x² + y²) / 屏幕尺寸
\]</div><p></p><p> 以 iPhone6 为例：</p>
<p></p><div class="math display">\[PPI = √（750² + 1334²) / 4.7 =325.6
\]</div><p></p><p> iPhone6 的屏幕尺寸为 4.7 英寸，计算得出 PPI=325.6，约等于官方值 326 。</p>
<ul>
<li>
<p>DPR（device pixel Ratio）：指手机在某一方向上的设备像素与 css 像素之比</p>
</li>
<li>
<p>rpx ：微信团队规定手机屏幕宽度为 750rpx ，从而可以根据屏幕宽度实现自适应</p>
</li>
</ul>
<h3 id="样式">样式</h3>
<h4 id="案例-5">案例</h4>
<h5 id="外联样式导入">外联样式导入</h5>
<pre><code class="language-xml">
<view class="container">
Hello,world!
</view>
</code></pre>
<pre><code class="language-css">/** index.wxss **/
@import './assets.wxss';
.container {
color: red;
}
</code></pre>
<pre><code class="language-css">/** assets.wxss **/
.container {
border: 1px solid #000;
}
</code></pre>
<blockquote>
<p>注意：样式文件执行顺序为”从上到下，从左到右“，若将 index.wxss 中 container 的 border 颜色设置为 yellow，那么就会覆盖 assets.wxss 中的border 设置</p>
</blockquote>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210716141625493.png" alt="image-20210716141625493" loading="lazy"></p>
<h5 id="内联样式">内联样式</h5>
<pre><code class="language-xml">
<view style="width:500rpx; height:30px; background-color:{{colorValue}};">
Hello,world!
</view>
</code></pre>
<blockquote>
<ul>
<li>class ：静态样式</li>
<li>style ：动态样式</li>
</ul>
</blockquote>
<pre><code class="language-js">//index.js
Page({
data:{
   colorValue: 'red'
}
})
</code></pre>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210716142445697.png" alt="image-20210716142445697" loading="lazy"></p>
<h3 id="选择器">选择器</h3>
<table>
<thead>
<tr>
<th>选择器</th>
<th>样例</th>
<th>样例描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>.class</td>
<td>.intro</td>
<td>选择所有拥有 class="intro" 的组件</td>
</tr>
<tr>
<td>#id</td>
<td>#firstname</td>
<td>选择拥有 id="firstname" 的组件</td>
</tr>
<tr>
<td>element</td>
<td>view</td>
<td>选择所有 view 组件</td>
</tr>
<tr>
<td>element, element</td>
<td>view, checkbox</td>
<td>选择所有文档的 view 组件和所有的 checkbox 组件</td>
</tr>
<tr>
<td>::after</td>
<td>view::after</td>
<td>在 view 组件后边插入内容</td>
</tr>
<tr>
<td>::before</td>
<td>view::before</td>
<td>在 view 组件前边插入内容</td>
</tr>
</tbody>
</table>
<p>选择器优先级</p>
<table>
<thead>
<tr>
<th>选择器</th>
<th>权重</th>
</tr>
</thead>
<tbody>
<tr>
<td>!important（提升选择器的权重，严格来讲不是选择器）</td>
<td>∞</td>
</tr>
<tr>
<td>style（标签内联属性，也可以理解为一个选择器）</td>
<td>1000</td>
</tr>
<tr>
<td>#element（id 选择器）</td>
<td>100</td>
</tr>
<tr>
<td>.element（class 选择器）</td>
<td>10</td>
</tr>
<tr>
<td>element（元素标签选择器）</td>
<td>1</td>
</tr>
</tbody>
</table>
<blockquote>
<p>!important 权重最高，会破坏掉样式表中固有的权重值比较规则，使得调试 bug 变得更加困难，因此使用时应当谨慎</p>
</blockquote>
<p>!important 使用案例：</p>
<pre><code class="language-css">/** index.wxss **/
.title {
color: red !important;
}
</code></pre>
<h1 id="javascript">JavaScript</h1>
<h2 id="javascript介绍">JavaScript介绍</h2>
<p> JavaScript是一种轻量的、解释型的、面向对象的头等函数语言，是一种动态的基于原型的多范式的脚本语言，支持面向对象、命令式和函数式的编程风格。</p>
<p>图书推荐：<img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210717095452184.png" alt="image-20210717095452184" loading="lazy"></p>
<h2 id="小程序javascript实现">小程序JavaScript实现</h2>
<h3 id="不同环境中的-javascript-对比">不同环境中的 JavaScript 对比</h3>
<p>Nodejs 中的 JavaScript</p>
<ul>
<li>ECMAScript</li>
<li>Native：原生模块，通过 Native 使用 JavaScript 不具备的能力</li>
<li>NPM：包管理系统</li>
</ul>
<p>小程序中的 JavaScript</p>
<ul>
<li>ECMAScript</li>
<li>小程序框架</li>
<li>小程序API</li>
<li>无法使用 jQuery 和 Nodejs 中的 Native 、NPM</li>
</ul>
<p>浏览器中的 JavaScript</p>
<ul>
<li>ECMAScript</li>
<li>DOM：浏览器的文档对象模型，是 HTML 和 xml 的应用程序接口，通过 js 读取当前网页的 DOM 对象</li>
<li>BOM：浏览器的对象模型，处理浏览器的窗口和框架</li>
</ul>
<h3 id="小程序宿主环境差异">小程序宿主环境差异</h3>
<table>
<thead>
<tr>
<th style="text-align: center">IOS</th>
<th style="text-align: center">Android</th>
<th style="text-align: center">IDE</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">JavaScriptCore</td>
<td style="text-align: center">X5内核</td>
<td style="text-align: center">nwjs</td>
</tr>
</tbody>
</table>
<h1 id="wxs">WXS</h1>
<h2 id="wxs--介绍">WXS介绍</h2>
<p> wxs（WeiXin Script），和 wxml 共同构建页面视图的结构内容</p>
<h2 id="wxs-特性">WXS 特性</h2>
<h3 id="模块">模块</h3>
<p>wxs 有独立的作用域，其中定义的变量和函数默认是私有的</p>
<pre><code class="language-xml">
<wxs module="m1">
module.exports = {
message: 'Hello,world!'
}
</wxs>

<view> {{m1.message}} </view>
</code></pre>
<blockquote>
<p>module.exports 属性：将 wxs 中的变量暴露，让外部可调用</p>
</blockquote>
<pre><code class="language-xml">
<wxs src="./m2.wxs" module="m2"></wxs>
<view> {{m2.message}} </view>
</code></pre>
<pre><code class="language-js">// m2.wxs
module.exports = require('./m1.wxs')
</code></pre>
<pre><code class="language-js">// m1.wxs
module.exports= {
message: "hello world!"
}
</code></pre>
<blockquote>
<ul>
<li>src ：声明外部 wxs 文件路径</li>
<li>module ：声明所使用的外部 wxs 文件中的模块名</li>
<li>require() 函数：在 wxs 中引用其他 wxs 文件</li>
</ul>
</blockquote>
<blockquote>
<p>注意：尽量不要重复声明模块名，否则后面定义的模块会覆盖前面的模块</p>
</blockquote>
<h3 id="变量">变量</h3>
<p>与 ES5 标准的 JavaScript 变量用法一致</p>
<h3 id="注释">注释</h3>
<pre><code class="language-xml">
<wxs module+"m3">
var v = 1;
module.exports.value = v;
//单行注释
/*多行注释
v += 1;
*/
console.log(v);
/*
var d = 3;
console.log(d);
*/
</wxs>
<view> {{m3.value}} </view>
</code></pre>
<img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210717105401235.png" alt="image-20210717105401235" style="zoom: 67%">
<h3 id="运算符">运算符</h3>
<p>wxs 中运算符语句与 JavaScript 基本一致，但不支持 try ... catch 语句</p>
<table>
<thead>
<tr>
<th>运算符</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>基本运算符</td>
<td></td>
</tr>
<tr>
<td>一元运算符</td>
<td></td>
</tr>
<tr>
<td>位运算符</td>
<td></td>
</tr>
<tr>
<td>比较运算符</td>
<td></td>
</tr>
<tr>
<td>等值运算符</td>
<td></td>
</tr>
<tr>
<td>赋值运算符</td>
<td></td>
</tr>
<tr>
<td>二元逻辑运算符</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="数据类型">数据类型</h3>
<table>
<thead>
<tr>
<th>数据类型</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>number</td>
<td>数字</td>
</tr>
<tr>
<td>string</td>
<td>字符串</td>
</tr>
<tr>
<td>boolean</td>
<td>布尔</td>
</tr>
<tr>
<td>object</td>
<td>对象</td>
</tr>
<tr>
<td>array</td>
<td>数组</td>
</tr>
<tr>
<td>function</td>
<td>函数</td>
</tr>
<tr>
<td>date</td>
<td>日期</td>
</tr>
<tr>
<td>regexp</td>
<td>正则</td>
</tr>
</tbody>
</table>
<blockquote>
<ul>
<li>生成 date 对象使用 getdate() 函数</li>
<li>生成 regexp 对象使用 getregexp() 函数</li>
</ul>
</blockquote>
<h3 id="基础类库">基础类库</h3>
<table>
<thead>
<tr>
<th>基础类库</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Number</td>
<td></td>
</tr>
<tr>
<td>Date</td>
<td></td>
</tr>
<tr>
<td>Global</td>
<td></td>
</tr>
<tr>
<td>console</td>
<td></td>
</tr>
<tr>
<td>Math</td>
<td></td>
</tr>
<tr>
<td>JSON</td>
<td></td>
</tr>
</tbody>
</table>
<blockquote>
<p>与 ES5 标准的 JavaScript 基础类库基本一致，区别在于：</p>
<ul>
<li>
<p>console 基础类库只提供 console.log()</p>
</li>
<li>
<p>date 基础类库只提供</p>
<p> date.pase() ：解析字符串形式的日期时间，返回 UNIX 时间戳</p>
<p> date.now() ：返回当前日期时间的 UNIX 时间戳</p>
<p> date.utc() ：返回指定时间的 UNIX 时间戳</p>
</li>
</ul>
</blockquote>
<h1 id="mina-框架">MINA 框架</h1>
<p>小程序开发框架</p>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210808131817343.png" alt="image-20210808131817343" loading="lazy"></p>
<h1 id="小程序运行机制">小程序运行机制</h1>
<h2 id="启动">启动</h2>
<h3 id="热启动">热启动</h3>
<p>将后台切换到前台</p>
<h3 id="冷启动">冷启动</h3>
<p>首次启动或被微信销毁后再次启动</p>
<p>若冷启动时发现有新版本，则异步下载新版代码包</p>
<h2 id="加载">加载</h2>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210808132643694.png" alt="image-20210808132643694" loading="lazy"></p>
<p>小程序启动时，向 CDN 请求最新的代码包，首次启动时，需等待代码包下载完毕，并注入到 web view 容器内执行之后，才能看到小程序的页面；客户端会将代码包缓存到本地，下次启动时，首先从 CDN 请求是否有最新版本代码包，若有，运行旧版本代码包的同时，异步下载最新版代码包。</p>
<h3 id="cdn">CDN</h3>
<p>内容分发网络，作用是将请求的内容分发到最近的网络节点服务器，提高用户访问的响应速度和成功率，解决带宽、服务器性能带来的延迟问题</p>
<h1 id="生命周期">生命周期</h1>
<h2 id="应用生命周期">应用生命周期</h2>
<p>首次启动时，客户端会初始化小程序的运行环境，同时从 CDN 下载，或从本地缓存拿到代码包，并注入到运行环境；</p>
<blockquote>
<p>onLaunch：初始化完毕后，客户端会给逻辑层 App.js 的 app 实例派发 onLaunch 事件</p>
<p>onHide：当点击小程序右上角关闭，或点击手机 Home 键时，小程序被切入后台，这时调用 onHide</p>
<p>onShow：从后台重新打开小程序时，调用 onShow</p>
<p>onError：发生脚本错误，或 API 调用失败时，调用 onError，这时会给 onError 方法中传入一些错误信息</p>
</blockquote>
<blockquote>
<p>globalData：表示小程序应用的全局数据</p>
</blockquote>
<h2 id="页面生命周期">页面生命周期</h2>
<blockquote>
<p>onLoad：页面初次加载时，客户端派发 onLoad 事件，在页面被销毁之前，只调用一次</p>
<p>onShow：页面打开后，或从另一个页面返回当前页面时，当前页的 onShow 方法被调用</p>
<p>onReady：当页面初次渲染完之后，调用 onReady 方法，在页面被销毁之前，只调用一次；onReady 触发之后，逻辑层就可以和视图层进行交互了</p>
<p>onHide：当打开新页面时，当前页的 onHide 方法被调用</p>
<p>onUnload：关闭当前页面时调用</p>
</blockquote>
<blockquote>
<p>data：表示当前小程序的页面数据</p>
</blockquote>
<p>案例</p>
<p><img src="http://dominickk.oss-cn-hangzhou.aliyuncs.com/oldimgbed/Typora/image-20210808140529508.png" alt="image-20210808140529508" loading="lazy"></p>
<h1 id="页面路由">页面路由</h1>
<p>在一个多页面的小程序中，所有页面路由由框架进行管理，框架以栈的形式维护小程序的页面</p>
<table>
<thead>
<tr>
<th>路由方式</th>
<th>页面栈表现</th>
</tr>
</thead>
<tbody>
<tr>
<td>初始化</td>
<td>新页面入桟</td>
</tr>
<tr>
<td>打开新页面</td>
<td>新页面入桟</td>
</tr>
<tr>
<td>页面重定向</td>
<td>当前页面出桟，新页面入桟</td>
</tr>
<tr>
<td>页面返回</td>
<td>页面不断出桟，直到目标返回页，新页面入桟</td>
</tr>
<tr>
<td>Tab 切换</td>
<td>页面全部出桟，只留下新的 Tab 页面</td>
</tr>
<tr>
<td>重加载</td>
<td>页面全部出桟，只留下新的页面</td>
</tr>
</tbody>
</table>
<p>路由触发方式以及对应页面生命周期函数</p>
<table>
<thead>
<tr>
<th>路由方式</th>
<th>触发时机</th>
<th>路由前页面</th>
<th>路由后页面</th>
</tr>
</thead>
<tbody>
<tr>
<td>初始化</td>
<td>小程序打开的第一个页面</td>
<td></td>
<td>onLoadonShow</td>
</tr>
<tr>
<td>打开新页面</td>
<td>调用 API wx.navigateTo 或使用组件 < navigator open-type="navigateTo"/></td>
<td>onHide</td>
<td>onLoadonShow</td>
</tr>
<tr>
<td>页面重定向</td>
<td>调用 API wx.redirectTo 或使用组件 < navigator open-type="redirectTo"/></td>
<td>onUnload</td>
<td>onLoadonShow</td>
</tr>
<tr>
<td>页面返回</td>
<td>调用 API wx.navigateBack 或使用组件 < navigator open-type="navigateBack"/></td>
<td>onUnload</td>
<td>onShow</td>
</tr>
<tr>
<td>Tab 切换</td>
<td>调用 API wx.switchTab 或使用组件 < navigator open-type="switchTab"/></td>
<td></td>
<td>各种情况参考下表</td>
</tr>
<tr>
<td>重启动</td>
<td>调用 API wx.reLaunch 或使用组件 < navigator open-type="reLaunch"/></td>
<td>onUnload</td>
<td>onLoadonShow</td>
</tr>
</tbody>
</table><br><br>
来源：https://www.cnblogs.com/dominickk/p/wxminiprognotes_01.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发（1）