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

热门文章

暂无图片
编程学习 ·

2020上半年为你留下了什么?

今天是2020年6月30号,2020年上半年的最后一天.蓦然回首,发现时光过得飞快,记忆中那憋在家里,数着日子,焦虑不安的情景还历历在目.那时候最大的愿望就是像电视中那样:一觉醒来,半年过去了,大家又都按部就班没羞没躁的生活着.好多文人墨客都会鼓吹:每种经历都是人生的财富,人生没…
暂无图片
编程学习 ·

layui的时间控件laydate实现不用点击确定按钮

laydate.render({elem: #start, //指定元素type:month, //插件只选择年月showBottom :false, //关闭底部框 去掉取消、确定、清空按钮change: function(value, date, endDate){$("#start").val(value);if($(".layui-laydate").length){$(".layu…
暂无图片
编程学习 ·

718 最长重复子数组- 动态规划

题目描述: 给两个整数数组 A 和 B ,返回两个数组中公共的、长度最长的子数组的长度。 示例 1: 输入: A: [1,2,3,2,1] B: [3,2,1,4,7] 输出: 3 解释: 长度最长的公共子数组是 [3, 2, 1]。 说明: 1 <= len(A), len(B) <= 1000 0 <= A[i], B[i] < 100 方法一 动态规…
暂无图片
编程学习 ·

基于SSM的在线考试系统的毕业设计

一、启动说明项目为maven管理,最近集成了redis,所以在运行项目是先要下载redis并启动客户端,方可正常运行项目,除了基本的maven,mysql外,只需要下载redis,无需其他配置,这里就不做过多说明。 二、相关技术说明集成redis来保存用户登录信息,添加过滤器重置用户登录有效…
暂无图片
编程学习 ·

一文详解:二叉搜索树

这几天一直在刷题,每天都觉得时间不够用,心态上会有波动。争取在9月之前刷到300道题,调整心态,继续前行。 今天我们来复习一下二叉排序树(BST),首先我们先看下定义: 一棵空树,或者是具有下列性质的二叉树: (1)若左子树不空,则左子树上所有结点的值均小于它的根结点…
暂无图片
编程学习 ·

Finereport不破解前提下解除并发数限制,突破官网2个并发限制

官方免费版具有全部系统功能,但是只有2个并发,也就是2个以内用户可以访问,第三个用户访问就会提示“未注册,无法访问”,本案例中6个用户,超过了限制,所以没法实际使用,仅仅玩玩还行这里提供一款软件,实现不对免费版进行任何修改,通过搭建特殊环境,突破2用户在线访问限…
暂无图片
编程学习 ·

数据结构之查找

【知识框架】一、查找的基本概念 1、查找表 查找表是由同一类的数据元素(或记录)构成的集合。集合中的数据元素之间存在着完全松散的关系,因此查找表是一种非常灵便的数据结构。 2、关键字 关键字是数据结构(或记录)中某个数据项的值,用它可以标识一个数据元素(或记录)…
暂无图片
编程学习 ·

Spring MVC的运行原理(简答)

a)(浏览器)用户发送请求 b)前端控制器(dispatcherServlet)接收(他会委托其他模块进行真正的业务和数据处理 ) c)向handlermapping发送url查找相应的方法(handlermapping中储存的是url 和方法的键值对) d)返回处理器(“地址”)。 e)前端控制器发送处理器“地址”给处理…
暂无图片
编程学习 ·

字符串按固定长度分割

字符串分隔题目描述•连续输入字符串,请按长度为8拆分每个字符串后输出到新的字符串数组; •长度不是8整数倍的字符串请在后面补数字0,空字符串不处理。输入描述:连续输入字符串(输入2次,每个字符串长度小于100)输出描述:输出到长度为8的新字符串数组示例1输入abc 123456789…
暂无图片
编程学习 ·

用C语言解一元二次方程式的根

#include<stdio.h> #include<math.h> //需要用到一个sqrt()函数,该函数功能用于开方;//该函数运算结果数据类型为double类型;如果涉及到运算请将数据类型定义成浮点型! int main () {float a,b,c,x1,x2;printf("请分别输出方程式的系数,中间以空格分隔\n&…
暂无图片
编程学习 ·

ESP32使用MicroPython快速开发

Python基本语句一:Print语句:1. 输出字符串和数字>>>print("runoob") # 输出字符串runoob>>> print(100) # 输出数字100>>> str = runoob>>> print(str) # 输出变量runoob>>> L = [1,2,a] …
暂无图片
编程学习 ·

归并排序

给定你一个长度为n的整数数列。 请你使用归并排序对这个数列按照从小到大进行排序。 并将排好序的数列按顺序输出。 输入格式 输入共两行,第一行包含整数 n。 第二行包含 n 个整数(所有整数均在1~109范围内),表示整个数列。 输出格式 输出共一行,包含 n 个整数,表示排好序…
暂无图片
编程学习 ·

Postman调用 .net 的webservice

1、使用post方式调用,url以 asmx 止。2、设置header,content-type text/xml;charset=utf-8。3、body里选择 raw,参数模板如下:<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSch…
暂无图片
编程学习 ·

[STM32] Mac开发STM32之JLink常用方法

Mac开发STM32之JLink常用方法 一、JLink组件 APP JFlash/JFlashLite/JFlashSPI 下载烧录程序 JLinkConfig 升级固件 JLinkGDBServer 连接Target,设置为GDB server JLinkRemoteServer 设置主机+Jlink为远程server JLi…
暂无图片
编程学习 ·

Android移动应用开发**Activity的事件监听**

第二篇:Activity的事件监听 实验目的 本次实验的目的是掌握控件的基于事件监听内部类、基于事件监听内部匿名类、Activity本身作为事件监听器以及直接绑定到标签等四种常用的事件处理方法。 实验任务及要求 掌握android系统的事件监听的几种处理方法。具体要求如下: i.基于事…
暂无图片
编程学习 ·

安卓使用tf模型

安卓上使用tensorflow模型 使用pb模型: 【人脸识别】Google的Facenet移植到安卓 https://www.52pojie.cn/thread-758292-1-1.html 将TensorFlow训练好的模型迁移到Android APP上 https://blog.csdn.net/u012328159/article/details/81101074 https://github.com/cayden/facesa…
暂无图片
编程学习 ·

Filebeat7.3基础运用

导言 项目主要是通过Filebeat读取日志文件,传输到Kafka上,Logstash获取Kafka的消息,过滤日志信息,传输到ElasticSearch上。实现数据的实时统计。楼主也是刚接触了ElasticSearch,有什么错误的,或者更好的操作,可以提供下,一起讨论。 1. 下载Filebeat的基础文件(根据自己…
暂无图片
编程学习 ·

千里之行 | 计算机基础要点

第一课:计算机基础要点一. 计算机基本概念1. 计算机是什么?2. 计算要机的组成二. 计算机语言1. 计算机语言的基本概念2. 计算机语言的发展三. 交互方式1. 交互方式的种类2. 文本交互模式的打开方式(Windows系统)3. DOS命令四. 文本文件和字符集1. 文本文件2. 常见字符集五. …