初识小程序-模块封装

31 阅读1分钟

消息提示封装

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

封装后调用方式

1.模块化方式导入使用

import {toast} from "./utils/extendApi"
toast()
toast({title:"数据加载失败...",mask:true})

2.将封装的模块挂载到 wx全局对象上

wx.toast()
wx.toast({title:"数据加载失败...",mask:true})
// extendApi.js
const toast=({title="数据加载中...",icon="none",duration=2000,mask=true}={})=>{
  wx.showToast({
    title,
    icon,
    duration,
    mask
  })
}

wx.toast=toast // 将toast挂载到全局微信对象上
export {
  toast,
}

模态对话框封装

const modal=(options={})=>{
  return new Promise(resolve=>{
    // 默认参数
    const defaultOption={
     title:"提示",
     content:"您确定执行该操作吗?",
     confirmColor:"#f3514f",
    }
    const opts=Object.assign({},defaultOption,options)
    wx.showModal({
      ...opts,
      complete ({confirm,cancel}) {
        confirm&&resolve(true);
        cancel&&resolve(false);
      }
    })
  })
}

extendApi.js完整代码

// 在使用toast方法时,可以传入参数,也可以不传入参数
// const toast=(options={})=>{}

const toast=({title="数据加载中...",icon="none",duration=2000,mask=true}={})=>{
  wx.showToast({
    title,
    icon,
    duration,
    mask
  })
}

const modal=(options={})=>{
  return new Promise(resolve=>{
    // 默认参数
    const defaultOption={
     title:"提示",
     content:"您确定执行该操作吗?",
     confirmColor:"#f3514f",
    }
    const opts=Object.assign({},defaultOption,options)
    wx.showModal({
      ...opts,
      complete ({confirm,cancel}) {
        confirm&&resolve(true);
        cancel&&resolve(false);
      }
    })
  })
}

wx.toast=toast // 将toast挂载到全局微信对象上
wx.modal=modal
export {
  toast,
  modal,
}

本地存储封装

官方文档:数据缓存 / wx.setStorageSync (qq.com)

同步API封装

export const setStorage = (key,value) => {
  try{
    wx.setStorageSync(key, value)
  }catch(error){
    console.error(`存储指定${key}数据发生了异常`,error);
  }
}

export const getStorage= (key) =>{
  try{
    return wx.getStorageSync(key);
  }catch(error){
    console.error(`读取指定${key}数据发生了异常`,error);
  }
}

export const removeStorage = (key) => {
  try{
    wx.removeStorageSync(key);
  }catch(error){
    console.error(`移除指定${key}数据发生了异常`,error);
  }
}

export const clearStorage = () => {
  try{
    wx.clearStorageSync()
  }catch(error){
    console.error(`清空数据发生了异常`,error);
  }
}

异步API封装

export const asyncSetStorage = (key,data,encrypt=false) => {
  return new Promise((resolve)=>{
    wx.setStorage({
      key,
      data,
      encrypt,
      complete(res){
        resolve(res);
      }
    })
  })
}

export const asyncGetStorage = (key,encrypt=false) => {
  return new Promise((resolve)=>{
    wx.getStorage({
      key,
      encrypt,
      complete(res){
        resolve(res);
      }
    })
  })
}

export const asyncRemoveStorage = (key) => {
  return new Promise((resolve)=>{
    wx.removeStorage({
      key,
      complete(res){
        resolve(res);
      }
    })
  })
}

export const asyncClearStorage = (key) => {
  return new Promise((resolve)=>{
    wx.clearStorage({
      complete(res){
        resolve(res);
      }
    })
  })
}

storage.js

export const setStorage = (key,value) => {
  try{
    wx.setStorageSync(key, value)
  }catch(error){
    console.error(`存储指定${key}数据发生了异常`,error);
  }
}

export const getStorage= (key) =>{
  try{
    return wx.getStorageSync(key);
  }catch(error){
    console.error(`读取指定${key}数据发生了异常`,error);
  }
}

export const removeStorage = (key) => {
  try{
    wx.removeStorageSync(key);
  }catch(error){
    console.error(`移除指定${key}数据发生了异常`,error);
  }
}

export const clearStorage = () => {
  try{
    wx.clearStorageSync()
  }catch(error){
    console.error(`清空数据发生了异常`,error);
  }
}

export const asyncSetStorage = (key,data,encrypt=false) => {
  return new Promise((resolve)=>{
    wx.setStorage({
      key,
      data,
      encrypt,
      complete(res){
        resolve(res);
      }
    })
  })
}

export const asyncGetStorage = (key,encrypt=false) => {
  return new Promise((resolve)=>{
    wx.getStorage({
      key,
      encrypt,
      complete(res){
        resolve(res);
      }
    })
  })
}

export const asyncRemoveStorage = (key) => {
  return new Promise((resolve)=>{
    wx.removeStorage({
      key,
      complete(res){
        resolve(res);
      }
    })
  })
}

export const asyncClearStorage = (key) => {
  return new Promise((resolve)=>{
    wx.clearStorage({
      complete(res){
        resolve(res);
      }
    })
  })
}