04-小程序(小程序发送请求wx.request的封装, 发送请求添加loading效果,Tab栏基本使用,小程序授权,小程序登录,微信授权登录)

最新推荐文章于 2025-10-17 11:01:10 发布

原创最新推荐文章于 2025-10-17 11:01:10 发布 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

67 篇文章

订阅专栏

本文介绍小程序中异步请求的实现方法，包括使用wx.request进行网络请求、设置合法域名、封装请求方法以返回Promise，以及小程序登录授权流程，涵盖微信授权登录的原理和实现步骤。

01- 异步请求wx.request

传送门

豆瓣电影API : https://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a

在小程序里面用来发ajax请求的

发ajax请求的，和axios，jQuery.ajax一样

也是基于XMLHttpRequest封装的

使用方法

API和jQuery.ajax基本一致
不同地方在于header的content-type默认是application/json

wx.request不会返回Promise, 如果需要在小程序中使用promise，需要自行封装！

    wx.request({
      // url: 'https://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a',
      url: 'https://api.douban.com/v2/movie/in_theaters',
      data:{
        apikey:'0df993c66c0c636e29ecbb5344252a4a'
      },
      header:{
        'content-type':'application/x-www-form-urlencoded'
      },
      // success()
      // success:function
      // 尽量用箭头函数
      success:res=>{
        console.log(res.data.subjects)
      }
    })

注意点：

小程序无法使用axios，因为在小程序里面无法使用xhr
content-type的设置，一般先不要设置，如果报错的话，再和后台讨论一下，再设置

02-设置合法域名

传送门

为什么要设置合法域名呢?

官方说法：小程序只可以跟指定的域名进行网络通信
小程序后台配置前端发请求的域名

解决方案：

配置：

小程序后台-开发-开发设置-服务器域名
微信开发者工具里面需要填写你的appid

临时方案

微信开发者工具->本地设置->勾选不检验合法域名

注意点：

临时方案只在微信开者工具中生效，上线后无用
尽可能地用把小程序里面所有的请求的域名配置在小程序后台，上线有效

03-首页-渲染页面-轮播图

静态页面提前写好
在这里插入图片描述

分析一下接口
1. 请求URL：http://localhost:3000/api/home/swipers
尽早发请求
1. onLoad 页面加载时触发的
2. 请求轮播图数据，声明一个方法getSwipers
3. 在方法里面使用wx.request
4. 拿到请求返回的数据，声明为data属性
5. 渲染

注意点：

因为接口API的域名是localhost, 所以不能在小程序后台配置合法域名。所以只能用临时方案：勾选不检验合法域名
这个项目只要求在微信开发者工具中运行OK就行，不用测试扫码预览

git clone url，克隆后项目是master分支的

命令行tab键，补齐

git clone url
cd 项目目录下
git branch -a #查看本地和远端所有的分支
git checkout 分支

vscode的git功能补充

在这里插入图片描述

04-首页-渲染页面-课程和视频

尽早发请求
1. onLoad
分析接口，基本和home/swipers一致的
声明请求方法，返回数据设置为data属性，然后渲染

05-复习Promise

概念

管理异步任务

如何使用

// 使用Promise
let p = new Promise((resolve) => {
  // 异步任务
  setTimeout(() => {
    //有成功的消息时，resolve
    resolve('别浪！！！')
  }, 1000)
})

// promise对象的then回调方法的参数就是resolve的传参
p.then((res)=>{
  console.log(res)
})

有什么作用

管理异步操作
1. Promise.all 所有任务都完成后，再。。。
2. Promise.race 只要有一个任务完成后，就再。。。

// A,B两个异步任务完成后，再做C

//方案1，回调的形式。重复的代码比较多
let isADone = false
let isBDone = false

A({
	success(){
        isADone = true
        //如果b也完成，就做c
        if(isBDone){
            doC()
        }
    }
})

B({
	success(){
         isBDone = true
        //如果A也完成，就做c
        if(isADone){
            doC()
        }
    }
})

//方案2
Promise.all([promise1,promise2,....]).then(()=>{
    doC()
})   //所有的任务完成后再做

回调地狱

06-首页-wx.request的封装

为什么要提供一个公共的请求方法？？

首页的请求方法相似
希望请求可以返回promise

步骤：

在home.js里面，声明公共的请求方法request,把getVideos逻辑全部copy，在getVideos里面调用request方法即可
如果request方法需要给其他两个请求使用的话，url和数据返回的处理逻辑是不一样的，应该作为传参
1. 调用request方法时，传参url和callback
callback的方式不好，希望用Promise
async和await进一步简化promise
1. await修饰promise时，会返回promise.then的数据
2. await语句的方法必须用async修饰
request方法应该全局使用
1. request方法放在utils/request.js, 对外暴露request方法
2. 其他页面引入request方法
设置基地址
1. http://localhost:3000 作为基地址
Home.js其他两个方法也使用request方法

练习说明：

除了模块化的方法，还有可以：request方法也可以挂载到appInstance.globalData.request
```
// other.js
var appInstance = getApp()
appInstance.globalData.request
```
在network可以查看请求参数和返回的数据

07-Loading效果

showLoading

如何使用：

页面中央常规的loading

//显示loading 
wx.showLoading({
    title: '加载中...',
    mask:true
})
// 关闭loading
wx.hideLoadinig()

导航栏的loading

// 导航栏loading
    wx.showNavigationBarLoading()
    
    wx.hideNavigationBarLoading()

使用场景：

页面中央的Loading最常见，具体使用哪一个看设计师的

08-request.js添加loading效果

请求前开启Loading
请求结束后关闭loading
1. 在wx.request的complete方法关闭
  1. complete是请求成功或者请求失败都会执行
默认请求有loading,传isLoading:false时,不显示Loading
1. 在request方法，解构获取参数, 同时可以设置参数的默认值
```
function request({url,isLoading=true})
```

在首页里面，有三个请求的loading的逻辑：三个请求开启前,显示loading，三个请求结束后再关闭loading

09-Tab栏基本使用

传送门

是什么？一般在底部的菜单，点其中一个菜单就会显示对应的页面

有什么作用? 给应用增加多入口

使用方法

在app.json里面直接配置就行
1. color和selectedColor是所有的tab的公共属性，和list是平级的

// tabBar配置和window是平级的
"tabBar": {
    "color": "#ff0000", //未选中的tab文字的颜色
    "selectedColor": "0000ff", //选中的tab文字的颜色
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
          "iconPath" //未选中tab的图标
          "selectedIconPath" //选中tab的图标
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }

10-蘑菇在线Tabbar栏配置

思路：在app.json配置即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qivRF96v-1593532099417)(assets/1589771297025.png)]

新建三个页面, course, study,me
copy 示例的tabbar配置代码，保证首页和课程能用
配置tab文字颜色
设置首页和课程的图标
copy配置，完成剩余的两个tab的配置

11-课程-页面分析

在这里插入图片描述

入口： tab栏点击课程显示课程页面
主要模块
1. 课程列表

12-课程-静态页面

一个列表，使flex布局

13-课程-渲染页面

level为1，2，3分别应该显示初级课程，中级课程和高级课程

尽早地发请求渲染页面
1. 接口 http://localhost:3000/api/course/list
2. 引入request方法
3. 发请求，返回数据，作为data属性
4. 渲染页面

优化，利用数组渲染leveldom

levelArr:['','初级课程','中级课程','高级课程']

14-登录页-页面分析

入口：如果去到我的页面，没有登录的话，跳转登录页
主要模块
1. 微信授权登录，就是登录
2. 手机号码登录跳转到手机号登录页

15-登录页-静态页面

样式说明

伪元素的使用

在这里插入图片描述

父元素上设置
```
position:relative;
```

子元素上

position:absolute;
content:'';
// 定位
top,left,right,bottom

手机号码登录点击跳转用组件navigator
微信授权登录样式

在这里插入图片描述

从语义化的方面来说，应该使用button
button有很多的不需要的样式
所以用view来代替button

16-小程序授权

传送门

文档位置: 指南->开放能力->授权

是什么？

小程序授权是小程序向微信申请一些权限，微信运动步数，通讯地址，基本的用户信息，地理位置等等。。

基本使用（不包括用户信息）

发起授权，弹出授权弹窗
1. wx.authorize
2. scope在scope列表中去找
调用对应的授权接口
1. 在scope列表中找到授权对应的接口

用户信息授权

通过声明式来获取

bindgetuserinfo是固定写法，不要写成bindtap

<button open-type="getUserInfo" bindgetuserinfo="事件处理方法">获取用户信息</button>

在事件处理方法里面获取到用户信息

不必在这里调用wx.getUserInfo

  事件处理方法(event){
    console.log(event.detail.userInfo) //这里就可以获取到用户信息了
  },

注意点：

微信开发者工具授权弹窗是中央的，那么手机上运行微信小程序里面时候，没有这个问题，授权弹窗是在底部。
微信开发者工具获取通讯地址是个假数据
微信小程序运在手机上时候，授权获取通讯地址来自于我的->头像->我的地址
小程序在手机上运行时，点右上角…，底部会弹框，可以选择打开调试。在最近使用的小程序里面找到它，再次打开，小程序就处于调试模式，可以打开vconsole
小程序在手机上运行时，清除缓存的方法，从最近使用里面移除就可以。
用户信息的获取不能用wx.authorize来获取，只能使用声明式
授权弹窗的行为
1. 用户信息
  1. 如果用户允许了，下次不弹
  2. 如果用户拒绝了，下次还会弹
2. 其他授权
  1. 如果用户允许了，下次不弹
  2. 如果用户拒绝了，再次点击没反应
    1. TODO，思考一下，用户拒绝后如何处理

17-小程序登录

传送门

概念

用微信的账号登录小程序

原理

第三方登录
在这里插入图片描述

注意点

我们的后台服务器无法解析code，所以后端需要带上code+appid+appsecret去微信服务器
大部分微信授权登录都需要传code+用户基本信息，视接口而定

18-登录页-微信授权登录

分析接口
1. url http://localhost:3000/api/user/wxlogin
2. 请求方法 post
3. 请求参数
  1. code 通过wx.login()
  2. nickname,avatar都是通过用户信息来获取

如何获取用户信息

只能通过声明式

<button open-type="getUserInfo" bindgetuserinfo="wxLogin">获取用户信息</button>

在微信授权登录这个view，放button，占满透明

.wx-login-btn button:not([size='mini']){
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

登录步骤
1. 先获取用户信息
2. wx.login获取code
3. 再发请求

注意点

在微信开发者工具调试器，样式的显示，有些时候，样式中划线但是实际并没有被覆盖掉
登录成功的逻辑是，微信账号必须是小程序的开发者
1. 微信开发者工具登录你的APPID
2. 蘑菇在线\服务器代码\mushroom-online-server\src\config\wxconfig.js, 配置你自己的appid和appsecret
  1. appsecret来自于小程序后台->开发->开发设置-> AppSecret(小程序密钥)
  2. 在服务器代码配置后需要重启server，先停止ctrl+c，再npm run start
    1. 如果你找不到你的server的话，最好方式就是重启然后执行npm run start