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

01- 异步请求wx.request

传送门

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

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

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

也是基于XMLHttpRequest封装的

使用方法

1. API和jQuery.ajax基本一致

2. 不同地方在于header的content-type默认是application/json

3. 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)
         }
       })
   

注意点：

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

02-设置合法域名

传送门

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

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

解决方案：

配置：

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

临时方案

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

注意点：

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

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

静态页面提前写好

1. 分析一下接口

   1. 请求URL：http://localhost:3000/api/home/swipers

2. 尽早发请求

   1. onLoad 页面加载时触发的
   2. 请求轮播图数据，声明一个方法getSwipers
   3. 在方法里面使用wx.request
   4. 拿 到请求返回的数据，声明为data属性
   5. 渲染

注意点：

1. 因为接口API的域名是localhost, 所以不能在小程序后台配置合法域名。所以只能用临时方案：勾选不检验合法域名

2. 这个项目只要求在微信开发者工具中运行OK就行，不用测试扫码预览

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

   1. 命令行tab键，补齐

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

4. vscode的git功能补充

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

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

05-复习Promise

概念

管理异步任务

如何使用

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

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

有什么作用

1. 管理异步操作
   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()
})   //所有的任务完成后再做

1. 回调地狱

06-首页-wx.request的封装

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

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

步骤：

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

练习说明：

1. 除了模块化的方法，还有可以：request方法也可以挂载到appInstance.globalData.request

   // other.js
   var appInstance = getApp()
   appInstance.globalData.request
   

2. 在network可以查看请求参数和返回的数据

07-Loading效果

showLoading

如何使用：

1. 页面中央常规的loading

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

2. 导航栏的loading

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

使用场景：

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

08-request.js添加loading效果

1. 请求前开启Loading

2. 请求结束后关闭loading

   1. 在wx.request的complete方法关闭
      1. complete是请求成功或者请求失败都会执行

3. 默认请求有loading,传isLoading:false时,不显示Loading

   1. 在request方法，解构获取参数, 同时可以设置参数的默认值

      function request({url,isLoading=true})
      

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

09-Tab栏基本使用

传送门

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

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

使用方法

1. 在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)]

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

11-课程-页面分析

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

12-课程-静态页面

1. 一个列表，使flex布局

13-课程-渲染页面

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

1. 尽早地发请求渲染页面

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

2. 优化，利用数组渲染leveldom

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

14-登录页-页面分析

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

15-登录页-静态页面

样式说明

1. 伪元素的使用

1. 父元素上设置

   position:relative;
   

2. 子元素上

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

3. 手机号码登录点击跳转用组件navigator

4. 微信授权登录样式

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

16-小程序授权

传送门

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

是什么？

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

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

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

用户信息授权

1. 通过声明式来获取

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

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

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

   1. 不必在这里调用wx.getUserInfo

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

注意点：

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

17-小程序登录

传送门

概念

用微信的账号登录小程序

原理

第三方登录

注意点

1. 我们的后台服务器无法解析code，所以后端需要带上code+appid+appsecret去微信服务器

2. 大部分微信授权登录都需要传code+用户基本信息，视接口而定

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

1. 分析接口

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

2. 如何获取用户信息

   1. 只能通过声明式

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

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

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

3. 登录步骤

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

注意点

1. 在微信开发者工具调试器，样式的显示，有些时候，样式中划线但是实际并没有被覆盖掉
2. 登录成功的逻辑是，微信账号必须是小程序的开发者
   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