首页 › 公众号/小程序论坛 › 微信小程序开发学习笔记（三）——WXSS、WXS（WeiXin Script）、生命周期

迈着小碎步 發表於 2023-4-27 08:33:00

微信小程序开发学习笔记（三）——WXSS、WXS（WeiXin Script）、生命周期

<h1>一、WXSS (WeiXin Style Sheets)</h1>
<p>WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。</p>
<p>WXSS 用来决定 WXML 的组件应该怎么显示。</p>
<p>为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。</p>
<p>与 CSS 相比，WXSS 扩展的特性有：</p>
<ul>
<li>尺寸单位</li>
<li>样式导入</li>
</ul>
<h2 id="尺寸单位">1.1、尺寸单位</h2>
<ul>
<li>rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。</li>
</ul>
<div class="table-wrp">
<table>
<thead>
<tr><th>设备</th><th>rpx换算px (屏幕宽度/750)</th><th>px换算rpx (750/屏幕宽度)</th></tr>
</thead>
<tbody>
<tr>
<td>iPhone5</td>
<td>1rpx = 0.42px</td>
<td>1px = 2.34rpx</td>
</tr>
<tr>
<td>iPhone6</td>
<td>1rpx = 0.5px</td>
<td>1px = 2rpx</td>
</tr>
<tr>
<td>iPhone6 Plus</td>
<td>1rpx = 0.552px</td>
<td>1px = 1.81rpx</td>
</tr>
</tbody>
</table>
</div>
<p><strong>建议：</strong>&nbsp;开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。</p>
<p><strong>注意：</strong>&nbsp;在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
Hello RPX!
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">view</span>{<span style="color: rgba(255, 0, 0, 1)">
width</span>:<span style="color: rgba(0, 0, 255, 1)"> 750rpx</span>;<span style="color: rgba(255, 0, 0, 1)">
background</span>:<span style="color: rgba(0, 0, 255, 1)">orange</span>;<span style="color: rgba(255, 0, 0, 1)">
height</span>:<span style="color: rgba(0, 0, 255, 1)"> 750rpx</span>;<span style="color: rgba(255, 0, 0, 1)">
font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 70rpx</span>;
}</pre>
</div>
<p>小屏幕时：</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427090419916-632335542.png" alt="" loading="lazy"></p>
<p>&nbsp;大屏幕时：</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427090451622-689314099.png" alt="" loading="lazy"></p>
<p>&nbsp;屏幕大时字体、高与宽都同时变大，rpx是响应式的相对刻度单位。</p>
<h2 id="样式导入">1.2、样式导入</h2>
<p>使用<code>@import</code>语句可以导入外联样式表，<code>@import</code>后跟需要导入的外联样式表的相对路径，用<code>;</code>表示语句结束。</p>
<p><strong>示例代码：</strong></p>
<div class="language-less extra-class">
<pre class="language-less"><code><span class="token comment">/** common.wxss **/
<span class="token selector">.small-p <span class="token punctuation">{
<span class="token property">padding<span class="token punctuation">:5px<span class="token punctuation">;
<span class="token punctuation">}
</span></span></span></span></span></span></span></code></pre>
</div>
<div class="language-less extra-class">
<pre class="language-less"><code><span class="token comment">/** app.wxss **/
<span class="token variable">@import <span class="token string">"common.wxss"<span class="token punctuation">;
<span class="token selector">.middle-p <span class="token punctuation">{
<span class="token property">padding<span class="token punctuation">:15px<span class="token punctuation">;
<span class="token punctuation">}<br>pages/css/common.wxss<br></span></span></span></span></span></span></span></span></span></span></code></pre>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">.title</span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)">lightyellow</span>;
}</pre>
</div>
<p>pages/hello/index.wxml</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;view class="title"&gt;
Hello RPX!
&lt;/view&gt;</span></pre>
</div>
<p>pages/hello/index.wxss</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">view</span>{<span style="color: rgba(255, 0, 0, 1)">
width</span>:<span style="color: rgba(0, 0, 255, 1)"> 750rpx</span>;<span style="color: rgba(255, 0, 0, 1)">
background</span>:<span style="color: rgba(0, 0, 255, 1)">orange</span>;<span style="color: rgba(255, 0, 0, 1)">
height</span>:<span style="color: rgba(0, 0, 255, 1)"> 750rpx</span>;<span style="color: rgba(255, 0, 0, 1)">
font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 70rpx</span>;
}<span style="color: rgba(128, 0, 0, 1)">
@import"../css/common.wxss"</span></pre>
</div>
<p>运行结果：</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427091023886-2006182906.png" alt="" loading="lazy"></p>
</div>
<h2>1.3、内联样式</h2>
<p>框架组件上支持使用 style、class 属性来控制组件的样式。</p>
<ul>
<li>style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。</li>
</ul>
<div class="language-html extra-class">
<pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;view <span class="token special-attr"><span class="token attr-name">style<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"<span class="token value css language-css"><span class="token selector">color:<span class="token punctuation">{<span class="token punctuation">{color<span class="token punctuation">}<span class="token punctuation">}<span class="token punctuation">;<span class="token punctuation">" <span class="token punctuation">/&gt;<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="background: {{color}}; height: 100px;"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
背景是什么颜色:
</span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="{{color}}"</span><span style="color: rgba(255, 0, 0, 1)"> bindinput</span><span style="color: rgba(0, 0, 255, 1)">="inputHandle"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span><span style="color: rgba(0, 0, 0, 1)">
{{color}}
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<div class="cnblogs_code">
<pre>const page=<span style="color: rgba(0, 0, 0, 1)">{
data:{
    users:[{id:</span>1001,name:"jack",age:18<span style="color: rgba(0, 0, 0, 1)">},
    {id:</span>1002,name:"mark",age:17<span style="color: rgba(0, 0, 0, 1)">},
    {id:</span>1003,name:"rose",age:20<span style="color: rgba(0, 0, 0, 1)">},
    {id:</span>1004,name:"lili",age:15<span style="color: rgba(0, 0, 0, 1)">},
    {id:</span>1005,name:"lucy",age:22<span style="color: rgba(0, 0, 0, 1)">}],
    color:</span>""<span style="color: rgba(0, 0, 0, 1)">
},
inputHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.setData({color:e.detail.value})
}
};
Page(page);</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427092904479-830487173.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427092924873-275017823.png" alt="" loading="lazy"></p>
</div>
<ul>
<li>class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上<code>.</code>，样式类名之间用空格分隔。</li>
</ul>
<div class="language-html extra-class">
<pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;view <span class="token attr-name">class<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"normal_view<span class="token punctuation">" <span class="token punctuation">/&gt;<br></span></span></span></span></span></span></span></span></span></code></pre>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">wx:for</span><span style="color: rgba(0, 0, 255, 1)">="{{users}}"</span><span style="color: rgba(255, 0, 0, 1)"> wx:key</span><span style="color: rgba(0, 0, 255, 1)">="id"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="{{index%2===1?'bg1':'bg2'}}"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
{{item.name}}
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">wx:for</span><span style="color: rgba(0, 0, 255, 1)">="{{users}}"</span><span style="color: rgba(255, 0, 0, 1)"> wx:key</span><span style="color: rgba(0, 0, 255, 1)">="id"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="{{'bg'+(index%2+1)}}"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
{{item.name}}
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">view</span>{<span style="color: rgba(255, 0, 0, 1)">
padding</span>:<span style="color: rgba(0, 0, 255, 1)"> 20rpx</span>;<span style="color: rgba(255, 0, 0, 1)">
margin</span>:<span style="color: rgba(0, 0, 255, 1)"> 20rpx</span>;
}<span style="color: rgba(128, 0, 0, 1)">
.bg1</span>{<span style="color: rgba(255, 0, 0, 1)">
background</span>:<span style="color: rgba(0, 0, 255, 1)"> lightgreen</span>;
}<span style="color: rgba(128, 0, 0, 1)">
.bg2</span>{<span style="color: rgba(255, 0, 0, 1)">
background</span>:<span style="color: rgba(0, 0, 255, 1)"> lightskyblue</span>;
}</pre>
</div>
<div class="cnblogs_code">
<pre>const page=<span style="color: rgba(0, 0, 0, 1)">{
data:{
    users:[{id:</span>1001,name:"jack",age:18<span style="color: rgba(0, 0, 0, 1)">},
    {id:</span>1002,name:"mark",age:17<span style="color: rgba(0, 0, 0, 1)">},
    {id:</span>1003,name:"rose",age:20<span style="color: rgba(0, 0, 0, 1)">},
    {id:</span>1004,name:"lili",age:15<span style="color: rgba(0, 0, 0, 1)">},
    {id:</span>1005,name:"lucy",age:22<span style="color: rgba(0, 0, 0, 1)">}],
    color:</span>""<span style="color: rgba(0, 0, 0, 1)">
}
};
Page(page);</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427093822696-1826812657.png" alt="" width="500" height="706" loading="lazy"></p>
</div>
<h2 id="选择器">1.4、选择器</h2>
<p>目前支持的选择器有：</p>
<div class="table-wrp">
<table>
<thead>
<tr><th>选择器</th><th>样例</th><th>样例描述</th></tr>
</thead>
<tbody>
<tr>
<td>.class</td>
<td><code>.intro</code></td>
<td>选择所有拥有 class="intro" 的组件</td>
</tr>
<tr>
<td>#id</td>
<td><code>#firstname</code></td>
<td>选择拥有 id="firstname" 的组件</td>
</tr>
<tr>
<td>element</td>
<td><code>view</code></td>
<td>选择所有 view 组件</td>
</tr>
<tr>
<td>element, element</td>
<td><code>view, checkbox</code></td>
<td>选择所有文档的 view 组件和所有的 checkbox 组件</td>
</tr>
<tr>
<td>::after</td>
<td><code>view::after</code></td>
<td>在 view 组件后边插入内容</td>
</tr>
<tr>
<td>::before</td>
<td><code>view::before</code></td>
<td>在 view 组件前边插入内容</td>
</tr>
</tbody>
</table>
</div>
<h2 id="全局样式与局部样式">1.5、全局样式与局部样式</h2>
<p>定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。</p>
<p>app.wxss中的样式可以作用于每一个页面中</p>
<p>app.wxss中的内容如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">.blue</span>{<span style="color: rgba(255, 0, 0, 1)">
font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 50rpx</span>;<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)"> blue</span>;
}</pre>
</div>
<p>hello/index.wxml</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="blue"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
blue是全局样式
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>counter/index.wxml</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">pages/counter/index.wxml</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">include </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="../templates/header"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">include</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="blue"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
blue是全局样式
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="counter"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="title"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>计数器<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>{{count}}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(255, 0, 0, 1)"> bindtap</span><span style="color: rgba(0, 0, 255, 1)">="onCount"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>点击count++<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">import </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="../templates/card.wxml"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">template </span><span style="color: rgba(255, 0, 0, 1)">is</span><span style="color: rgba(0, 0, 255, 1)">="card"</span><span style="color: rgba(255, 0, 0, 1)"> data</span><span style="color: rgba(0, 0, 255, 1)">="{{id:1002,name:'王五',age:19}}"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">include </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="../templates/footer"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">include</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>运行结果：</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427094446147-1216237693.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427094500659-1156543685.png" alt="" loading="lazy"></p>
<h2>1.6、background-image问题</h2>
<p><strong>（1）、微信小程序view background-image 不能够直接显示本地</strong></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427094908096-874646550.png" alt="" loading="lazy"></p>
<p>[渲染层网络层错误] pages/hello/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用&lt;image/&gt;标签。请参考文档：https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96<br>2 |   width: 750rpx;<br>3 |   height: 750rpx;<br>&gt; 4 |   background-image: url(../../images/haha.jpg);<br>    |                  ^<br>5 |   background-color: oldlace;<br>6 | }(env: Windows,mp,1.06.2303220; lib: 2.19.4)</p>
<p>&nbsp;</p>
<p><strong>（2）、但是可以直接显示网络图片</strong></p>
<div>https://bkimg.cdn.bcebos.com/pic/0bd162d9f2d3572c11df08d4e75a742762d0f703652b?x-bce-process=image/resize,m_lfit,w_536,limit_1</div>
<div>假定需要下面这张图：</div>
<div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427095037374-1403577959.png" alt="" width="359" height="336" loading="lazy"></p>
<p>图片的url是：</p>
<p>https://img2023.cnblogs.com/blog/63651/202304/63651-20230427095037374-1403577959.png</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427095200447-1134425673.png" alt="" loading="lazy"></p>


</div>
<div><strong>（3）、将本地图片转化成base64方式引用图片</strong></div>
<div>转化图片的网址https://www.bejson.com/ui/image2base64/</div>
<div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427095421679-1201100781.png" alt="" loading="lazy"></p>


</div>
<div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427095358379-1441206228.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427095537047-1558728890.png" alt="" loading="lazy"></p>


</div>
<h1>二、WXS（WeiXin Script）</h1>
<p>WXS（WeiXin Script）是小程序的一套脚本语言，结合&nbsp;<code>WXML</code>，可以构建出页面的结构。</p>
<p>WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。</p>
<h2 id="WXS-模块">2.1、WXS 模块</h2>
<p>WXS 代码可以编写在 wxml 文件中的&nbsp;<code>&lt;wxs&gt;</code>&nbsp;标签内，或以&nbsp;<code>.wxs</code>&nbsp;为后缀名的文件内。</p>
<h3 id="模块">2.1.1、模块</h3>
<p>每一个&nbsp;<code>.wxs</code>&nbsp;文件和&nbsp;<code>&lt;wxs&gt;</code>&nbsp;标签都是一个单独的模块。</p>
<p>每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。</p>
<p>一个模块要想对外暴露其内部的私有变量与函数，只能通过&nbsp;<code>module.exports</code>&nbsp;实现。</p>
<h3 id="wxs-文件">2.1.2、.wxs 文件</h3>
<p>在<strong>微信开发者工具</strong>里面，右键可以直接创建&nbsp;<code>.wxs</code>&nbsp;文件，在其中直接编写 WXS 脚本。</p>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
return d;
}
module.exports = {
foo: foo,
bar: bar
};
</code></pre>
</div>
<p>上述例子在&nbsp;<code>/pages/comm.wxs</code>&nbsp;的文件里面编写了 WXS 代码。该&nbsp;<code>.wxs</code>&nbsp;文件可以被其他的&nbsp;<code>.wxs</code>&nbsp;文件 或 WXML 中的&nbsp;<code>&lt;wxs&gt;</code>&nbsp;标签引用。</p>
<h4 id="module-对象">module 对象</h4>
<p>每个&nbsp;<code>wxs</code>&nbsp;模块均有一个内置的&nbsp;<code>module</code>&nbsp;对象。</p>
<h4 id="属性">属性</h4>
<ul>
<li><code>exports</code>: 通过该属性，可以对外共享本模块的私有变量与函数。</li>
</ul>
<p><strong>定义方法一：</strong></p>
<p>pages/common.wxs</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定义变量</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> name="张三"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定义函数表达式</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> show=<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(info){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> msg="你好，"+<span style="color: rgba(0, 0, 0, 1)">info;
console.log(msg);
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> msg;
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">导出</span>
module.exports={name:name,show:show}</pre>
</div>
<p>请不要使用ES6的语法内容</p>
<p>pages/hello/index.wxml</p>
<div class="cnblogs_code">
<pre>&lt;wxs src="../common.wxs" module="greeting"&gt;&lt;/wxs&gt;
&lt;view&gt;<span style="color: rgba(0, 0, 0, 1)">
{{greeting.show(greeting.name)}}
</span>&lt;/view&gt;</pre>
</div>
<p>结果：</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427100828906-457800600.png" alt="" loading="lazy"></p>
<p><strong>示例代码：</strong></p>
<p>在开发者工具中预览效果</p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
</code></pre>
</div>
<div class="language-html extra-class">
<pre class="language-html"><code><span class="token comment">&lt;!-- page/index/index.wxml --&gt;

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;wxs <span class="token attr-name">src<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"./../tools.wxs<span class="token punctuation">" <span class="token attr-name">module<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"tools<span class="token punctuation">" <span class="token punctuation">/&gt;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;view<span class="token punctuation">&gt; {{tools.msg}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/view<span class="token punctuation">&gt;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;view<span class="token punctuation">&gt; {{tools.bar(tools.FOO)}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/view<span class="token punctuation">&gt;
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>页面输出：</p>
<div class="language- extra-class">
<pre class="language-text"><code>some msg
'hello world' from tools.wxs
</code></pre>
</div>
<h4 id="require函数">require函数</h4>
<p>在<code>.wxs</code>模块中引用其他&nbsp;<code>wxs</code>&nbsp;文件模块，可以使用&nbsp;<code>require</code>&nbsp;函数。</p>
<p>引用的时候，要注意如下几点：</p>
<ul>
<li>只能引用&nbsp;<code>.wxs</code>&nbsp;文件模块，且必须使用相对路径。</li>
<li><code>wxs</code>&nbsp;模块均为单例，<code>wxs</code>&nbsp;模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个&nbsp;<code>wxs</code>&nbsp;模块对象。</li>
<li>如果一个&nbsp;<code>wxs</code>&nbsp;模块在定义之后，一直没有被引用，则该模块不会被解析与运行。</li>
</ul>
<p><strong>示例代码：</strong></p>
<p>在开发者工具中预览效果</p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
</code></pre>
</div>
<div class="language-wxs extra-class">
<pre class="language-text"><code>// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
</code></pre>
</div>
<div class="language-html extra-class">
<pre class="language-html"><code><span class="token comment">&lt;!-- /page/index/index.wxml --&gt;

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;wxs <span class="token attr-name">src<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"./../logic.wxs<span class="token punctuation">" <span class="token attr-name">module<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"logic<span class="token punctuation">" <span class="token punctuation">/&gt;
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>控制台输出：</p>
<div class="language- extra-class">
<pre class="language-text"><code>'hello world' from tools.wxs
logic.wxs
some msg<br><br>maths.wxs<br></code></pre>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> add=<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(n1,n2){
console.log(n1</span>+"+"+n2+"="+(n1+<span style="color: rgba(0, 0, 0, 1)">n2));
</span><span style="color: rgba(0, 0, 255, 1)">return</span> n1+<span style="color: rgba(0, 0, 0, 1)">n2;
}
module.exports</span>={add:add}</pre>
</div>
<p>common.wxs</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">导入maths模块</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> maths=require("maths.wxs"<span style="color: rgba(0, 0, 0, 1)">);

</span><span style="color: rgba(0, 0, 255, 1)">var</span> calc=<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">生成0-100间的随机数</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> n1=Math.floor(Math.random()*100<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> n2=Math.floor(Math.random()*100<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">调用maths模块下的add方法</span>
<span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> maths.add(n1,n2);
}

module.exports</span>={calc:calc}</pre>
</div>
<p>index.wxml</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">wxs </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="../common.wxs"</span><span style="color: rgba(255, 0, 0, 1)"> module</span><span style="color: rgba(0, 0, 255, 1)">="common"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">wxs</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
{{common.calc()}}
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>运行结果：</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428085347871-934018937.png" alt="" loading="lazy"></p>
</div>
<h3 id="wxs-标签"><code>2.1.3、&lt;wxs&gt;</code>&nbsp;标签</h3>
<div class="table-wrp">
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>module</td>
<td>String</td>
<td>&nbsp;</td>
<td>当前&nbsp;<code>&lt;wxs&gt;</code>&nbsp;标签的模块名。必填字段。</td>
</tr>
<tr>
<td>src</td>
<td>String</td>
<td>&nbsp;</td>
<td>引用 .wxs 文件的相对路径。仅当本标签为<strong>单闭合标签</strong>或<strong>标签的内容为空</strong>时有效。</td>
</tr>
</tbody>
</table>
</div>
<h4 id="module-属性">module 属性</h4>
<p>module 属性是当前&nbsp;<code>&lt;wxs&gt;</code>&nbsp;标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。</p>
<p>module 属性值的命名必须符合下面两个规则：</p>
<ul>
<li>首字符必须是：字母（a-zA-Z），下划线（_）</li>
<li>剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）</li>
</ul>
<p><strong>示例代码：</strong></p>
<p>在开发者工具中预览效果</p>
<div class="language-html extra-class">
<pre class="language-html"><code><span class="token comment">&lt;!--wxml--&gt;

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;wxs <span class="token attr-name">module<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"foo<span class="token punctuation">"<span class="token punctuation">&gt;
var some_msg = "hello world";
module.exports = {
msg : some_msg,
}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/wxs<span class="token punctuation">&gt;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;view<span class="token punctuation">&gt; {{foo.msg}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/view<span class="token punctuation">&gt;
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>页面输出：</p>
<div class="language- extra-class">
<pre class="language-text"><code>hello world
</code></pre>
</div>
<p>上面例子声明了一个名字为&nbsp;<code>foo</code>&nbsp;的模块，将&nbsp;<code>some_msg</code>&nbsp;变量暴露出来，供当前页面使用。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">wxs </span><span style="color: rgba(255, 0, 0, 1)">module</span><span style="color: rgba(0, 0, 255, 1)">="m1"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
var name="jack";//定义变量name
var hi=function(info){//定义hi函数
return "Hello "+info;
}
module.exports={name:name,hi:hi}//当前模块导出
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">wxs</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 调用模块m1中的方法与属性 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span><span style="color: rgba(0, 0, 0, 1)">
{{m1.hi(m1.name)}}
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428084229702-1162938513.png" alt="" loading="lazy"></p>
<h4 id="src-属性">src 属性</h4>
<p>src 属性可以用来引用其他的&nbsp;<code>wxs</code>&nbsp;文件模块。</p>
<p>引用的时候，要注意如下几点：</p>
<ul>
<li>只能引用&nbsp;<code>.wxs</code>&nbsp;文件模块，且必须使用相对路径。</li>
<li><code>wxs</code>&nbsp;模块均为单例，<code>wxs</code>&nbsp;模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个&nbsp;<code>wxs</code>&nbsp;模块对象。</li>
<li>如果一个&nbsp;<code>wxs</code>&nbsp;模块在定义之后，一直没有被引用，则该模块不会被解析与运行。</li>
</ul>
<p><strong>示例代码：</strong></p>
<p>在开发者工具中预览效果</p>
<div class="language-js extra-class">
<pre class="language-js"><code><span class="token comment">// /pages/index/index.js

<span class="token function">Page<span class="token punctuation">(<span class="token punctuation">{
data<span class="token operator">: <span class="token punctuation">{
    msg<span class="token operator">: <span class="token string">"'hello wrold' from js"<span class="token punctuation">,
<span class="token punctuation">}
<span class="token punctuation">}<span class="token punctuation">)
</span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<div class="language-html extra-class">
<pre class="language-html"><code><span class="token comment">&lt;!-- /pages/index/index.wxml --&gt;

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;wxs <span class="token attr-name">src<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"./../comm.wxs<span class="token punctuation">" <span class="token attr-name">module<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"some_comms<span class="token punctuation">"<span class="token punctuation">&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/wxs<span class="token punctuation">&gt;
<span class="token comment">&lt;!-- 也可以直接使用单标签闭合的写法
&lt;wxs src="./../comm.wxs" module="some_comms" /&gt;
--&gt;

<span class="token comment">&lt;!-- 调用 some_comms 模块里面的 bar 函数，且参数为 some_comms 模块里面的 foo --&gt;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;view<span class="token punctuation">&gt; {{some_comms.bar(some_comms.foo)}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/view<span class="token punctuation">&gt;
<span class="token comment">&lt;!-- 调用 some_comms 模块里面的 bar 函数，且参数为 page/index/index.js 里面的 msg --&gt;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;view<span class="token punctuation">&gt; {{some_comms.bar(msg)}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/view<span class="token punctuation">&gt;
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>页面输出：</p>
<div class="language- extra-class">
<pre class="language-text"><code>'hello world' from comm.wxs
'hello wrold' from js
</code></pre>
</div>
<p>上述例子在文件&nbsp;<code>/page/index/index.wxml</code>&nbsp;中通过&nbsp;<code>&lt;wxs&gt;</code>&nbsp;标签引用了&nbsp;<code>/page/comm.wxs</code>&nbsp;模块。</p>
<h3 id="注意事项">2.1.4、注意事项</h3>
<ul>
<li><code>&lt;wxs&gt;</code>&nbsp;模块只能在定义模块的 WXML 文件中被访问到。使用&nbsp;<code>&lt;include&gt;</code>&nbsp;或&nbsp;<code>&lt;import&gt;</code>&nbsp;时，<code>&lt;wxs&gt;</code>&nbsp;模块不会被引入到对应的 WXML 文件中。</li>
<li><code>&lt;template&gt;</code>&nbsp;标签中，只能使用定义该&nbsp;<code>&lt;template&gt;</code>&nbsp;的 WXML 文件中定义的&nbsp;<code>&lt;wxs&gt;</code>&nbsp;模块。</li>
</ul>
<h2 id="变量">2.2、变量</h2>
<h3 id="概念">2.2.1、概念</h3>
<ul>
<li>WXS 中的变量均为值的引用。</li>
<li>没有声明的变量直接赋值使用，会被定义为全局变量。</li>
<li>如果只声明变量而不赋值，则默认值为&nbsp;<code>undefined</code>。</li>
<li>var表现与javascript一致，会有变量提升。</li>
</ul>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var foo = 1;
var bar = "hello world";
var i; // i === undefined
</code></pre>
</div>
<p>上面代码，分别声明了&nbsp;<code>foo</code>、&nbsp;<code>bar</code>、&nbsp;<code>i</code>&nbsp;三个变量。然后，<code>foo</code>&nbsp;赋值为数值&nbsp;<code>1</code>&nbsp;，<code>bar</code>&nbsp;赋值为字符串&nbsp;<code>"hello world"</code>。</p>
<p>1、没有块级作用域</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428085911278-2133848809.png" alt="" loading="lazy"></p>
<p>&nbsp;2、javascript有函数级作用域</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428090202553-988556679.png" alt="" loading="lazy"></p>
<p>&nbsp;上面的示例中因为有函数级作用域，x在函数中，所有函数外访问不到。</p>
<p>3、没有声明的变量直接赋值使用，会被定义为全局变量。</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428090405060-1699661013.png" alt="" loading="lazy"></p>
<p>&nbsp;因为x在定义时没有var，直接使用,x是一个全局变量，所以在函数外又能访问到。</p>
<p>4、变量如果定义了但不赋值，默认值是undefined</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428090616594-1453280892.png" alt="" loading="lazy"></p>
<p>&nbsp;5、wxs中与javascript一样会有代码提升</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428090952195-1340676578.png" alt="" loading="lazy"></p>
<div>
<div>因为有代码提升，javascript运行环境会将定义的定义提升到最前面，上面的代码相当于：</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x=<span style="color: rgba(0, 0, 0, 1)">undefined;
console.log(x);
x</span>=100;</pre>
</div>
</div>
</div>
<h3 id="变量名">2.2.2、变量名</h3>
<p>变量命名必须符合下面两个规则：</p>
<ul>
<li>首字符必须是：字母（a-zA-Z），下划线（_）</li>
<li>剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）</li>
</ul>
<h3 id="保留标识符">2.2.3、保留标识符</h3>
<p>以下标识符不能作为变量名：</p>
<div class="language- extra-class">
<pre class="language-text"><code>delete
void
typeof

null
undefined
NaN
Infinity
var
if
else
true
false
require
this
function
arguments
return
for
while
do
break
continue
switch
case
default<br></code></pre>
<h2 id="注释">2.3、注释</h2>
<p>WXS 主要有 3 种注释的方法。</p>
<p><strong>示例代码：</strong></p>
<div class="language-html extra-class">
<pre class="language-html"><code><span class="token comment">&lt;!-- wxml --&gt;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;wxs <span class="token attr-name">module<span class="token attr-value"><span class="token punctuation attr-equals">=<span class="token punctuation">"sample<span class="token punctuation">"<span class="token punctuation">&gt;
// 方法一：单行注释

/*
方法二：多行注释
*/

/*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;
var b = 2;
var c = "fake";

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/wxs<span class="token punctuation">&gt;
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>上述例子中，所有 WXS 代码均被注释掉了。</p>
<blockquote>
<p>方法三 和 方法二 的唯一区别是，没有&nbsp;<code>*/</code>&nbsp;结束符。</p>
</blockquote>
<h2 id="运算符">2.4、运算符</h2>
<h3 id="基本运算符">2.4.1、基本运算符</h3>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10, b = 20;

// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);
</code></pre>
</div>
<ul>
<li>加法运算（<code>+</code>）也可以用作字符串的拼接。</li>
</ul>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = '.w' , b = 'xs';

// 字符串拼接
console.log('.wxs' === a + b);
</code></pre>
</div>
<h3 id="一元运算符">2.4.2、一元运算符</h3>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10, b = 20;

// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);
</code></pre>
</div>
<h3 id="位运算符">2.4.3、位运算符</h3>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10, b = 20;

// 左移运算
console.log(80 === (a &lt;&lt; 3));
// 带符号右移运算
console.log(2 === (a &gt;&gt; 2));
// 无符号右移运算
console.log(2 === (a &gt;&gt;&gt; 2));
// 与运算
console.log(2 === (a &amp; 3));
// 异或运算
console.log(9 === (a ^ 3));
// 或运算
console.log(11 === (a | 3));
</code></pre>
</div>
<h3 id="比较运算符">2.4.5、比较运算符</h3>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10, b = 20;

// 小于
console.log(true === (a &lt; b));
// 大于
console.log(false === (a &gt; b));
// 小于等于
console.log(true === (a &lt;= b));
// 大于等于
console.log(false === (a &gt;= b));
</code></pre>
</div>
<h3 id="等值运算符">2.4.6、等值运算符</h3>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10, b = 20;

// 等号
console.log(false === (a == b));
// 非等号
console.log(true === (a != b));
// 全等号
console.log(false === (a === b));
// 非全等号
console.log(true === (a !== b));<br></code></pre>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">==比较时会进行类型转换</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">===比较时不会进行类型转换</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">推荐使用===</span>
console.log(3=="3");<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">比较前会先将两边的类型转换成一致，再比值</span>
console.log(3==="3");<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">直接比较，不转换类型，因为类型不一致，所以为false</span>
<span style="color: rgba(0, 0, 0, 1)">
console.log(</span>3!="3");<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">比较前会先将两边的类型转换成一致，再比值</span>
console.log(3!=="3");<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">直接比较，不转换类型，因为类型不一致，所以为false</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428092946585-654784134.png" alt="" loading="lazy"></p>
</div>
<h3 id="赋值运算符">2.4.7、赋值运算符</h3>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10;

a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a &lt;&lt;= 10;
console.log(10240 === a);
a = 10; a &gt;&gt;= 2;
console.log(2 === a);
a = 10; a &gt;&gt;&gt;= 2;
console.log(2 === a);
a = 10; a &amp;= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);
</code></pre>
</div>
<h3 id="二元逻辑运算符">2.4.8、二元逻辑运算符</h3>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10, b = 20;

// 逻辑与
console.log(20 === (a &amp;&amp; b));
// 逻辑或
console.log(10 === (a || b));
</code></pre>
</div>
<h3 id="其他运算符">2.4.9、其他运算符</h3>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10, b = 20;

//条件运算符
console.log(20 === (a &gt;= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));</code></pre>
</div>
<h2 id="语句">2.5、语句</h2>
<h3 id="if-语句">2.5.1、if 语句</h3>
<p>在 WXS 中，可以使用以下格式的&nbsp;<code>if</code>&nbsp;语句 ：</p>
<ul>
<li>
<p><code>if (expression) statement</code>&nbsp;： 当&nbsp;<code>expression</code>&nbsp;为 truthy 时，执行&nbsp;<code>statement</code>。</p>
</li>
<li>
<p><code>if (expression) statement1 else statement2</code>&nbsp;: 当&nbsp;<code>expression</code>&nbsp;为 truthy 时，执行&nbsp;<code>statement1</code>。 否则，执行&nbsp;<code>statement2</code></p>
</li>
<li>
<p><code>if ... else if ... else statementN</code>&nbsp;通过该句型，可以在&nbsp;<code>statement1</code>&nbsp;~&nbsp;<code>statementN</code>&nbsp;之间选其中一个执行。</p>
</li>
</ul>
<p><strong>示例语法：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>// if ...

if (表达式) 语句;

if (表达式)
语句;

if (表达式) {
代码块;
}


// if ... else

if (表达式) 语句;
else 语句;

if (表达式)
语句;
else
语句;

if (表达式) {
代码块;
} else {
代码块;
}

// if ... else if ... else ...

if (表达式) {
代码块;
} else if (表达式) {
代码块;
} else if (表达式) {
代码块;
} else {
代码块;
}

</code></pre>
</div>
<h3 id="switch-语句">2.5.2、switch 语句</h3>
<p><strong>示例语法：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>switch (表达式) {
case 变量:
    语句;
case 数字:
    语句;
    break;
case 字符串:
    语句;
default:
    语句;
}
</code></pre>
</div>
<ul>
<li><code>default</code>&nbsp;分支可以省略不写。</li>
<li><code>case</code>&nbsp;关键词后面只能使用：<code>变量</code>，<code>数字</code>，<code>字符串</code>。</li>
</ul>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var exp = 10;

switch ( exp ) {
case "10":
console.log("string 10");
break;
case 10:
console.log("number 10");
break;
case exp:
console.log("var exp");
break;
default:
console.log("default");
}
</code></pre>
</div>
<p><strong>输出：</strong></p>
<div class="language- extra-class">
<pre class="language-text"><code>number 10
</code></pre>
</div>
<h3 id="for-语句">2.5.3、for 语句</h3>
<p><strong>示例语法：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>for (语句; 语句; 语句)
语句;

for (语句; 语句; 语句) {
代码块;
}
</code></pre>
</div>
<ul>
<li>支持使用&nbsp;<code>break</code>，<code>continue</code>&nbsp;关键词。</li>
</ul>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>for (var i = 0; i &lt; 3; ++i) {
console.log(i);
if( i &gt;= 1) break;
}
</code></pre>
</div>
<p><strong>输出：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>0
1
</code></pre>
</div>
<h3 id="while-语句">2.5.4、while 语句</h3>
<p><strong>示例语法：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>while (表达式)
语句;

while (表达式){
代码块;
}

do {
代码块;
} while (表达式)
</code></pre>
</div>
<ul>
<li>当<code>表达式</code>为 true 时，循环执行<code>语句</code>或<code>代码块</code>。</li>
<li>支持使用&nbsp;<code>break</code>，<code>continue</code>&nbsp;关键词。</li>
</ul>
<h2 id="数据类型">2.6、数据类型</h2>
<p>WXS 语言目前共有以下几种数据类型：</p>
<ul>
<li><code>number</code>&nbsp;： 数值</li>
<li><code>string</code>&nbsp;：字符串</li>
<li><code>boolean</code>：布尔值</li>
<li><code>object</code>：对象</li>
<li><code>function</code>：函数</li>
<li><code>array</code>&nbsp;: 数组</li>
<li><code>date</code>：日期</li>
<li><code>regexp</code>：正则</li>
</ul>
<h3 id="number">2.6.1、number</h3>
<h4 id="语法">语法</h4>
<p>number 包括两种数值：整数，小数。</p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = 10;
var PI = 3.141592653589793;
</code></pre>
</div>
<h4 id="属性">属性</h4>
<ul>
<li><code>constructor</code>：返回字符串&nbsp;<code>"Number"</code>。</li>
</ul>
<h4 id="方法">方法</h4>
<ul>
<li><code>toString</code></li>
<li><code>toLocaleString</code></li>
<li><code>valueOf</code></li>
<li><code>toFixed</code></li>
<li><code>toExponential</code></li>
<li><code>toPrecision</code></li>
</ul>
<blockquote>
<p>以上方法的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="string">2.6.2、string</h3>
<h4 id="语法-2">语法</h4>
<p>string 有两种写法：</p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>'hello world';
"hello world";
</code></pre>
</div>
<h4 id="属性-2">属性</h4>
<ul>
<li><code>constructor</code>：返回字符串&nbsp;<code>"String"</code>。</li>
<li><code>length</code></li>
</ul>
<blockquote>
<p>除constructor外属性的具体含义请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h4 id="方法-2">方法</h4>
<ul>
<li><code>toString</code></li>
<li><code>valueOf</code></li>
<li><code>charAt</code></li>
<li><code>charCodeAt</code></li>
<li><code>concat</code></li>
<li><code>indexOf</code></li>
<li><code>lastIndexOf</code></li>
<li><code>localeCompare</code></li>
<li><code>match</code></li>
<li><code>replace</code></li>
<li><code>search</code></li>
<li><code>slice</code></li>
<li><code>split</code></li>
<li><code>substring</code></li>
<li><code>toLowerCase</code></li>
<li><code>toLocaleLowerCase</code></li>
<li><code>toUpperCase</code></li>
<li><code>toLocaleUpperCase</code></li>
<li><code>trim</code></li>
</ul>
<blockquote>
<p>以上方法的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="boolean">2.6.3、boolean</h3>
<h4 id="语法-3">语法</h4>
<p>布尔值只有两个特定的值：<code>true</code>&nbsp;和&nbsp;<code>false</code>。</p>
<h4 id="属性-3">属性</h4>
<ul>
<li><code>constructor</code>：返回字符串&nbsp;<code>"Boolean"</code>。</li>
</ul>
<h4 id="方法-3">方法</h4>
<ul>
<li><code>toString</code></li>
<li><code>valueOf</code></li>
</ul>
<blockquote>
<p>以上方法的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="object">2.6.4、object</h3>
<h4 id="语法-4">语法</h4>
<p>object 是一种无序的键值对。使用方法如下所示：</p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var o = {} //生成一个新的空对象

//生成一个新的非空对象
o = {
'string': 1,//object 的 key 可以是字符串
const_var : 2,//object 的 key 也可以是符合变量定义规则的标识符
func      : {}, //object 的 value 可以是任何类型
};

//对象属性的读操作
console.log(1 === o['string']);
console.log(2 === o.const_var);

//对象属性的写操作
o['string']++;
o['string'] += 10;
o.const_var++;
o.const_var += 10;

//对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);
</code></pre>
</div>
<h4 id="属性-4">属性</h4>
<ul>
<li><code>constructor</code>：返回字符串&nbsp;<code>"Object"</code>。</li>
</ul>
<div class="language-wxs extra-class">
<pre class="language-text"><code>console.log("Object" === {k:"1",v:"2"}.constructor)
</code></pre>
</div>
<h4 id="方法-4">方法</h4>
<ul>
<li><code>toString</code>：返回字符串&nbsp;<code>""</code>。</li>
</ul>
<h3 id="function">2.6.5、function</h3>
<h4 id="语法-5">语法</h4>
<p>function 支持以下的定义方式：</p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>//方法 1
function a (x) {
return x;
}

//方法 2
var b = function (x) {
return x;
}
</code></pre>
</div>
<p>function 同时也支持以下的语法（匿名函数，闭包等）：</p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = function (x) {
return function () { return x;}
}

var b = a(100);
console.log( 100 === b() );
</code></pre>
</div>
<h4 id="arguments">arguments</h4>
<p>function 里面可以使用&nbsp;<code>arguments</code>&nbsp;关键词。该关键词目前只支持以下的属性：</p>
<ul>
<li><code>length</code>: 传递给函数的参数个数。</li>
<li><code></code>: 通过&nbsp;<code>index</code>&nbsp;下标可以遍历传递给函数的每个参数。</li>
</ul>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = function(){
console.log(3 === arguments.length);
console.log(100 === arguments);
console.log(200 === arguments);
console.log(300 === arguments);
};
a(100,200,300);
</code></pre>
</div>
<h4 id="属性-5">属性</h4>
<ul>
<li><code>constructor</code>：返回字符串&nbsp;<code>"Function"</code>。</li>
<li><code>length</code>：返回函数的形参个数。</li>
</ul>
<h4 id="方法-5">方法</h4>
<ul>
<li><code>toString</code>：返回字符串&nbsp;<code>""</code>。</li>
</ul>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var func = function (a,b,c) { }

console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("" === func.toString());
</code></pre>
</div>
<h3 id="array">2.6.6、array</h3>
<h4 id="语法-6">语法</h4>
<p>array 支持以下的定义方式：</p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = [];      //生成一个新的空数组

a = ;//生成一个新的非空数组，数组元素可以是任何类型
</code></pre>
</div>
<h4 id="属性-6">属性</h4>
<ul>
<li><code>constructor</code>：返回字符串&nbsp;<code>"Array"</code>。</li>
<li><code>length</code></li>
</ul>
<blockquote>
<p>除constructor外属性的具体含义请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h4 id="方法-6">方法</h4>
<ul>
<li><code>toString</code></li>
<li><code>concat</code></li>
<li><code>join</code></li>
<li><code>pop</code></li>
<li><code>push</code></li>
<li><code>reverse</code></li>
<li><code>shift</code></li>
<li><code>slice</code></li>
<li><code>sort</code></li>
<li><code>splice</code></li>
<li><code>unshift</code></li>
<li><code>indexOf</code></li>
<li><code>lastIndexOf</code></li>
<li><code>every</code></li>
<li><code>some</code></li>
<li><code>forEach</code></li>
<li><code>map</code></li>
<li><code>filter</code></li>
<li><code>reduce</code></li>
<li><code>reduceRight</code></li>
</ul>
<blockquote>
<p>以上方法的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="date">2.6.7、date</h3>
<h4 id="语法-7">语法</h4>
<p>生成 date 对象需要使用&nbsp;<code>getDate</code>函数, 返回一个当前时间的对象。</p>
<div class="language- extra-class">
<pre class="language-text"><code>getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
</code></pre>
</div>
<ul>
<li>参数
<ul>
<li><code>milliseconds</code>: 从1970年1月1日00:00:00 UTC开始计算的毫秒数</li>
<li><code>datestring</code>: 日期字符串，其格式为："month day, year hours:minutes:seconds"</li>
</ul>
</li>
</ul>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var date = getDate(); //返回当前时间对象

date = getDate(1500000000000);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
</code></pre>
</div>
<h4 id="属性-7">属性</h4>
<ul>
<li><code>constructor</code>：返回字符串 “Date”。</li>
</ul>
<h4 id="方法-7">方法</h4>
<ul>
<li><code>toString</code></li>
<li><code>toDateString</code></li>
<li><code>toTimeString</code></li>
<li><code>toLocaleString</code></li>
<li><code>toLocaleDateString</code></li>
<li><code>toLocaleTimeString</code></li>
<li><code>valueOf</code></li>
<li><code>getTime</code></li>
<li><code>getFullYear</code></li>
<li><code>getUTCFullYear</code></li>
<li><code>getMonth</code></li>
<li><code>getUTCMonth</code></li>
<li><code>getDate</code></li>
<li><code>getUTCDate</code></li>
<li><code>getDay</code></li>
<li><code>getUTCDay</code></li>
<li><code>getHours</code></li>
<li><code>getUTCHours</code></li>
<li><code>getMinutes</code></li>
<li><code>getUTCMinutes</code></li>
<li><code>getSeconds</code></li>
<li><code>getUTCSeconds</code></li>
<li><code>getMilliseconds</code></li>
<li><code>getUTCMilliseconds</code></li>
<li><code>getTimezoneOffset</code></li>
<li><code>setTime</code></li>
<li><code>setMilliseconds</code></li>
<li><code>setUTCMilliseconds</code></li>
<li><code>setSeconds</code></li>
<li><code>setUTCSeconds</code></li>
<li><code>setMinutes</code></li>
<li><code>setUTCMinutes</code></li>
<li><code>setHours</code></li>
<li><code>setUTCHours</code></li>
<li><code>setDate</code></li>
<li><code>setUTCDate</code></li>
<li><code>setMonth</code></li>
<li><code>setUTCMonth</code></li>
<li><code>setFullYear</code></li>
<li><code>setUTCFullYear</code></li>
<li><code>toUTCString</code></li>
<li><code>toISOString</code></li>
<li><code>toJSON</code></li>
</ul>
<blockquote>
<p>以上方法的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="regexp">2.6.8、regexp</h3>
<h4 id="语法-8">语法</h4>
<p>生成 regexp 对象需要使用&nbsp;<code>getRegExp</code>函数。</p>
<div class="language- extra-class">
<pre class="language-text"><code>getRegExp(pattern[, flags])
</code></pre>
</div>
<ul>
<li>参数：
<ul>
<li><code>pattern</code>: 正则表达式的内容。</li>
<li><code>flags</code>：修饰符。该字段只能包含以下字符:
<ul>
<li><code>g</code>: global</li>
<li><code>i</code>: ignoreCase</li>
<li><code>m</code>: multiline。</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var a = getRegExp("x", "img");
console.log("x" === a.source);
console.log(true === a.global);
console.log(true === a.ignoreCase);
console.log(true === a.multiline);
</code></pre>
</div>
<h4 id="属性-8">属性</h4>
<ul>
<li><code>constructor</code>：返回字符串&nbsp;<code>"RegExp"</code>。</li>
<li><code>source</code></li>
<li><code>global</code></li>
<li><code>ignoreCase</code></li>
<li><code>multiline</code></li>
<li><code>lastIndex</code></li>
</ul>
<blockquote>
<p>除constructor外属性的具体含义请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h4 id="方法-8">方法</h4>
<ul>
<li><code>exec</code></li>
<li><code>test</code></li>
<li><code>toString</code></li>
</ul>
<blockquote>
<p>以上方法的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="数据类型判断">2.6.9、数据类型判断</h3>
<h3 id="constructor-属性"><code>constructor</code>&nbsp;属性</h3>
<p>数据类型的判断可以使用&nbsp;<code>constructor</code>&nbsp;属性。</p>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var number = 10;
console.log( "Number" === number.constructor );

var string = "str";
console.log( "String" === string.constructor );

var boolean = true;
console.log( "Boolean" === boolean.constructor );

var object = {};
console.log( "Object" === object.constructor );

var func = function(){};
console.log( "Function" === func.constructor );

var array = [];
console.log( "Array" === array.constructor );

var date = getDate();
console.log( "Date" === date.constructor );

var regexp = getRegExp();
console.log( "RegExp" === regexp.constructor );
</code></pre>
</div>
<h3 id="typeof"><code>typeof</code></h3>
<p>使用&nbsp;<code>typeof</code>&nbsp;也可以区分部分数据类型。</p>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>var number = 10;
var boolean = true;
var object = {};
var func = function(){};
var array = [];
var date = getDate();
var regexp = getRegExp();

console.log( 'number' === typeof number );
console.log( 'boolean' === typeof boolean );
console.log( 'object' === typeof object );
console.log( 'function' === typeof func );
console.log( 'object' === typeof array );
console.log( 'object' === typeof date );
console.log( 'object' === typeof regexp );

console.log( 'undefined' === typeof undefined );
console.log( 'object' === typeof null );</code></pre>
</div>
<h2 id="基础类库">2.7、基础类库</h2>
<h3 id="console">2.7.1、console</h3>
<p><code>console.log</code>&nbsp;方法用于在 console 窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。</p>
<h3 id="Math">2.7.2、Math</h3>
<h3 id="属性">属性</h3>
<ul>
<li><code>E</code></li>
<li><code>LN10</code></li>
<li><code>LN2</code></li>
<li><code>LOG2E</code></li>
<li><code>LOG10E</code></li>
<li><code>PI</code></li>
<li><code>SQRT1_2</code></li>
<li><code>SQRT2</code></li>
</ul>
<blockquote>
<p>以上属性的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="方法">方法</h3>
<ul>
<li><code>abs</code></li>
<li><code>acos</code></li>
<li><code>asin</code></li>
<li><code>atan</code></li>
<li><code>atan2</code></li>
<li><code>ceil</code></li>
<li><code>cos</code></li>
<li><code>exp</code></li>
<li><code>floor</code></li>
<li><code>log</code></li>
<li><code>max</code></li>
<li><code>min</code></li>
<li><code>pow</code></li>
<li><code>random</code></li>
<li><code>round</code></li>
<li><code>sin</code></li>
<li><code>sqrt</code></li>
<li><code>tan</code></li>
</ul>
<blockquote>
<p>以上方法的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="JSON">2.7.3、JSON</h3>
<h3 id="方法-2">方法</h3>
<ul>
<li><code>stringify(object)</code>: 将&nbsp;<code>object</code>&nbsp;对象转换为&nbsp;<code>JSON</code>&nbsp;字符串，并返回该字符串。</li>
<li><code>parse(string)</code>: 将&nbsp;<code>JSON</code>&nbsp;字符串转化成对象，并返回该对象。</li>
</ul>
<p><strong>示例代码：</strong></p>
<div class="language-wxs extra-class">
<pre class="language-text"><code>
console.log(undefined === JSON.stringify());
console.log(undefined === JSON.stringify(undefined));
console.log("null"===JSON.stringify(null));

console.log("111"===JSON.stringify(111));
console.log('"111"'===JSON.stringify("111"));
console.log("true"===JSON.stringify(true));
console.log(undefined===JSON.stringify(function(){}));


console.log(undefined===JSON.parse(JSON.stringify()));
console.log(undefined===JSON.parse(JSON.stringify(undefined)));
console.log(null===JSON.parse(JSON.stringify(null)));

console.log(111===JSON.parse(JSON.stringify(111)));
console.log("111"===JSON.parse(JSON.stringify("111")));
console.log(true===JSON.parse(JSON.stringify(true)));

console.log(undefined===JSON.parse(JSON.stringify(function(){})));
</code></pre>
</div>
<h3 id="Number">2.7.4、Number</h3>
<h3 id="属性-2">属性</h3>
<ul>
<li><code>MAX_VALUE</code></li>
<li><code>MIN_VALUE</code></li>
<li><code>NEGATIVE_INFINITY</code></li>
<li><code>POSITIVE_INFINITY</code></li>
</ul>
<blockquote>
<p>以上属性的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="Date">2.7.5、Date</h3>
<h3 id="属性-3">属性</h3>
<ul>
<li><code>parse</code></li>
<li><code>UTC</code></li>
<li><code>now</code></li>
</ul>
<blockquote>
<p>以上属性的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="Global">2.7.6、Global</h3>
<h3 id="属性-4">属性</h3>
<ul>
<li><code>NaN</code></li>
<li><code>Infinity</code></li>
<li><code>undefined</code></li>
</ul>
<blockquote>
<p>以上属性的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
<h3 id="方法-3">方法</h3>
<ul>
<li><code>parseInt</code></li>
<li><code>parseFloat</code></li>
<li><code>isNaN</code></li>
<li><code>isFinite</code></li>
<li><code>decodeURI</code></li>
<li><code>decodeURIComponent</code></li>
<li><code>encodeURI</code></li>
<li><code>encodeURIComponent</code></li>
</ul>
<blockquote>
<p>以上方法的具体使用请参考&nbsp;<code>ES5</code>&nbsp;标准。</p>
</blockquote>
</div>
<h2>2.8、WXS与JS的区别</h2>
<p>1、WXS 中不支持 let和const；不支持箭头函数、一切ES6及以后新增加的内容都不支持。</p>
<p>2、WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。</p>
<p>3、由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。</p>
<p>4、WXS只支持到JS5版本，不支持ES6</p>
<p>5、WXS使用了JS的严格模式strict mode</p>
<div>
<div>
<p>6、WXS 里，遍历数组只能通过for实现，而JS中的for in和for of不被支持，对于需要循环处理数据的场景，也可以通过数组的forEach方法实现遍历：</p>
<div class="cnblogs_code">
<pre> var ary = ;
ary.forEach(function<span>(i) {
console.log(i);
})</span></span></pre>
</div>
<div>7、WXS只提供给开发者5个基础类库，分别是 console，Math，JSON，Number，Date，以及一些常用的全局变量和全局函数，数量不多，但已经能满足基本的数据操作要求，而对于复杂的数据操作，比如类定义和继承等，还是需要依靠逻辑层的 JS 脚本完成。</div>
</div>
<div>
<div>
<p>8、由于WXS先天不支持使用 Array 对象，因此我们平常用于判断数组类型变量的语句[] instanceof Array也就不能使用了，而typeof []的输出结果是"object"，并不能满足实际的开发要求。所幸我们还可以使用变量的 「constructor」属性进行类型判断：</p>
<div class="cnblogs_code">
<pre>[].constructor === Array//true</pre>
</div>
<div>9、小程序的架构分成了逻辑层和视图层，WXS 与JavaScript还有一个差异在于，它与WXML一同们于视图层，运行于同一个线程内，因此减少了跨线程通信的开销。这也是我们之所以优先采用WXS处理数据的原因之一。</div>
</div>
<div>
<div>10、小程序在Android上，使用V8引擎解析和渲染 JavaScript; 而在iOS上，则是使用 JavaScriptCore，这两者在解析性能的表现上差异比较大，相对来说 V8 的性能比 JSC 要好得多，那么在 IOS 的小程序中，使用脱离 JavaScript 环境的 WXS，就会使性能有更多的提升，这也是WXS文档中提及 “在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍” 的具体原因</div>
<div>11、不要使用DOM与BOM,使用ES5</div>
</div>
</div>
</div>
<h1>三、生命周期</h1>
<p>小程序的生命周期说白了就是指程序从创建、到开始、暂停、唤起、停止、卸载的过程。</p>
<p>微信小程序生命周期包含了三个部分：</p>
<ul>
<ul>
<li>应用级别的生命周期（整个App的生命周期）</li>
<li>页面级别的生命周期（单个页面(page)的生命周期）</li>
<li>组件基本的生命周期（组件(component)的生命周期）<img src="https://img-blog.csdnimg.cn/20200612172050652.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3g1NTAzOTIyMzY=,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" class="medium-zoom-image"></li>
</ul>
</ul>
<h2 id="main-toc">3.1、小程序的启动流程</h2>
<p>通过了解小程序的启动流程，可以了解小程序的代码执行顺序。每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等，而且整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp() 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。官方文档</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427113611356-1009631457.png" alt="" width="857" height="338" loading="lazy"></p>
<p>小程序的启动流程简述：小程序在启动的时候会先下载小程序包，再启动小程序，然后加载 app.json 全局配置文件，然后在 app.js 中调用 App() 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。</p>
<h2>3.2、app生命周期</h2>
<p>app.js 文件下小程序的 App 相关生命周期代码如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> app.js</span>
<span style="color: rgba(0, 0, 0, 1)">App({
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">小程序初始化完成，会执行的生命周期函数 onLaunch</span>
onLaunch (options) {    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Do something initial when launch.    },    //例如网络请求、获取用户信息等：异步</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">小程序界面显示出来，会执行的生命周期函数 onShow</span>
onShow (options) {    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Do something when show.    },</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">小程序界面被隐藏时，会执行的生命周期函数 onHide，隐藏后小程序会在后台存活两个小时，该时间内打开小程序不会重新加载</span>
onHide () {    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Do something when hide.    },</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">小程序中发生错误时，会执行的生命周期函数 onError</span>
<span style="color: rgba(0, 0, 0, 1)">onError (msg) {    console.log(msg)    },
globalData: </span>'I am global data'    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">全局数据，可以在其他页面通过getApp()获取App()产生的实例对象</span>
                                    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">const app = getApp();    console.log(app.globalData.name);</span>
})</pre>
</div>
<p>注册完 App 实例后，会加载自定义组件并注册，之后会加载某一个页面（一般是app.json配置中的pages数组的第一个路径的页面，如果配置了编译环境的话，就会在该配置环境下先加载指定页面），首先会加载某个页面的 json 文件，读取该文件下的相关页面配置，然后是渲染 wxml 文件，将代码转化成 JS 对象，进而转化成 真实DOM树，然后把 DOM 树渲染出来。而且也会加载某个页面的 js 文件（双线程模型），会调用 Page() 函数，并绑定 Page 生命周期函数。</p>
<p>每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例，在注册时，可以绑定对应的生命周期函数，在小程序的生命周期函数中，执行对应的代码，具体的参数及介绍可以参考一下 官方文档。</p>
<p><strong>必须在 app.js 中调用，必须调用且只能调用一次</strong>。里面包含了几个app的生命周期钩子：</p>
<ol><ol>
<li><strong><code>onLaunch</code>： 小程序初始化完成时触发，全局只触发一次</strong>
<ul>
<li>云开发的初始化 方便其他页面直接调用云开发的SDK</li>
<li>发送请求获取用户的个人信息 方便其他页面使用</li>
<li>获取本地存储数据 方便其他页面使用</li>
<li>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册小程序</span>
<span style="color: rgba(0, 0, 0, 1)">App({
onLaunch(options){
    console.log(</span>"App-&gt;onLaunch:应用程序加载完成"<span style="color: rgba(0, 0, 0, 1)">,options);
}
})</span></pre>
</div>
</li>
<li>添加query参数</li>
<li>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428100242301-14018658.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428100303003-937912189.png" alt="" loading="lazy"></p>
<p>&nbsp;获取参数</p>
</li>
<li>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428100327519-1491901323.png" alt="" loading="lazy"></p>
.页面中获取启动对象</li>
<li>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
launchHandle(){
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获得启动参数</span>
    const options=<span style="color: rgba(0, 0, 0, 1)">wx.getLaunchOptionsSync();
    console.log(options);
}
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428100419346-292388093.png" alt="" loading="lazy"></p>
</li>
</ul>
</li>
<li><code>onShow</code>：小程序启动或切前台显示时触发。
<ul>
<li>重新启动定时器 继续定时执行功能</li>
<li>重新触发异步 获取新的数据</li>
<li>重新启动播放器等<br>.</li>



</ul>



</li>
<li><code>onHide</code>：小程序从前台进入后台时触发(如 切换到其他的App)。
<ul>
<li>当暂停定时器</li>
<li>暂停视频音频的播放</li>
<li>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230428100951103-458484601.png" alt="" loading="lazy"></p>


</li>



</ul>



</li>
<li><code>onError</code>：小程序发生脚本错误或 API 调用报错时触发。
<ul>
<li>收集错误信息 发送到后台 进行错误日志的记录</li>
<li>弹出窗口提示用户</li>
<li>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册小程序</span>
<span style="color: rgba(0, 0, 0, 1)">App({
onLaunch(options){
    console.log(</span>"App-&gt;onLaunch:应用程序加载完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onShow(options){
    console.log(</span>"App-&gt;onShow:小程序页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(){
    console.log(</span>"App-&gt;onHide:小程序页面隐藏"<span style="color: rgba(0, 0, 0, 1)">);
},
onError(err){
    console.log(</span>'应用程序发生了错误'<span style="color: rgba(0, 0, 0, 1)">,err);
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">全局数据</span>
<span style="color: rgba(0, 0, 0, 1)">globalData:{
    a:</span>100<span style="color: rgba(0, 0, 0, 1)">,
    b:</span>200<span style="color: rgba(0, 0, 0, 1)">
}
})</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
launchHandle(){
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获得启动参数</span>
    const options=<span style="color: rgba(0, 0, 0, 1)">wx.getLaunchOptionsSync();
    console.log(options);
},
errorHandler(){
    </span><span style="color: rgba(0, 0, 255, 1)">throw</span> <span style="color: rgba(0, 0, 255, 1)">new</span> Error("发生了异常！"<span style="color: rgba(0, 0, 0, 1)">);
}
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504084513534-2117829239.png" alt="" loading="lazy"></p>
</li>
</ul>
</li>
<li><code>onPageNotFound</code>：小程序要打开的页面不存在时触发。
<ul>
<li>监听报错，弹出窗口提示用户</li>
<li>监听报错，重新跳转页面<br>.</li>



</ul>



</li>
<li><code>onUnhandledRejection</code>：小程序有未处理的 Promise 拒绝时触发。
<ul>
<li>用在统一捕获处理 可以在该生命周期中处理错误情况 ，一般是由于异步代码出错导致的<br>.</li>



</ul>



</li>
<li><code>onThemeChange</code>：系统切换主题时触发。
<ul>
<li>让小程序可以跟着主题的切换 也改变小程序的UI风格，使之体验更好！</li>



</ul>



</li>



</ol></ol>
<p>示例：globalData</p>
<p>&nbsp;app.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册小程序</span>
<span style="color: rgba(0, 0, 0, 1)">App({
onLaunch(options){
    console.log(</span>"App-&gt;onLaunch:应用程序加载完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onShow(options){
    console.log(</span>"App-&gt;onShow:小程序页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(){
    console.log(</span>"App-&gt;onHide:小程序页面隐藏"<span style="color: rgba(0, 0, 0, 1)">);
},
onError(err){
    console.log(</span>'应用程序发生了错误'<span style="color: rgba(0, 0, 0, 1)">,err);
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">全局数据</span>
<span style="color: rgba(0, 0, 0, 1)">globalData:{
    a:</span>100<span style="color: rgba(0, 0, 0, 1)">,
    b:</span>200<span style="color: rgba(0, 0, 0, 1)">
}
})</span></pre>
</div>
<p>hello/index.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
getAppData(e)
{
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取应用实例</span>
    const app=<span style="color: rgba(0, 0, 0, 1)">getApp();
    console.log(app.globalData);
    console.log(app);
}
});</span></pre>
</div>
<p>结果</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504085417070-1390329214.png" alt="" width="1016" height="551" loading="lazy"></p>
<h2>3.3、page注册与生命周期</h2>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427150604612-167589774.png" alt="" width="794" height="496" loading="lazy"></p>
<p>对于小程序中的每个页面，都需要在页面对应的&nbsp;<code>js</code>&nbsp;文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。</p>
<p><code>onlaunch</code>：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）；<br><code>onLoad</code>: 页面加载小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。<br><code>onShow</code>: 页面显示页面载入后触发onShow方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或重新进入页面时）。<br><code>onReady</code>: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。<br><code>onHide</code>: 页面隐藏当navigateTo、底部tab切换、上传文件选择图片时调用。<br><code>onUnload</code>: 页面卸载当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用</p>
<h3 id="使用-Page-构造器注册页面">3.3.1、使用 Page 构造器注册页面</h3>
<p>简单的页面可以使用&nbsp;<code>Page()</code>&nbsp;进行构造。</p>
<p><strong>代码示例：</strong></p>
<div class="language-js extra-class">
<pre class="language-js"><code><span class="token comment">//index.js
<span class="token function">Page<span class="token punctuation">(<span class="token punctuation">{
data<span class="token operator">: <span class="token punctuation">{
    text<span class="token operator">: <span class="token string">"This is page data."
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onLoad<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token parameter">options<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面创建时执行
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onShow<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面出现在前台时执行
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onReady<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面首次渲染完毕时执行
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onHide<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面从前台变为后台时执行
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onUnload<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面销毁时执行
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onPullDownRefresh<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 触发下拉刷新时执行<br>　　//json文件中enablePullDownRefresh:true开启下拉刷新<br>   //wx<span class="token punctuation">.<span class="token function">stopPullDownRefresh<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">; <span class="token comment">数据更新完成后，调用该方法停止刷新</span></span></span></span></span></span><br>
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onReachBottom<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面触底时执行<br>　　//onReachBottomDistance
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onShareAppMessage<span class="token operator">: <span class="token keyword">function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面被用户分享时执行
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onPageScroll<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(options<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面滚动时执行<br>　　//scrollTop 距离
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">onResize<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// 页面尺寸变化时执行
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function">onTabItemTap<span class="token punctuation">(<span class="token parameter">item<span class="token punctuation">) <span class="token punctuation">{
    <span class="token comment">// tab 点击时执行
    console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(item<span class="token punctuation">.index<span class="token punctuation">)
    console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(item<span class="token punctuation">.pagePath<span class="token punctuation">)
    console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(item<span class="token punctuation">.text<span class="token punctuation">)
<span class="token punctuation">}<span class="token punctuation">,
<span class="token comment">// 事件响应函数
<span class="token function-variable function">viewTap<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token keyword">this<span class="token punctuation">.<span class="token function">setData<span class="token punctuation">(<span class="token punctuation">{
      text<span class="token operator">: <span class="token string">'Set some data for updating view.'
    <span class="token punctuation">}<span class="token punctuation">, <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
      <span class="token comment">// this is setData callback
    <span class="token punctuation">}<span class="token punctuation">)
<span class="token punctuation">}<span class="token punctuation">,
<span class="token comment">// 自由数据
customData<span class="token operator">: <span class="token punctuation">{
    hi<span class="token operator">: <span class="token string">'MINA'
<span class="token punctuation">}
<span class="token punctuation">}<span class="token punctuation">)
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>详细的参数含义和使用请参考&nbsp;Page 参考文档&nbsp;。</p>
<h3>3.3.2、page.onLoad</h3>
<p id="onLoad-Object-query">onLoad(Object query)</p>
<p>页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。</p>
<p>hello/index.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
}
});</span></pre>
</div>
<p>logs/logs</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">Page({
goPage(){
    wx.navigateTo({
      url: </span>'../hello/index?k1=v1&amp;a=100&amp;b=200'<span style="color: rgba(0, 0, 0, 1)">,
    })
}
})</span></pre>
</div>
<p>结果</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504093406987-1607917208.png" alt="" loading="lazy"></p>
<h3>3.3.3、page.onShow</h3>
<p>https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html</p>
<p id="Page-Object-object">页面显示/切入前台时触发。会反复执行</p>
<p>pages/hello/index</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
}
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504094057067-760810867.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504094124748-1316651629.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504094150920-1837548392.png" alt="" loading="lazy"></p>
<h3>3.3.4、page.onReady</h3>
<p>页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。</p>
<p>注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在<code>onReady</code>之后进行。详见生命周期</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504094858305-2125100230.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504095015805-486582723.png" alt="" loading="lazy"></p>
<p>&nbsp;从上面的截图可以看出，onReady与onShow都没有参数，onReady只会执行1次，如果页面实例没有被销毁重新创建时则只会执行一次。</p>
<h3>3.3.5、page.onHide()</h3>
<p>页面隐藏/切入后台时触发。 如&nbsp;wx.navigateTo&nbsp;或底部&nbsp;<code>tab</code>&nbsp;切换到其他页面，小程序切入后台等。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(options){
    console.log(</span>"Page-&gt;onHide:页面切入后台/隐藏"<span style="color: rgba(0, 0, 0, 1)">,options);
},
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504095623420-282282334.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504095642909-1585665800.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504095704160-439381414.png" alt="" loading="lazy"></p>
<h3>3.3.6、page.onUnload</h3>
<p>页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
redictHandle(e){
    wx.redirectTo({
      url: </span>'../hi/index'<span style="color: rgba(0, 0, 0, 1)">,
    })
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(options){
    console.log(</span>"Page-&gt;onHide:页面切入后台/隐藏"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onUnload(options){
    console.log(</span>"Page-&gt;onUnload:页面准备卸载"<span style="color: rgba(0, 0, 0, 1)">,options);
}
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504100415544-1828146587.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504100440985-546113253.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504100501879-1887303283.png" alt="" loading="lazy"></p>
<h3>&nbsp;3.3.7、page.onPullDownRefresh</h3>
<p>监听用户下拉刷新事件。</p>
<ul>
<li>需要在<code>app.json</code>的<code>window</code>选项中或页面配置中开启<code>enablePullDownRefresh</code>。</li>
<li>可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。</li>
<li>当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。</li>
</ul>
<p>修改pages/hello/index.json</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"usingComponents"<span style="color: rgba(0, 0, 0, 1)">: {},
</span>"navigationBarBackgroundColor": "#0f0"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarTitleText": "问候页"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarTextStyle": "black"<span style="color: rgba(0, 0, 0, 1)">,
</span>"enablePullDownRefresh": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
redictHandle(e){
    wx.redirectTo({
      url: </span>'../hi/index'<span style="color: rgba(0, 0, 0, 1)">,
    })
},
pullDownRefreshHandle(e){
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开始下拉刷新,没有下拉效果</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.startPullDownRefresh();
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(options){
    console.log(</span>"Page-&gt;onHide:页面切入后台/隐藏"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onUnload(options){
    console.log(</span>"Page-&gt;onUnload:页面准备卸载"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onPullDownRefresh(options){
    console.log(</span>"Page-&gt;onPullDownRefresh:下拉刷新"<span style="color: rgba(0, 0, 0, 1)">,options);
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果不及时停止下拉刷新则会过一会才会收起刷新</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.stopPullDownRefresh();
}
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504103834945-879982827.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230504103852125-707466087.png" alt="" loading="lazy"></p>
<h3>3.3.8、page.onReachBottom</h3>
<p>监听用户上拉触底事件。</p>
<ul>
<li>可以在<code>app.json</code>的<code>window</code>选项中或页面配置中设置触发距离<code>onReachBottomDistance</code>。</li>
<li>在触发距离内滑动期间，本事件只会被触发一次。</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
redictHandle(e){
    wx.redirectTo({
      url: </span>'../hi/index'<span style="color: rgba(0, 0, 0, 1)">,
    })
},
pullDownRefreshHandle(e){
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开始下拉刷新,没有下拉效果</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.startPullDownRefresh();
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(options){
    console.log(</span>"Page-&gt;onHide:页面切入后台/隐藏"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onUnload(options){
    console.log(</span>"Page-&gt;onUnload:页面准备卸载"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onPullDownRefresh(options){
    console.log(</span>"Page-&gt;onPullDownRefresh:下拉刷新"<span style="color: rgba(0, 0, 0, 1)">,options);
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果不及时停止下拉刷新则会过一会才会收起刷新</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.stopPullDownRefresh();
},
onReachBottom(options){
    console.log(</span>"Page-&gt;onReachBottom:上拉触底事件"<span style="color: rgba(0, 0, 0, 1)">,options);
}
});</span></pre>
</div>
<p>index.json</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"usingComponents"<span style="color: rgba(0, 0, 0, 1)">: {},
</span>"navigationBarBackgroundColor": "#0f0"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarTitleText": "问候页"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarTextStyle": "black"<span style="color: rgba(0, 0, 0, 1)">,
</span>"enablePullDownRefresh": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"onReachBottomDistance": 200<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p>运行效果</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230505084418218-1337684001.png" alt="" width="1074" height="597" loading="lazy"></p>
<h3>3.3.9、page.onShareAppMessage</h3>
<p>https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object</p>
<p>监听用户点击页面内转发按钮（button&nbsp;组件&nbsp;<code>open-type="share"</code>）或右上角菜单“转发”按钮的行为，并自定义转发内容。</p>
<p><strong>注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮</strong></p>
<p><strong>参数 Object object</strong>:</p>
<div class="table-wrp">
<table>
<thead>
<tr><th>参数</th><th>类型</th><th>说明</th><th>最低版本</th></tr>
</thead>
<tbody>
<tr>
<td>from</td>
<td>String</td>
<td>转发事件来源。<br><code>button</code>：页面内转发按钮；<br><code>menu</code>：右上角转发菜单</td>
<td>1.2.4</td>

</tr>
<tr>
<td>target</td>
<td>Object</td>
<td>如果&nbsp;<code>from</code>&nbsp;值是&nbsp;<code>button</code>，则&nbsp;<code>target</code>&nbsp;是触发这次转发事件的&nbsp;<code>button</code>，否则为&nbsp;<code>undefined</code></td>
<td>1.2.4</td>

</tr>
<tr>
<td>webViewUrl</td>
<td>String</td>
<td>页面中包含web-view组件时，返回当前web-view的url</td>
<td>1.6.4</td>

</tr>

</tbody>

</table>

</div>
<p>此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容如下：</p>
<p><strong>自定义转发内容</strong>&nbsp;基础库&nbsp;2.8.1&nbsp;起，分享图支持云图片。</p>
<div class="table-wrp">
<table>
<thead>
<tr><th>字段</th><th>说明</th><th>默认值</th><th>最低版本</th></tr>

</thead>
<tbody>
<tr>
<td>title</td>
<td>转发标题</td>
<td>当前小程序名称</td>
<td>&nbsp;</td>

</tr>
<tr>
<td>path</td>
<td>转发路径</td>
<td>当前页面 path ，必须是以 / 开头的完整路径</td>
<td>&nbsp;</td>

</tr>
<tr>
<td>imageUrl</td>
<td>自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。</td>
<td>使用默认截图</td>
<td>1.5.0</td>

</tr>
<tr>
<td>promise</td>
<td>如果该参数存在，则以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数</td>
<td>&nbsp;</td>
<td>2.12.0</td>

</tr>

</tbody>

</table>

</div>
<p><strong>示例代码</strong></p>
<p>在开发者工具中预览效果</p>
<div class="language-javascript extra-class">
<pre class="language-javascript"><code><span class="token function">Page<span class="token punctuation">(<span class="token punctuation">{
<span class="token function">onShareAppMessage<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token keyword">const promise <span class="token operator">= <span class="token keyword">new <span class="token class-name">Promise<span class="token punctuation">(<span class="token parameter">resolve <span class="token operator">=&gt; <span class="token punctuation">{
      <span class="token function">setTimeout<span class="token punctuation">(<span class="token punctuation">(<span class="token punctuation">) <span class="token operator">=&gt; <span class="token punctuation">{
      <span class="token function">resolve<span class="token punctuation">(<span class="token punctuation">{
          title<span class="token operator">: <span class="token string">'自定义转发标题'
      <span class="token punctuation">}<span class="token punctuation">)
      <span class="token punctuation">}<span class="token punctuation">, <span class="token number">2000<span class="token punctuation">)
    <span class="token punctuation">}<span class="token punctuation">)
    <span class="token keyword">return <span class="token punctuation">{
      title<span class="token operator">: <span class="token string">'自定义转发标题'<span class="token punctuation">,
      path<span class="token operator">: <span class="token string">'/page/user?id=123'<span class="token punctuation">,
      promise
    <span class="token punctuation">}
<span class="token punctuation">}
<span class="token punctuation">}<span class="token punctuation">)<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
redictHandle(e){
    wx.redirectTo({
      url: </span>'../hi/index'<span style="color: rgba(0, 0, 0, 1)">,
    })
},
pullDownRefreshHandle(e){
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开始下拉刷新,没有下拉效果</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.startPullDownRefresh();
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(options){
    console.log(</span>"Page-&gt;onHide:页面切入后台/隐藏"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onUnload(options){
    console.log(</span>"Page-&gt;onUnload:页面准备卸载"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onPullDownRefresh(options){
    console.log(</span>"Page-&gt;onPullDownRefresh:下拉刷新"<span style="color: rgba(0, 0, 0, 1)">,options);
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果不及时停止下拉刷新则会过一会才会收起刷新</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.stopPullDownRefresh();
},
onReachBottom(options){
    console.log(</span>"Page-&gt;onReachBottom:上拉触底事件"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onShareAppMessage(options){
    console.log(</span>"Page-&gt;onShareAppMessage:分享事件"<span style="color: rgba(0, 0, 0, 1)">,options);

    const promise </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Promise(resolve =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      setTimeout(() </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      resolve({
          title: </span>'自定义转发标题A'<span style="color: rgba(0, 0, 0, 1)">
      })
      }, </span>2000<span style="color: rgba(0, 0, 0, 1)">)
    })
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
      title: </span>'自定义转发标题B'<span style="color: rgba(0, 0, 0, 1)">,
      path: </span>'/hello/index?id=123'<span style="color: rgba(0, 0, 0, 1)">,
      promise
    }
}
});</span></pre>
</div>
<p>index.wxml</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(255, 0, 0, 1)"> bindtap</span><span style="color: rgba(0, 0, 255, 1)">="countHandle"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>{{count}}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(255, 0, 0, 1)"> bindtap</span><span style="color: rgba(0, 0, 255, 1)">="redictHandle"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>重定向<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(255, 0, 0, 1)"> bindtap</span><span style="color: rgba(0, 0, 255, 1)">="pullDownRefreshHandle"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>触发下拉刷新<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">open-type</span><span style="color: rgba(0, 0, 255, 1)">="share"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>分享<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="m"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>运行效果</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230505085706898-85351799.png" alt="" loading="lazy"></p>
<h3>&nbsp;3.3.10、page.onPageScroll</h3>
<p>监听用户滑动页面事件。</p>
<p><strong>参数 Object object</strong>:</p>
<div class="table-wrp">
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>scrollTop</td>
<td>Number</td>
<td>页面在垂直方向已滚动的距离（单位px）</td>
</tr>
</tbody>
</table>
</div>
<p><strong>注意：请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。</strong>&nbsp;<strong>注意：请避免在 onPageScroll 中过于频繁的执行&nbsp;<code>setData</code>&nbsp;等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时。</strong></p>
<div class="language-javascript extra-class">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
redictHandle(e){
    wx.redirectTo({
      url: </span>'../hi/index'<span style="color: rgba(0, 0, 0, 1)">,
    })
},
pullDownRefreshHandle(e){
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开始下拉刷新,没有下拉效果</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.startPullDownRefresh();
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(options){
    console.log(</span>"Page-&gt;onHide:页面切入后台/隐藏"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onUnload(options){
    console.log(</span>"Page-&gt;onUnload:页面准备卸载"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onPullDownRefresh(options){
    console.log(</span>"Page-&gt;onPullDownRefresh:下拉刷新"<span style="color: rgba(0, 0, 0, 1)">,options);
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果不及时停止下拉刷新则会过一会才会收起刷新</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.stopPullDownRefresh();
},
onReachBottom(options){
    console.log(</span>"Page-&gt;onReachBottom:上拉触底事件"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onShareAppMessage(options){
    console.log(</span>"Page-&gt;onShareAppMessage:分享事件"<span style="color: rgba(0, 0, 0, 1)">,options);

    const promise </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Promise(resolve =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      setTimeout(() </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      resolve({
          title: </span>'自定义转发标题A'<span style="color: rgba(0, 0, 0, 1)">
      })
      }, </span>2000<span style="color: rgba(0, 0, 0, 1)">)
    })
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
      title: </span>'自定义转发标题B'<span style="color: rgba(0, 0, 0, 1)">,
      path: </span>'/hello/index?id=123'<span style="color: rgba(0, 0, 0, 1)">,
      promise
    }
},
onPageScroll(options){
    console.log(</span>"Page-&gt;onPageScroll:滚动事件"<span style="color: rgba(0, 0, 0, 1)">,options);
}
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230505090305022-1432824593.png" alt="" loading="lazy"></p>
<h3>&nbsp;3.3.11、page.onResize</h3>
<p>小程序屏幕旋转时触发。详见&nbsp;响应显示区域变化</p>
</div>
<p id="显示区域尺寸"><strong>显示区域尺寸</strong></p>
<p>显示区域指小程序界面中可以自由布局展示的区域。在默认情况下，小程序显示区域的尺寸自页面初始化起就不会发生变化。但以下两种方式都可以改变这一默认行为。</p>
<p id="在手机上启用屏幕旋转支持"><strong>在手机上启用屏幕旋转支持</strong></p>
<p>从小程序基础库版本&nbsp;2.4.0&nbsp;开始，小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是：在&nbsp;<code>app.json</code>&nbsp;的&nbsp;<code>window</code>&nbsp;段中设置&nbsp;<code>"pageOrientation": "auto"</code>&nbsp;，或在页面 json 文件中配置&nbsp;<code>"pageOrientation": "auto"</code>&nbsp;。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"usingComponents"<span style="color: rgba(0, 0, 0, 1)">: {},
</span>"navigationBarBackgroundColor": "#0f0"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarTitleText": "问候页"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarTextStyle": "black"<span style="color: rgba(0, 0, 0, 1)">,
</span>"enablePullDownRefresh": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"onReachBottomDistance": 200<span style="color: rgba(0, 0, 0, 1)">,
</span>"pageOrientation": "auto"<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p>hello/index.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
redictHandle(e){
    wx.redirectTo({
      url: </span>'../hi/index'<span style="color: rgba(0, 0, 0, 1)">,
    })
},
pullDownRefreshHandle(e){
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开始下拉刷新,没有下拉效果</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.startPullDownRefresh();
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(options){
    console.log(</span>"Page-&gt;onHide:页面切入后台/隐藏"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onUnload(options){
    console.log(</span>"Page-&gt;onUnload:页面准备卸载"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onPullDownRefresh(options){
    console.log(</span>"Page-&gt;onPullDownRefresh:下拉刷新"<span style="color: rgba(0, 0, 0, 1)">,options);
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果不及时停止下拉刷新则会过一会才会收起刷新</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.stopPullDownRefresh();
},
onReachBottom(options){
    console.log(</span>"Page-&gt;onReachBottom:上拉触底事件"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onShareAppMessage(options){
    console.log(</span>"Page-&gt;onShareAppMessage:分享事件"<span style="color: rgba(0, 0, 0, 1)">,options);

    const promise </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Promise(resolve =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      setTimeout(() </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      resolve({
          title: </span>'自定义转发标题A'<span style="color: rgba(0, 0, 0, 1)">
      })
      }, </span>2000<span style="color: rgba(0, 0, 0, 1)">)
    })
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
      title: </span>'自定义转发标题B'<span style="color: rgba(0, 0, 0, 1)">,
      path: </span>'/hello/index?id=123'<span style="color: rgba(0, 0, 0, 1)">,
      promise
    }
},
onPageScroll(options){
    console.log(</span>"Page-&gt;onPageScroll:滚动事件"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onResize(options){
    console.log(</span>"Page-&gt;onResize:旋转屏幕"<span style="color: rgba(0, 0, 0, 1)">,options);
}
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230505091221011-846913191.png" alt="" loading="lazy"></p>
</div>
<h3 class="language-javascript"><code>3.3.12、page.onTabItemTap</code></h3>
<p>点击 tab 时触发</p>
<p><strong>Object 参数说明：</strong></p>
<div class="table-wrp">
<table>
<thead>
<tr><th>参数</th><th>类型</th><th>说明</th><th>最低版本</th></tr>
</thead>
<tbody>
<tr>
<td>index</td>
<td>String</td>
<td>被点击tabItem的序号，从0开始</td>
<td>1.9.0</td>
</tr>
<tr>
<td>pagePath</td>
<td>String</td>
<td>被点击tabItem的页面路径</td>
<td>1.9.0</td>
</tr>
<tr>
<td>text</td>
<td>String</td>
<td>被点击tabItem的按钮文字</td>
<td>1.9.0</td>
</tr>
</tbody>
</table>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册页面</span>
<span style="color: rgba(0, 0, 0, 1)">Page({
data:{
    count:</span>100<span style="color: rgba(0, 0, 0, 1)">
},
countHandle(e){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">})
},
redictHandle(e){
    wx.redirectTo({
      url: </span>'../hi/index'<span style="color: rgba(0, 0, 0, 1)">,
    })
},
pullDownRefreshHandle(e){
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开始下拉刷新,没有下拉效果</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.startPullDownRefresh();
},
onLoad(query){
    console.log(</span>"Page-&gt;onLoad:页面加载成功"<span style="color: rgba(0, 0, 0, 1)">,query)
},
onShow(options){
    console.log(</span>"Page-&gt;onShow:页面显示"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onReady(options){
    console.log(</span>"Page-&gt;onReady:页面准备完成"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onHide(options){
    console.log(</span>"Page-&gt;onHide:页面切入后台/隐藏"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onUnload(options){
    console.log(</span>"Page-&gt;onUnload:页面准备卸载"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onPullDownRefresh(options){
    console.log(</span>"Page-&gt;onPullDownRefresh:下拉刷新"<span style="color: rgba(0, 0, 0, 1)">,options);
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果不及时停止下拉刷新则会过一会才会收起刷新</span>
<span style="color: rgba(0, 0, 0, 1)">    wx.stopPullDownRefresh();
},
onReachBottom(options){
    console.log(</span>"Page-&gt;onReachBottom:上拉触底事件"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onShareAppMessage(options){
    console.log(</span>"Page-&gt;onShareAppMessage:分享事件"<span style="color: rgba(0, 0, 0, 1)">,options);

    const promise </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Promise(resolve =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      setTimeout(() </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      resolve({
          title: </span>'自定义转发标题A'<span style="color: rgba(0, 0, 0, 1)">
      })
      }, </span>2000<span style="color: rgba(0, 0, 0, 1)">)
    })
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
      title: </span>'自定义转发标题B'<span style="color: rgba(0, 0, 0, 1)">,
      path: </span>'/hello/index?id=123'<span style="color: rgba(0, 0, 0, 1)">,
      promise
    }
},
onPageScroll(options){
    console.log(</span>"Page-&gt;onPageScroll:滚动事件"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onResize(options){
    console.log(</span>"Page-&gt;onResize:旋转屏幕"<span style="color: rgba(0, 0, 0, 1)">,options);
},
onTabItemTap(options){
    console.log(</span>"Page-&gt;onTabItemTap:切换选项卡"<span style="color: rgba(0, 0, 0, 1)">,options);
}
});</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230505092930012-776174894.png" alt="" loading="lazy"></p>
<h3 id="在页面中使用-behaviors">3.3.13、在页面中使用 behaviors</h3>
<blockquote>
<p>基础库 2.9.2 开始支持，低版本需做兼容处理。</p>
</blockquote>
<p>页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。</p>
<div class="language-js extra-class">
<pre class="language-js"><code><span class="token comment">// my-behavior.js
module<span class="token punctuation">.exports <span class="token operator">= <span class="token function">Behavior<span class="token punctuation">(<span class="token punctuation">{
data<span class="token operator">: <span class="token punctuation">{
    sharedText<span class="token operator">: <span class="token string">'This is a piece of data shared between pages.'
<span class="token punctuation">}<span class="token punctuation">,
methods<span class="token operator">: <span class="token punctuation">{
    <span class="token function-variable function">sharedMethod<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
      <span class="token keyword">this<span class="token punctuation">.data<span class="token punctuation">.sharedText <span class="token operator">=== <span class="token string">'This is a piece of data shared between pages.'
    <span class="token punctuation">}
<span class="token punctuation">}
<span class="token punctuation">}<span class="token punctuation">)
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code><span class="token comment">// page-a.js
<span class="token keyword">var myBehavior <span class="token operator">= <span class="token function">require<span class="token punctuation">(<span class="token string">'./my-behavior.js'<span class="token punctuation">)
<span class="token function">Page<span class="token punctuation">(<span class="token punctuation">{
behaviors<span class="token operator">: <span class="token punctuation"><span class="token punctuation">,
<span class="token function-variable function">onLoad<span class="token operator">: <span class="token keyword">function<span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    <span class="token keyword">this<span class="token punctuation">.data<span class="token punctuation">.sharedText <span class="token operator">=== <span class="token string">'This is a piece of data shared between pages.'
<span class="token punctuation">}
<span class="token punctuation">}<span class="token punctuation">)
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>具体用法参见&nbsp;behaviors&nbsp;。</p>
<p>在pages下面定义countBehavior.js文件，共享部分：</p>
<div class="cnblogs_code">
<pre>module.exports=<span style="color: rgba(0, 0, 0, 1)">Behavior({
data:{
    count:</span>999<span style="color: rgba(0, 0, 0, 1)">
},
methods:{
    countHandler(e){
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.setData({count:<span style="color: rgba(0, 0, 255, 1)">this</span>.data.count+1<span style="color: rgba(0, 0, 0, 1)">});
    }
}
})</span></pre>
</div>
<p>hello/index.js文件</p>
<div class="cnblogs_code">
<pre>const countBehavior=require("../countBehavior"<span style="color: rgba(0, 0, 0, 1)">);
Page({
behaviors:
})</span></pre>
</div>
<p>hello/index.wxml</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(255, 0, 0, 1)"> bindtap</span><span style="color: rgba(0, 0, 255, 1)">="countHandler"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>{{count}}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>运行效果</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230505094210106-1875352524.png" alt="" loading="lazy"></p>
<p>&nbsp;logs/logs.js</p>
<div class="cnblogs_code">
<pre>const countBehavior=require("../countBehavior"<span style="color: rgba(0, 0, 0, 1)">);
Page({
behaviors:
})</span></pre>
</div>
<p>logs/logs.wxml</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(255, 0, 0, 1)"> bindtap</span><span style="color: rgba(0, 0, 255, 1)">="countHandler"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>{{count}}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>运行效果</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230505094315322-828418090.png" alt="" loading="lazy"></p>
<p>&nbsp;生命周期函数一样可以复用</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202305/63651-20230505094703953-596553810.png" alt="" loading="lazy"></p>
<p><code>behaviors</code>&nbsp;是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。</p>
<p>每个&nbsp;<code>behavior</code>&nbsp;可以包含一组属性、数据、生命周期函数和方法。<strong>组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。</strong>&nbsp;每个组件可以引用多个&nbsp;<code>behavior</code>&nbsp;，<code>behavior</code>&nbsp;也可以引用其它&nbsp;<code>behavior</code>&nbsp;。</p>
<p>详细的参数含义和使用请参考&nbsp;Behavior 参考文档。</p>
<h4 id="组件中使用">组件中使用</h4>
<p>组件引用时，在&nbsp;<code>behaviors</code>&nbsp;定义段中将它们逐个列出即可。</p>
<p><strong>代码示例：</strong></p>
<p>在开发者工具中预览效果</p>
<div class="language-js extra-class">
<pre class="language-js"><code><span class="token comment">// my-component.js
<span class="token keyword">var myBehavior <span class="token operator">= <span class="token function">require<span class="token punctuation">(<span class="token string">'my-behavior'<span class="token punctuation">)
<span class="token function">Component<span class="token punctuation">(<span class="token punctuation">{
behaviors<span class="token operator">: <span class="token punctuation"><span class="token punctuation">,
properties<span class="token operator">: <span class="token punctuation">{
    myProperty<span class="token operator">: <span class="token punctuation">{
      type<span class="token operator">: String
    <span class="token punctuation">}
<span class="token punctuation">}<span class="token punctuation">,
data<span class="token operator">: <span class="token punctuation">{
    myData<span class="token operator">: <span class="token string">'my-component-data'
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">created<span class="token operator">: <span class="token keyword">function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(<span class="token string">' created'<span class="token punctuation">)
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">attached<span class="token operator">: <span class="token keyword">function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(<span class="token string">' attached'<span class="token punctuation">)
<span class="token punctuation">}<span class="token punctuation">,
<span class="token function-variable function">ready<span class="token operator">: <span class="token keyword">function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
    console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(<span class="token string">' ready'<span class="token punctuation">)
<span class="token punctuation">}<span class="token punctuation">,
methods<span class="token operator">: <span class="token punctuation">{
    <span class="token function-variable function">myMethod<span class="token operator">: <span class="token keyword">function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
      console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(<span class="token string">' log by myMethod'<span class="token punctuation">)
    <span class="token punctuation">}<span class="token punctuation">,
<span class="token punctuation">}
<span class="token punctuation">}<span class="token punctuation">)
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>在上例中，&nbsp;<code>my-component</code>&nbsp;组件定义中加入了&nbsp;<code>my-behavior</code>，</p>
<p>而&nbsp;<code>my-behavior</code>&nbsp;结构为：</p>
<ul>
<li>属性：<code>myBehaviorProperty</code></li>
<li>数据字段：<code>myBehaviorData</code></li>
<li>方法：<code>myBehaviorMethod</code></li>
<li>生命周期函数：<code>attached</code>、<code>created</code>、<code>ready</code></li>
</ul>
<p>这将使&nbsp;<code>my-component</code>&nbsp;最终结构为：</p>
<ul>
<li>属性：<code>myBehaviorProperty</code>、<code>myProperty</code></li>
<li>数据字段：<code>myBehaviorData</code>、<code>myData</code></li>
<li>方法：<code>myBehaviorMethod</code>、<code>myMethod</code></li>
<li>生命周期函数：<code>attached</code>、<code>created</code>、<code>ready</code></li>
</ul>
<p>当组件触发生命周期时，上例生命周期函数执行顺序为：</p>
<ol>
<li><code> created</code></li>
<li><code> created</code></li>
<li><code> attached</code></li>
<li><code> attached</code></li>
<li><code> ready</code></li>
<li><code> ready</code></li>
</ol>
<p>详细规则参考&nbsp;<strong>同名字段的覆盖和组合规则</strong>。</p>
<h4 id="同名字段的覆盖和组合规则">同名字段的覆盖和组合规则</h4>
<p>组件和它引用的&nbsp;<code>behavior</code>&nbsp;中可以包含同名的字段，对这些字段的处理方法如下：</p>
<ul>
<li>如果有同名的属性 (properties) 或方法 (methods)：<ol>
<li>若组件本身有这个属性或方法，则组件的属性或方法会覆盖&nbsp;<code>behavior</code>&nbsp;中的同名属性或方法；</li>
<li>若组件本身无这个属性或方法，则在组件的&nbsp;<code>behaviors</code>&nbsp;字段中定义靠后的&nbsp;<code>behavior</code>&nbsp;的属性或方法会覆盖靠前的同名属性或方法；</li>
<li>在 2 的基础上，若存在嵌套引用&nbsp;<code>behavior</code>&nbsp;的情况，则规则为：<code>引用者 behavior</code>&nbsp;覆盖&nbsp;<code>被引用的 behavior</code>&nbsp;中的同名属性或方法。</li>
</ol></li>
<li>如果有同名的数据字段 (data)：
<ul>
<li>若同名的数据字段都是对象类型，会进行对象合并；</li>
<li>其余情况会进行数据覆盖，覆盖规则为：&nbsp;<code>引用者 behavior</code>&nbsp;&gt;&nbsp;<code>被引用的 behavior</code>&nbsp;、&nbsp;<code>靠后的 behavior</code>&nbsp;&gt;&nbsp;<code>靠前的 behavior</code>。（优先级高的覆盖优先级低的，最大的为优先级最高）</li>
</ul>
</li>
<li>生命周期函数和 observers 不会相互覆盖，而是在对应触发时机被逐个调用：
<ul>
<li>对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；</li>
<li>对于同种生命周期函数和同字段 observers ，遵循如下规则：
<ul>
<li><code>behavior</code>&nbsp;优先于组件执行；</li>
<li><code>被引用的 behavior</code>&nbsp;优先于&nbsp;<code>引用者 behavior</code>&nbsp;执行；</li>
<li><code>靠前的 behavior</code>&nbsp;优先于&nbsp;<code>靠后的 behavior</code>&nbsp;执行；</li>
</ul>
</li>
<li>如果同一个&nbsp;<code>behavior</code>&nbsp;被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行。</li>
</ul>
</li>
</ul>
<p><strong>代码示例：</strong></p>
<p>在开发者工具中预览效果</p>
<h4 id="内置-behaviors">内置 behaviors</h4>
<p>自定义组件可以通过引用内置的&nbsp;<code>behavior</code>&nbsp;来获得内置组件的一些行为。</p>
<div class="language-js extra-class">
<pre class="language-js"><code><span class="token function">Component<span class="token punctuation">(<span class="token punctuation">{
behaviors<span class="token operator">: <span class="token punctuation">[<span class="token string">'wx://form-field'<span class="token punctuation">]
<span class="token punctuation">}<span class="token punctuation">)
</span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>在上例中，&nbsp;<code>wx://form-field</code>&nbsp;代表一个内置&nbsp;<code>behavior</code>&nbsp;，它使得这个自定义组件有类似于表单控件的行为。</p>
<p>内置&nbsp;<code>behavior</code>&nbsp;往往会为组件添加一些属性。在没有特殊说明时，组件可以覆盖这些属性来改变它的&nbsp;<code>type</code>&nbsp;或添加&nbsp;<code>observer</code>&nbsp;。</p>
<h4 id="wx-form-field">wx://form-field</h4>
<p>使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值。</p>
<p>详细用法以及代码示例可见：form 组件参考文档</p>
<h4 id="wx-form-field-group">wx://form-field-group</h4>
<p>从基础库版本&nbsp;2.10.2&nbsp;开始提供支持。</p>
<p>使 form 组件可以识别到这个自定义组件内部的所有表单控件。</p>
<p>详细用法以及代码示例可见：form 组件参考文档</p>
<h4 id="wx-form-field-button">wx://form-field-button</h4>
<p>从基础库版本&nbsp;2.10.3&nbsp;开始提供支持。</p>
<p>使 form 组件可以识别到这个自定义组件内部的 button 。如果自定义组件内部有设置了 form-type 的 button ，它将被组件外的 form 接受。</p>
<p>详细用法以及代码示例可见：form 组件参考文档</p>
<h4 id="wx-component-export">wx://component-export</h4>
<p>从基础库版本&nbsp;2.2.3&nbsp;开始提供支持。</p>
<p>使自定义组件支持&nbsp;<code>export</code>&nbsp;定义段。这个定义段可以用于指定组件被&nbsp;<code>selectComponent</code>&nbsp;调用时的返回值。</p>
<p>详细用法以及代码示例可见：selectComponent 参考文档</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230427111353692-437260612.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<div>
<div>
<h5>onLoad(Object query)</h5>
<p>页面加载时触发，一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数，一般建议在这个函数中做一些数据初始化的工作。</p>
<h5>onShow()</h5>
<p>页面显示/切入前台时触发，比如：新推入了一个新的页面，那么原来的页面就处于后台，这时如果把新页面又移除掉，那么下面的页面就会调用onShow方法</p>
<h5>onReady()</h5>
<p>页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互，对界面内容进行设置的API，可以在这个页面中进行执行</p>
<h5>onHide()</h5>
<p>页面隐藏/切入后台时触发，如：navigateTo或底部tab切换至其他页面，小程序切入后台等</p>
<h5>onUnload()</h5>
<p>页面卸载时触发，如：redirectTo或navigateBack到其他页面</p>
</div>
</div>
<h2>3.4、总结</h2>
<div>
<p>1. 打开小程序：</p>
<p>(App)onLaunch --&gt; (App)onShow --&gt; (Pages)onLoad --&gt; (Pages)onShow --&gt; (pages)onReady</p>
<p>2. 进入下一个页面：</p>
<p>(Pages)onHide --&gt; (Next)onLoad --&gt; (Next)onShow --&gt; (Next)onReady</p>
<p>3. 返回上一个页面：</p>
<p>(curr)onUnload --&gt; (pre)onShow</p>
<p>4. 离开小程序：</p>
<p>(App)onHide</p>
<p>5. 再次进入：</p>
<p>小程序未销毁 --&gt; (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行.</p>
</div>
<h1>四、视频</h1>
<p>【微信小程序开发】 https://www.bilibili.com/video/BV1pv4y1n7Zg/?share_source=copy_web&amp;vd_source=475a31f3c5d6353a782007cd4c638a8a</p>
<h1>五、作业</h1><br><br>
来源：https://www.cnblogs.com/best/p/17354973.html

查看完整版本: 微信小程序开发学习笔记（三）——WXSS、WXS（WeiXin Script）、生命周期