小程序系统API、网络请求封装、弹窗Toast、确认框、操作菜单栏

 

 文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/ui/custom-component/wx.nextTick.html

我们在开发时，可以在微信开发者工具的详情这里将 校验合法域名关掉，就可以访问局域网中的接口了，不过不能访问本机ip，

另外上线后只能使用https协议，不能用http协议，可添加20个合法域名，不能添加ip地址

我们一般会在App的onLaunch声明周期中发送网络请求或者在Page的onLoad的尚明周期中发送网络请求

// 网路请求
    wx.request({
      url: 'http://123.207.32.32:8000/recommend',
      success:res=>{
        console.log(res);
      }
    })

告诉大家演练各种请求的地址：http://httpbin.org/post|get|...

下面演练一下post请求

wx.request({
      url: 'http://httpbin.org/post',
      method:"post",
      data:{
        name:"coderwhy",
        age:18
      },
      success:res=>{
        console.log(res);
      },
      fail:err=>{
        console.log(err);
      },
      complete:()=>{
        
      }
    })

网络请求封装

为什么要封装网络请求？

1、降低网络请求和wx.request方法的耦合度

2、使用promise的方法获取回调结果（放置出现回调地狱）

首先创建的util文件夹，专门放工具

 创建个api.js文件，名字纯属个人习惯

内容：

function apiRequest(method, url, params, success, failure, authFail){
  wx.request({
    header:{
      "content-type":"application/json; charset=UTF-8"
    },
    url: url,
    method: method,
    data: method === 'POST' || method === 'PUT' || method === 'DELETE' ? params : null,
    success: function (res) {
      success(res)
    },
    fail: function (err) {
      failure(err);
    },
    complete:function(){
      if (authFail){
        authFail();
      }
    }
  })
}

export default {
  get: function (url, params, success, failure, authFail) {
    return apiRequest('GET', url, params, success, failure, authFail);
  },
  post: function (url, params, success, failure) {
    return apiRequest('POST', url, params, success, failure);
  },
  put: function (url, params, success, failure) {
    return apiRequest('PUT', url, params, success, failure);
  },
  delete: function (url, params, success, failure) {
    return apiRequest('DELETE', url, params, success, failure);
  }
}

在页面中使用

首先需要引入这个工具：（只能用相对路径 不能用绝对路径）

import api from "../../utils/api.js"

使用：

api.get("http://123.207.32.32:8000/recommend",null,res=>{
      console.log(res)
    },err=>{
      console.log(err)
    })

其它post还有put还有delete类似，第一个参数是url，第二个参数是参数，没有就传null，第三个参数是成功回调，第四个参数是失败回调，也可以有第5个参数，是无论成功还是失败，都会执行的回调

小程序弹窗Toast

<button size="mini" bind:tap="holdleShowToast">弹窗Toast</button>

js

holdleShowToast(){
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  }

 加载：

wx.showToast({
      title: '加载中...',
      icon: 'loading',
      duration: 2000
    })

显示蒙版：

wx.showToast({
      title: '加载中...',
      icon: 'loading',
      duration: 2000,
      mask:true
    })

模态对话框showModal

wx.showModal({
      title: '提示标题',
      content: '提示内容',
      success:function(res){
        console.log(res);
        if(res.cancel){
          console.log("用户取消")
        }
        if (res.confirm){
          console.log("用户确认")
        }
      }
    })

 也可以只显示确认按钮，取消文字和确认文字都可以更改，就提参考文档

wx.showModal({
      title: '提示标题',
      content: '提示内容',
      showCancel:false,
      success:function(res){
        console.log(res);
        if(res.cancel){
          console.log("用户取消")
        }
        if (res.confirm){
          console.log("用户确认")
        }
      }
    })

 loadding：

wx.showLoading({
      title: '加载中...',
    })
    setTimeout(()=>{
      wx.hideLoading()
    },3000)

显示操作菜单wx.showActionSheet

wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success(res) {
        console.log(res)
        console.log(res.tapIndex)
      },
      fail(res) {
        console.log(res)
        console.log(res.errMsg)
      }
    })

.