微信小程序详解笔记

分手后的思念是犯贱 2022-11-07 04:21 405阅读 0赞

## 1、小程序结构目录 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70][]

## 2、全局配置文件 ##

小程序根目录下的** `app.json` **文件用来对微信小程序进行全局配置。

###       2-1、pages字段 ###

在这个app.json文件的pages第一个放置的就是第一个页面，并且可以在这里快速创建页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 1][]

pages字段——用于描述当前小程序的**所有页面路径**

###      2-2、window字段（页面配置） ###

![2021031210460086.png][]

window字段——定义小程序所有页面顶部背景颜色、文字颜色定义等。

**常用的解释：**

<table> 
 <tbody> 
  <tr> 
   <td style="width:412px;"><span style="color:#f33b45;"><strong>属性</strong></span></td> 
   <td style="width:342px;"><span style="color:#f33b45;"><strong>类型</strong></span></td> 
   <td style="width:348px;"><span style="color:#f33b45;"><strong>默认值</strong></span></td> 
   <td><span style="color:#f33b45;"><strong>描述</strong></span></td> 
   <td><span style="color:#f33b45;"><strong>截图</strong></span></td> 
  </tr> 
  <tr> 
   <td style="width:412px;"> <p><strong><span style="color:#f33b45;">navigationBar</span>BackgroundColor</strong></p> </td> 
   <td style="width:342px;">HexColor</td> 
   <td style="width:348px;">#000000</td> 
   <td><strong>导航栏背景颜色</strong></td> 
   <td><img alt="" height="41" src="https://img-blog.csdnimg.cn/20210312105542502.png" width="202"></td> 
  </tr> 
  <tr> 
   <td style="width:412px;"> <p><span style="color:#f33b45;"><strong>navigationBar</strong></span>TitleText</p> </td> 
   <td style="width:342px;">string</td> 
   <td style="width:348px;">weixin</td> 
   <td><strong>导航栏标题文字内容</strong></td> 
   <td><img alt="" height="43" src="https://img-blog.csdnimg.cn/20210312105729841.png" width="205"></td> 
  </tr> 
  <tr> 
   <td style="width:412px;"><strong><span style="color:#f33b45;">navigationBar</span></strong>TextStyle</td> 
   <td style="width:342px;">String</td> 
   <td style="width:348px;">white</td> 
   <td><strong>导航栏标题颜色，仅支持&nbsp;<span style="color:#f33b45;"><code>black</code>&nbsp;/&nbsp;<code>white</code></span></strong></td> 
   <td>如上</td> 
  </tr> 
  <tr> 
   <td style="width:412px;"><span style="color:#f33b45;"><strong>backgroundTextStyle</strong></span></td> 
   <td style="width:342px;">String</td> 
   <td style="width:348px;">dark</td> 
   <td><strong>下拉 loading 的样式，仅支持<span style="color:#f33b45;">&nbsp;<code>dark</code>&nbsp;/&nbsp;<code>light</code></span><code>，但是这个必须和</code></strong> <p><strong>enablePullDownRefresh的值必须设置为true</strong></p> </td> 
   <td><img alt="" height="62" src="https://img-blog.csdnimg.cn/2021031211012362.png" width="189"></td> 
  </tr> 
  <tr> 
   <td style="width:412px;"><strong><span style="color:#f33b45;">enablePullDownRefresh</span></strong></td> 
   <td style="width:342px;">boolean</td> 
   <td style="width:348px;">false</td> 
   <td><strong>是否开启当前页面刷新</strong></td> 
   <td>如上</td> 
  </tr> 
 </tbody> 
</table>

想了解更多：[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]

###       2-3、tabbar字段  ###

底部 `tab` 栏的表现，如下图：

![2021031211110755.png][]

这个tabbar是和pages，window同级别的（输入tabbar就会自动生成一些代码）

附上代码截图，加以解释：

![20210312111756447.png][]

###             1）list字段（重点） ###

<table> 
 <tbody> 
  <tr> 
   <td><span style="color:#f33b45;"><strong>属性</strong></span></td> 
   <td><span style="color:#f33b45;"><strong>类型</strong></span></td> 
   <td><span style="color:#f33b45;"><strong>说明</strong></span></td> 
  </tr> 
  <tr> 
   <td>pagePath</td> 
   <td>String</td> 
   <td>页面路径，必须在 pages 中先定义</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>tab按钮上的文字内容</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>String</td> 
   <td>图片路径，icon 大小限制为 40kb（没有选中的图片路径）</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>String</td> 
   <td>选中时的图片路径，icon 大小限制为 40kb （选中的图片路径）</td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 2][]  ![20210312114545402.png][]

其中 list 接受一个数组，**只能配置最少 2 个、最多 5 个 tab。**

###           2）其他字段 ###

<table> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>类型</strong></td> 
   <td><strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>tab 上的文字默认颜色，仅支持十六进制颜色。</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>tab 上的文字选中时的颜色，仅支持十六进制颜色。</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>tab 的背景色，仅支持十六进制颜色。</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>string</td> 
   <td>tabbar 上边框的颜色，<span style="color:#f33b45;"><strong> 仅支持&nbsp;<code>black</code>&nbsp;/&nbsp;<code>white</code></strong></span></td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>tabBar 的位置，<span style="color:#f33b45;"><strong>仅支持&nbsp;<code>bottom</code>&nbsp;/&nbsp;<code>top</code></strong></span></td> 
  </tr> 
 </tbody> 
</table>

![20210313115541757.png][] ![20210313115720148.png][]

## 3、小程序开发三剑客 ##

##   wxml+wxss+js ##

**wxml：**用来布局组件，类似html

**wxss：**显示样式，类似css

**js：**用来处理逻辑，什么功能的

## 4、小程序文件和传统web对比 ##

<table> 
 <thead> 
  <tr> 
   <th>结构</th> 
   <th>小程序</th> 
   <th>传统web</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>结构布局</td> 
   <td>Wxml</td> 
   <td>html</td> 
  </tr> 
  <tr> 
   <td>样式</td> 
   <td>Wxss</td> 
   <td>css</td> 
  </tr> 
  <tr> 
   <td>逻辑</td> 
   <td>JavaScript</td> 
   <td>JavaScript</td> 
  </tr> 
  <tr> 
   <td>配置</td> 
   <td>Json</td> 
   <td>无</td> 
  </tr> 
 </tbody> 
</table>

## 5、新建页面的快捷键 ##

点击app.json，添加相应的页面路径，如**"pages/main/main",**"保存就会自动生成一个页面文件（**在pages目录下生成一个main文件**）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 3][]

## 6、页面配置文件 ##

每一个小程序页面也可以使用** `.json` 文件**来对本页面的窗口表现进行配置，页面中配置项在当前页面**会覆盖 `app.json` 的 `window` 中相同的配置项。**

**下面的在window****字段中****可以使用的都可以使用。**

<table> 
 <tbody> 
  <tr> 
   <td style="width:412px;"><span style="color:#f33b45;"><strong>属性</strong></span></td> 
   <td style="width:342px;"><span style="color:#f33b45;"><strong>类型</strong></span></td> 
   <td style="width:348px;"><span style="color:#f33b45;"><strong>默认值</strong></span></td> 
   <td><span style="color:#f33b45;"><strong>描述</strong></span></td> 
  </tr> 
  <tr> 
   <td style="width:412px;"> <p><strong><span style="color:#f33b45;">navigationBar</span>BackgroundColor</strong></p> </td> 
   <td style="width:342px;">HexColor</td> 
   <td style="width:348px;">#000000</td> 
   <td><strong>导航栏背景颜色</strong></td> 
  </tr> 
  <tr> 
   <td style="width:412px;"> <p><span style="color:#f33b45;"><strong>navigationBar</strong></span>TitleText</p> </td> 
   <td style="width:342px;">string</td> 
   <td style="width:348px;">weixin</td> 
   <td><strong>导航栏标题文字内容</strong></td> 
  </tr> 
  <tr> 
   <td style="width:412px;"><strong><span style="color:#f33b45;">navigationBar</span></strong>TextStyle</td> 
   <td style="width:342px;">String</td> 
   <td style="width:348px;">white</td> 
   <td><strong>导航栏标题颜色，仅支持&nbsp;<span style="color:#f33b45;"><code>black</code>&nbsp;/&nbsp;<code>white</code></span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:412px;"><span style="color:#f33b45;"><strong>backgroundTextStyle</strong></span></td> 
   <td style="width:342px;">String</td> 
   <td style="width:348px;">dark</td> 
   <td><strong>下拉 loading 的样式，仅支持<span style="color:#f33b45;">&nbsp;<code>dark</code>&nbsp;/&nbsp;<code>light</code></span><code>，但是这个必须和</code></strong> <p><strong>enablePullDownRefresh的值必须设置为true</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:412px;"><strong><span style="color:#f33b45;">enablePullDownRefresh</span></strong></td> 
   <td style="width:342px;">boolean</td> 
   <td style="width:348px;">false</td> 
   <td><strong>是否开启当前页面刷新</strong></td> 
  </tr> 
 </tbody> 
</table>

想了解更多：[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]

### 配置示例 ###

![20210316205451257.png][]

## 7、sitemap配置 ##

用于配置小程序及其页面是否允许被微信索引。

**微信现已开放小程序内搜索**，开发者可以通过** `sitemap.json` 配置**，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 4][]

## 8、小程序常见组件的学习  ##

###      8**.1、view组件** ###

view组件：相当于一个盒子，可以用来装一些别的组件，类似当初学习html的div标签。

<view>
        <view>你好呀</view>
        <view>Hello world</view>
    </view>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th style="width:191px;">必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>hover-class</strong></td> 
   <td><strong>string</strong></td> 
   <td><strong>none</strong></td> 
   <td style="width:191px;"><strong>否</strong></td> 
   <td><strong>指定按下去的样式类。当&nbsp;<code>hover-class="none"</code>&nbsp;时，没有点击态效果</strong></td> 
  </tr> 
 </tbody> 
</table>

<view hover-class='hover_list'>
        1233
    </view>
    
    //css
    .hover_list {
        opacity: 0.9;
        background: #f7f7f7;
    }

###      8.2、text组件 ###

text组件：主要显示文本的，是不会换行的。

<view>
        <text>哈哈哈哈哈</text>
        <text>你好，欢迎来到微信小程序世界</text>
    </view>

文本是否可以长按复制：

**<text selectable="true">123333</text> **

###     8.3、input组件（重要） ###

input组件：主要用来**获取用户输入的信息**的，一般在用**户填写信息**，提交数据，登录注册时会用到。

<table> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>类型</strong></td> 
   <td><strong>默认值</strong></td> 
   <td><strong>说明</strong></td> 
   <td><strong>截图演示</strong></td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;"><strong>value</strong></span></td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>输入框的初始内容</td> 
   <td><img alt="" height="29" src="https://img-blog.csdnimg.cn/20210311153319413.png" width="321">&nbsp; &nbsp; &nbsp;<img alt="" height="29" src="https://img-blog.csdnimg.cn/202103111533382.png" width="307"></td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;"><strong>type</strong></span></td> 
   <td>String</td> 
   <td>text</td> 
   <td> <p>input的类型</p> <p>比如数字输入键盘，还是可以输入非数字的</p> <p>在真机上测试可以知道，当数字输入键盘时，会自动弹出数字输入键盘</p> 
    <table> 
     <tbody> 
      <tr> 
       <td>可以选的值</td> 
       <td>说明含义</td> 
      </tr> 
      <tr> 
       <td>text</td> 
       <td>文本输入键盘</td> 
      </tr> 
      <tr> 
       <td>number</td> 
       <td>数字输入键盘</td> 
      </tr> 
      <tr> 
       <td>idcard</td> 
       <td>身份证输入键盘</td> 
      </tr> 
      <tr> 
       <td>digit</td> 
       <td>带小数点的数字键盘</td> 
      </tr> 
     </tbody> 
    </table></td> 
   <td><img alt="" height="96" src="https://img-blog.csdnimg.cn/20210311154316135.png" width="611">&nbsp; &nbsp; &nbsp;<img alt="" height="72" src="https://img-blog.csdnimg.cn/20210311154253175.png" width="251"></td> 
  </tr> 
  <tr> 
   <td><strong><span style="color:#f33b45;">password</span></strong></td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>是否是密码类型</td> 
   <td>&nbsp; <img alt="" height="28" src="https://img-blog.csdnimg.cn/20210311154712918.png" width="519">&nbsp; &nbsp; &nbsp;&nbsp;<img alt="" height="24" src="https://img-blog.csdnimg.cn/20210311154703988.png" width="296"></td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;"><strong>placeholder</strong></span></td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>输入框为空时占位符，（输入时会自动消失）</td> 
   <td><img alt="" height="22" src="https://img-blog.csdnimg.cn/20210311154820657.png" width="548">&nbsp; &nbsp; &nbsp;<img alt="" height="30" src="https://img-blog.csdnimg.cn/20210311154832529.png" width="282"></td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#f33b45;"><strong>placeholder-style</strong></span></p> </td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>指定placeholder的样式</td> 
   <td><img alt="" height="25" src="https://img-blog.csdnimg.cn/20210311155650698.png" width="810">&nbsp; &nbsp; &nbsp;&nbsp;<img alt="" height="27" src="https://img-blog.csdnimg.cn/20210311155659479.png" width="282"></td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;"><strong>placeholder-class</strong></span></td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>指定placeholder的类样式</td> 
   <td>&nbsp;<img alt="" height="22" src="https://img-blog.csdnimg.cn/20210311155847178.png" width="830"> &nbsp; &nbsp;<img alt="" height="29" src="https://img-blog.csdnimg.cn/20210311155902711.png" width="87"></td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;"><strong>disabled</strong></span></td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>是否禁用，true就禁用，则无法输入</td> 
   <td><img alt="" height="24" src="https://img-blog.csdnimg.cn/20210311160212890.png" width="650"></td> 
  </tr> 
 </tbody> 
</table>

其他的请参考文档：[https://developers.weixin.qq.com/miniprogram/dev/component/input.html][https_developers.weixin.qq.com_miniprogram_dev_component_input.html]

###    8.4、button组件 ###

button 组件：是按钮组件，自带默认的按钮效果。

<table> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>类型</strong></td> 
   <td><strong>默认值</strong></td> 
   <td><strong>说明</strong></td> 
   <td><strong>截图演示</strong></td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td> <p>default</p> 
    <table> 
     <tbody> 
      <tr> 
       <td>可以选的值</td> 
       <td>说明含义</td> 
      </tr> 
      <tr> 
       <td>default</td> 
       <td>白色</td> 
      </tr> 
      <tr> 
       <td>primary</td> 
       <td>绿色</td> 
      </tr> 
      <tr> 
       <td>warn</td> 
       <td>红色</td> 
      </tr> 
     </tbody> 
    </table></td> 
   <td>按钮的样式类型</td> 
   <td><img alt="" height="68" src="https://img-blog.csdnimg.cn/20210311162559416.png" width="458">&nbsp; &nbsp;<img alt="" height="71" src="https://img-blog.csdnimg.cn/2021031116260992.png" width="110"></td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>String</td> 
   <td> <p>default</p> 
    <table> 
     <tbody> 
      <tr> 
       <td>可以选的值</td> 
       <td>说明含义</td> 
      </tr> 
      <tr> 
       <td>default</td> 
       <td>默认大小</td> 
      </tr> 
      <tr> 
       <td>mini</td> 
       <td>小尺寸</td> 
      </tr> 
     </tbody> 
    </table></td> 
   <td>按钮大小</td> 
   <td><img alt="" height="43" src="https://img-blog.csdnimg.cn/20210311162950695.png" width="536">&nbsp; &nbsp;<img alt="" height="59" src="https://img-blog.csdnimg.cn/2021031116300142.png" width="267"></td> 
  </tr> 
  <tr> 
   <td>plain</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>按钮是否为镂空，背景色透明</td> 
   <td>&nbsp; &nbsp;<img alt="" height="22" src="https://img-blog.csdnimg.cn/20210311163254457.png" width="568">&nbsp; &nbsp;<img alt="" height="27" src="https://img-blog.csdnimg.cn/20210311163305774.png" width="106"></td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>按钮是否禁用</td> 
   <td><img alt="" height="21" src="https://img-blog.csdnimg.cn/20210311163427708.png" width="419">&nbsp; &nbsp;<img alt="" height="30" src="https://img-blog.csdnimg.cn/20210311163437125.png" width="150"></td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>名称前是否带 loading 图标</td> 
   <td><img alt="" height="28" src="https://img-blog.csdnimg.cn/20210311163601342.png" width="442">&nbsp;&nbsp;<img alt="" height="32" src="https://img-blog.csdnimg.cn/20210311163610444.png" width="150"></td> 
  </tr> 
 </tbody> 
</table>

其他的请参考文档：[https://developers.weixin.qq.com/miniprogram/dev/component/button.html][https_developers.weixin.qq.com_miniprogram_dev_component_button.html]

## 9、函数和事件的学习 ##

###     9-1、函数的两种创建方式 ###

函数都是定义在xx.js文件中的，并且在js文件中，都包含在Page(\{

\})这里面的

如图所以：

![20210311165110856.png][]

第一种：

**函数名：function()\{**

**//函数执行内容**

**\}**

第二种：

**函数名()\{**

**//函数执行内容**

**\}**

注意没有函数之间都需要使用**英文的逗号隔开**

![20210311164906589.png][]

###    9-2、点击事件 ###

![20210311172258183.png][]

当点击按钮时，控制台就是输出  dosome方法执行了

###   9-3、获取用户输入的信息 ###

<input type="text" placeholder="请输入" bindinput="inputMessage"/>
    <button bindtap="getMessage">点击获取内容</button>
    <text wx:if="{
       {isTrue}}">{
       {msg}}</text>
    // pages/study/study.js
    Page({
        data: {
            msg:"",
            isTrue:false
        },
        inputMessage:function(e){
            this.setData({
                msg:e.detail.value,
                isTrue:false
            })
        },
        getMessage:function(e){
            this.setData({
                isTrue:true
            })
        }
    })

![2021032716184983.png][]

## 10、全局变量和局部变量 ##

局部变量：变量在函数内声明，只能在函数内部访问。  
全局变量：变量在函数外定义，整个代码都可以调用的变量。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 5][]

## 11、数据类型 ##

###        11-1、常见的数据类型 ###

数据类型可以分成下面两大类：

*  简单数据类型(Number String Boolean Undefined Null)
 *  复杂数据类型(Object)

**typeof "John" // 返回 string**

**typeof 3.14 // 返回 number**

**typeof false // 返回 boolean**

###     11-2、转换为数字型（重点） ###

<table> 
 <tbody> 
  <tr> 
   <td><strong>方式</strong></td> 
   <td><strong>说明</strong></td> 
   <td><strong>案例</strong></td> 
  </tr> 
  <tr> 
   <td>Number()</td> 
   <td>把字符串转换为数字</td> 
   <td>Number("22")</td> 
  </tr> 
  <tr> 
   <td>parseFloat()</td> 
   <td>解析字符串并返回一个浮点数</td> 
   <td>parseFloat("2.1")</td> 
  </tr> 
  <tr> 
   <td>parseInt()</td> 
   <td>解析字符串并返回一个整数</td> 
   <td>parseInt("11")</td> 
  </tr> 
 </tbody> 
</table>

## 12、数组的学习 ##

###       12-1、创建数组的两种方式： ###

*  使用new创建数组

var userNames = new Array()；

*  利用数组字面量创建数组  （常用)

var userNames= \["小王","小叶","小万"\]

###      12-2、获取数组元素 ###

我们获取数组元素是通过数组下标来获取的，下标也叫做索引，数组的下标是从0开始的

userNames\[0\]的值就是小王

###      12-3、数组添加新元素 ###

**push()** 方法可向数组的末尾添加**一个**或**多个元素**

var userNames= \["小王","小叶","小万"\]

userNames.push("小贾")

userNames.push("小姚“,"小徐"）

console.log(userNames)// \["小王","小叶","小万","小贾","小姚","小徐"\]

###      12-4、添加和删除数组元素 ###

*  push方法添加  
    在数组的末尾添加一个或者多个元素
 *  unshift方法添加  
    在数组的开头添加一个或者多个元素
 *  pop方法删除  
    删除数组尾部的元素，一次只能删除一个
 *  shift方法删除  
    删除数组最前面（头部）的元素

## 13、微信授权 ##

###        1）重新认识button组件 ###

了解更多：[https://developers.weixin.qq.com/miniprogram/dev/component/button.html][https_developers.weixin.qq.com_miniprogram_dev_component_button.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 6][]

button的open-type属性：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 7][]

样式代码：

这里的bindgetuserinfo定义如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 8][]

js代码中打印输出：

![20210327211600810.png][]

代码演示：

<view wx:if="{
       {isTrue}}">
        <button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>
    </view>
    
    <view>
        <image src="{
       {userInfo.avatarUrl}}"/>
        <text>{
       {userInfo.nickName}}</text>
        <text>{
       {userInfo.city}}</text>
    </view>

js代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 9][]

###    2）本地缓存保持登录状态 ###

//js代码
    getuserinfo:function(e){
            console.log(e)
            var user = e.detail.userInfo;
            this.setData({
                userInfo:user,
                isTrue:false
            })
            //本地缓存
            wx.setStorageSync('user', user)
     },

![20210328092729915.png][]

###   3）从本地缓存获取存储用户 ###

当缓存中有用户信息就不需要再授权

onLoad: function (options) {
        let user = wx.getStorageSync('user');
        console.log("从缓存中获取的用户信息：",user);
         if(user){
            this.setData({
                isTrue:false,
                userInfo:user
           })
        }
     }

![20210328093845282.png][]

### 4）退出登录实现 ###

wxml：

<view wx:if="{
       {isTrue}}">
        <button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>
    </view>
    
    <view wx:else>
        <image src="{
       {userInfo.avatarUrl}}"/>
        <view>
            <text>{
       {userInfo.nickName}}</text>
        </view>
        <view>
            <text>{
       {userInfo.city}}</text>
        </view>
        <button bindtap="exitOut">退出登录</button>
    </view>

js代码：

Page({
        data: {
            msg:"",
            userInfo:[],
            isTrue:true
        },
        getuserinfo:function(e){
            console.log(e)
            var user = e.detail.userInfo;
            this.setData({
                userInfo:user,
                isTrue:false
            })
            //本地缓存
            wx.setStorageSync('user', user)
        },
        onLoad: function (options) {
            let user = wx.getStorageSync('user');
            console.log("从缓存中获取的用户信息：",user);
            if(user){
                this.setData({
                    isTrue:false,
                    userInfo:user
                })
            }
        },
        exitOut:function(){
            this.setData({
                isTrue:true,
                userInfo:null
            })
            //清除缓存
            wx.setStorageSync('user', null);
        }
    })

截图：

![20210328110425720.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70]: /images/20221023/a1e67c53703144a6929115ff368dbda8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 1]: /images/20221023/abc956505358481aadd4d310739c88ef.png
[2021031210460086.png]: /images/20221023/7a4a7d6d692842e798742955be238580.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
[2021031211110755.png]: /images/20221023/dc2899de119d437abae1cb7617c8d601.png
[20210312111756447.png]: /images/20221023/83eecce6d5ef421a98d70c6491971c19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210312114530421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw==,size_16,color_FFFFFF,t_70
[20210312114545402.png]: /images/20221023/ddaa5347974f45e9a6e0952ab00b4c63.png
[20210313115541757.png]: https://img-blog.csdnimg.cn/20210313115541757.png
[20210313115720148.png]: /images/20221023/847b0834f53a41d2b2d7374f220b3cc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 3]: /images/20221023/88d88cfe0ddf471ba777524c3e10bd96.png
[20210316205451257.png]: /images/20221023/4f526f115c0442d79f94676d91b8cedd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 4]: /images/20221023/d1fbeb1d14444253b92c08cf64c52574.png
[https_developers.weixin.qq.com_miniprogram_dev_component_input.html]: https://developers.weixin.qq.com/miniprogram/dev/component/input.html
[https_developers.weixin.qq.com_miniprogram_dev_component_button.html]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[20210311165110856.png]: /images/20221023/7f4c98acf6ea451d97aee1f6359546bb.png
[20210311164906589.png]: /images/20221023/ede532258f474c7fba179ce90b0a0c11.png
[20210311172258183.png]: /images/20221023/b25399ef2fc84222b1a6947f12d95961.png
[2021032716184983.png]: /images/20221023/2401e6b58f2d42cf9a6b2f4daef995a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 5]: /images/20221023/37a80cd9a4da4138a7dd13d43aecb667.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 6]: /images/20221023/f08eb1c622c54521a824a91624d31f36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 7]: /images/20221023/f37ce4a90524490aa1035decce34cc44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 8]: /images/20221023/19c654fa210c4284931e483e56ced633.png
[20210327211600810.png]: /images/20221023/bf771c45126c4f1ea27ec63061373ab2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 9]: /images/20221023/e5d0011b389840e3967a48473eb9b428.png
[20210328092729915.png]: /images/20221023/7a4840d8284544899595c3c11336ed08.png
[20210328093845282.png]: /images/20221023/097bddf63b4e406e9dfe6fafdbb148cc.png
[20210328110425720.png]: /images/20221023/865f81125e3c4cfb8c9fbc514e54fc85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 10]: /images/20221023/314eb74ff8bd4e778c10c0cf5cbfd2bc.png