【微信小程序篇】动态显示数据 | 登录授权码 | 按钮 | 异步请求

女爷i 2024-04-17 06:40 16阅读 0赞

#### 文章目录 ####

*  ?简述微信小程序
 *  ?入门案例
 *   *  ⭐动态显示数据
     *  ⭐按钮(button)
     *  ⭐获取微信登陆的授权码
     *  ⭐发送异步请求

![在这里插入图片描述][02452bc8cf6c4549906003298a8b4437.png]

## ?简述微信小程序 ##

微信小程序是一种由腾讯公司开发的应用程序形式，可以在微信客户端内直接运行，无需下载和安装。它为开发者提供了一个在微信生态系统中构建轻量级应用的平台，并具有快速、便捷的特点。

以下是微信小程序的一些特点和功能：

轻量级：微信小程序相对于传统的移动应用程序来说，体积较小，下载速度快，用户可以快速打开和使用。

无需下载和安装：用户可以直接在微信客户端内使用小程序，无需下载和安装额外的应用，节省了用户的存储空间。

快速开发和发布：微信提供了完善的开发工具和文档支持，开发者可以使用HTML、CSS和JavaScript来构建小程序，并且可以快速提交审核并发布到微信平台。

方便分享和传播：微信小程序可以通过分享链接或二维码进行传播，用户可以轻松地分享给朋友或群组，实现快速传播和扩散。

丰富的功能和能力：微信小程序提供了丰富的API和组件，可以实现与微信生态系统的深度集成，例如获取用户信息、支付、地理位置、扫码等功能。

支持多种行业和场景：微信小程序适用于不同的行业和场景，包括电商、社交、音乐、新闻、出行等，开发者可以根据自己的需求进行定制开发。

总的来说，微信小程序具有快速、便捷、轻量级的特点，为开发者提供了一个构建应用程序并快速接触大量用户的平台。它在移动应用开发中具有重要的作用，为用户提供了更加方便和丰富的使用体验。

## ?入门案例 ##

### ⭐动态显示数据 ###

> index.wxml

<navigation-bar title="Weixin" back="{
         {false}}" color="black" background="#FFF"></navigation-bar>
    <scroll-view class="scrollarea" scroll-y type="list">
      <view class="container">
        <view>
          {
       {msg}}
        </view>
      </view>
    </scroll-view>

view相当于html的div，用来显示数据

> index.js

Page({
        
      data:{
        
        msg:"hello"
      }
    })

效果

> index.wxml来动态获取index.js的 msg 值

![在这里插入图片描述][4a7355dd23f4496887fc0b915c28f887.png]  
我们发现界面中显示出了‘hello’

### ⭐按钮(button) ###

![在这里插入图片描述][78e38741bcdd44cd9fd662c84d223e4a.png]  
![在这里插入图片描述][ecbb67f97cae46ef8a5e7c78fc7ba591.png]

> 虽然目前有按钮了，但是我们点击按钮，按钮没有任何反应  
> 为了让按钮有反应，我们可以使用下面的操作

`在button标签中加入 bindtap="方法名"(绑定事件)`  
![在这里插入图片描述][9fd88e9c26864db199b1466f8eccfd7e.png]  
![在这里插入图片描述][a3a298f14bbe433db22f597a6a7e6f4d.png]

这样子点击按钮，就回有弹窗出现

--------------------

点击按钮后，如果我们想`把用户名称和头像显示到界面`上，应该怎么做呢

![在这里插入图片描述][087eefb48b0745ed9e1a5de4ecf8fb87.png]  
![在这里插入图片描述][784bccce9fab4af9afe03e9c353630df.png]

点击按钮后  
![在这里插入图片描述][ce8c9350a95040b1bf6ebfb3d1c0e858.png]

### ⭐获取微信登陆的授权码 ###

wxlogin(){
        
       wx.login({
        
         success: (res) => {
        
           console.log(res.code)
         },
       })
      }

![在这里插入图片描述][6cf273fd852a49a3b0f2d5a5ddb19a73.png]  
![在这里插入图片描述][6c5a01b6fa50456d8cf9becf630bce04.png]

### ⭐发送异步请求 ###

> 什么是异步请求

异步请求是指在发出请求后，不必等待服务器响应，而是使用回调函数或者事件处理程序来处理服务器响应。异步请求通常用于需要执行时间较长的操作，例如向服务器请求数据、从数据库中读取大量数据、或者进行复杂的计算过程。

在传统的同步请求中，客户端发出请求后必须等待服务器响应才能继续执行下一步操作，这样可能会导致阻塞和延迟。而异步请求则可以让客户端在请求服务器时继续执行其他任务，等到服务器响应时再处理响应结果。

--------------------

我们首先打开一个项目  
然后进入小程序开发界面  
![在这里插入图片描述][fcc577273d66427e9334b24b2c82f7c2.png]  
运行代码后  
我们回到项目控制台，发现打印出了日志  
![请添加图片描述][04fee0647e0d49449973038a405a5223.jpeg]  
![在这里插入图片描述][fe0543e2ca9a4992827a803aec02266a.png_pic_center]

[02452bc8cf6c4549906003298a8b4437.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/5dd35e8063004860b01fef88c3ab00cb.png
[4a7355dd23f4496887fc0b915c28f887.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/0d592169ef13440089f7e6b6250af39e.png
[78e38741bcdd44cd9fd662c84d223e4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/dc5e534cdb3949e6839fc3a4e0e3f859.png
[ecbb67f97cae46ef8a5e7c78fc7ba591.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7f1c9c8d97ed4dfa99c381977d9e98c1.png
[9fd88e9c26864db199b1466f8eccfd7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/c4c7ab81d4824f56a0d09c7eb5175397.png
[a3a298f14bbe433db22f597a6a7e6f4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6c6ddddf17de43db93aa8a9880c78b8b.png
[087eefb48b0745ed9e1a5de4ecf8fb87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/8de7a5d44e4e49eeaefb8dc34eab64f4.png
[784bccce9fab4af9afe03e9c353630df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/cd7385b9198a4ec499f10ec0c9e9e7ad.png
[ce8c9350a95040b1bf6ebfb3d1c0e858.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/9a106db42e0b42f6be6e04c311208d9f.png
[6cf273fd852a49a3b0f2d5a5ddb19a73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/c8c6ecc673194b588fc36c1e69d0189b.png
[6c5a01b6fa50456d8cf9becf630bce04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/4056589b82ce43cfb25fe799f007d201.png
[fcc577273d66427e9334b24b2c82f7c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/983910a60b874c61aa6b50cfda09d8aa.png
[04fee0647e0d49449973038a405a5223.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/2d5ffbda69c14d7c89fb6c7ddf792ca3.jpeg
[fe0543e2ca9a4992827a803aec02266a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/541bdcf9e00443d2bce8cb4015b32873.png