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

简述微信小程序

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

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

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

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

快速开发和发布：微信提供了完善的开发工具和文档支持，开发者可以使用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 值

我们发现界面中显示出了‘hello’

⭐按钮(button)

<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>
      <button type="primary">获取用户信息button>
    view>
  view>
scroll-view>

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

在button标签中加入 bindtap="方法名"(绑定事件)

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

---

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

点击按钮后

⭐获取微信登陆的授权码

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

⭐发送异步请求

什么是异步请求

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

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

---

我们首先打开一个项目
然后进入小程序开发界面

运行代码后
我们回到项目控制台，发现打印出了日志