微信小程序的封装和登录

常见的交互反馈设计

Toast和模态对话框

在完成某个操作成功之后，我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上，Toast提示默认1.5秒后自动消失

写法

Page({

  onLoad: function() {

    wx.showToast({

      title: '已发送',   弹窗的内容最多7个字

      icon: 'success',  icon图标

      duration: 1500   显示的时间 1500=1.5秒

  })

    // wx.hideToast()    隐藏Toast

  }

})

模态框

Page({

  onLoad: function() {

    wx.showModal({

      title: '标题',  标题

      content: '告知当前状态，信息和解决方法',      标题下面的内容

      confirmText: '主操作',

      cancelText: '次要操作',

      success: function(res) {

        if (res.confirm) {    点击了确认之后的操作

          console.log('用户点击主操作')

        } else if (res.cancel) {   点击了取消之后的操作

   console.log('用户点击次要操作')

        }

      }

    })

  }

})

本地储存

异步存储

写法

  wx.setStorage({

      data: {},   需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

      key: 'list',      本地缓存中指定的 key

})

同步存储

写法

wx.setStorageSync('list1', {内容})

读取本地存储

异步取出

写法

    wx.getStorage({

      key: 'list',   要取出存储的名字

 success(res){   取出来的内容

        console.log(res);

      }

    })

同步取出

写法

wx.getStorageSync('list')

微信小程序的界面跳转

wx.navigateTo：保留当前页面，只能打开非 tabBar 页面，可以跳转传参

wx.redirectTo：关闭卸载当前页面，只能打开非 tabBar 页面，可以跳转传参

wx.switchTab：关闭所有非tabbar页面， 只能打开 tabBar 页面，不可以跳转传参

wx.reLaunch：关闭卸载所有页面，可以打开任意页面，可以跳转传参

wx.navigateBack：返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返回不去，不可以返回传参

微信小程序的请求

wx.request

写法

  wx.request({

      url: 'https://showme.myhope365.com/api/cms/article/open/list',   接口地址

      method: "POST",    请求方式默认get

      data: {     参数，get一般需要？拼接

        pageNum: 1,

        pageSize: 10

      },

      header: {     不是json方式的需要写

        "content-type": "application/x-www-form-urlencoded"

      },

      success: res => {   请求回来的数据

        console.log(res.data.rows)

      }

})

参数说明

• url    开发者服务器接口地址。注意这里需要配置域名

• data      请求的参数

• header    设置请求的 header，header 中不能设置 Referer，默认header['content-type'] = 'application/json'

• method（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

• dataType    json    回包的内容格式，如果设为json，会尝试对返回的数据做一次 JSON解析

• success    收到开发者服务成功返回的回调函数。

• fail    接口调用失败的回调函数

• complete    接口调用结束的回调函数（调用成功、失败都会执行）

封装请求

function request(options) {

  // 请求拦截器

  //  ...

  // 1. 加一些统一的参数，或者配置

  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {

    options.url = "https://showme2.myhope365.com" + options.url

  }

    // 默认的请求头

  let header = {

    "cookie": wx.getStorageSync("cookie") || "",

    "content-type": "application/x-www-form-urlencoded",

  };

  if (options.header) {

    header = {

      ...header,

      ...options.header

    }

  }

  return new Promise((reslove, reject) => {

    // 调用接口

    wx.request({

      // 默认的配置

      // 加载传入的配置

      ...options,

      header,

      success(res) {

        // 响应拦截器，所有接口获取数据之前，都会先执行这里

        //  1. 统一的错误处理

        if (res.statusCode != 200) {

          wx.showToast({

            title: '服务器异常，请联系管理员',

          })

        }

        reslove(res)

      },

      fail(err) {

        reject(err)

      }

    })

  })

}

export function get(url, options = {}) {

  return request({

    url,

    ...options

  })

}

export function post(url, data, options = {}) {

  return request({

    url,

    data,

    method: "POST",

    ...options

  })

}

封装之后的写法

需要先引入

import {get} from "../../api/http"地址是封住的文件地址

使用

get(`地址?${拼接}`).then((res) => {

      this.setData({

        title: res.data.data.title,

        img1: res.data.data.imgList,

        wen: res.data.data.content

      })

    })