小程序技术人员经常用的API有那些？-观智网络

网络请求

微信提供了专属的API接口,用于网络请求: wx.request(Object object)

Page({ // 一般在onLoad中发送一些网络数据 onLoad() { // 发送网络请求 可以使用微信内置api -> wx.request // 参数为一个配置对象，配置对象中的url是必传的 // url必须是在微信后台白名单中的地址，或者在测试的时候关闭地址校验 wx.request({ url: 'http://api.example.com/api/home/houselist', // data用于设置参数  // 无论是post请求的参数还是get请求的参数都设置在data配置项中 data: { page: 1 }, // 成功时候的回调 // 写成箭头函数是因为方面内部在调用this.setData的时候可以使用正确的this success: res => { console.log(res.data.data)
      }, fail: err => console.log(err)
    })
  }
}) 复制代码

简单封装

import { BASE_URL } from './env' class API {
  #BASE_URL = '' constructor(BASE_URL) { this.#BASE_URL = BASE_URL } // 传入options是为了方便进行更多的配置，例如 header request(url, data = {},  options = { method: 'get' }) { return new Promise((resolve, reject) => {
      wx.request({ url: `${this.#BASE_URL}${url}`,
        data,
        ...options, success: res => { resolve(res.data.data)
        }, fail: reject
      })
    })
  } get(url, query, options = {}) { return this.request(url, query, {
      ...options, method: 'get' })
  } post(url, data, options = {}) { return this.request(url, data, {
      ...options, method: 'post' })
  }
} export default new API(BASE_URL) 复制代码

使用

// 小程序在引入外部模块的时候，不支持以/开头的绝对路径 // 也不支持自动查找index文件，只支持省略后缀名 import api from '../../utils/api' Page({ data: { homeList: [], page: 1 }, onLoad() { this.fetchList()
  }, onReachBottom() { this.data.page += 1 this.fetchList()
  }, async fetchList() { try { const res = await api.get('/home/houselist', { page: this.data.page ?? 1 }) this.setData({ homeList: [...this.data.homeList, ...res]
      })
    } catch(e) { console.error(e.message)
    }
  }
}) 复制代码

域名配置

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信

服务器域名请在「小程序后台 - 开发 - 开发设置 - 服务器域名」中进行配置，配置时需要注意

域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议
域名不能使用 IP 地址(小程序的局域网 IP 除外)或 localhost，且域名必须经过 ICP 备案
可以配置端口，但请求的时候必须携带端口号，如果没有配置端口，则在请求的时候，不可以配置端口号，即使是默认的也不可以

弹窗

小程序中展示弹窗有四种方式: showToast、showModal、showLoading、showActionSheet

showToast

wx.showToast({ title: 'toast', icon: "success", duration: 3000 }) 复制代码

showLoading的功能和showToasd是类似的，其相当于设置了icon的值为loading的toast

只不过showModal的关闭是通过duration属性，而showLoading需主动调用 wx.hideLoading 才能关闭提示框

showModal

wx.showModal({ title: '我是title', content: '我是内容', success: res => { if (res.cancel) { console.log('用户退出了弹框')
    } if (res.confirm) { console.log('用户点击了确定')
    }
  }, fail: err => console.log(err)
}) 复制代码

showActionSheet

wx.showActionSheet({ itemList: ['从相册中选取', '拍照'], // 具体点击了那一项  可以通过res.tapindex来获取 success: res => console.log(res), fail: err => console.log(err)
}) 复制代码

分享是小程序扩散的一种重要方式，小程序中有两种分享方式:

点击右上角的菜单按钮，之后点击转发
点击某一个按钮，直接转发

监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的时

可以通过 onShareAppMessage方法自定义转发内容，此事件处理函数需要 return 一个 Object，用于自定义转发内容

Page({ onShareAppMessage() { return { title: '设置分享的标题，默认是小程序名', path: '/pages/profile/profile', imgUrl: 'https://i1.hdslb.com/bfs/face/7c409a397356632362171fd6a25a8ed44f064e40.jpg' }
  }
}) 复制代码

获取信息

获取设备信息

我们可以通过getSystemInfo方法获取用户当前设备信息，用于收集设备信息或者进行一些适配工作

wx.getSystemInfo({ // res.screenHeight --- 手机的屏幕高度 // res.windowHeight -- 小程序可视窗口的高度 // 小程序的可视窗口 = 屏幕高度 - 导航栏高度 - 状态栏高度 success: res => console.log(res),
}) 复制代码

获取地址位置信息

可以通过getLocation方法，获取用户的位置信息，以方便给用户提供相关的服务

对于用户的关键信息，需要获取用户授权后才能获得

App.json

{ "permission": { "scope.userLocation": { // 向用户申请授权时候的描述信息 // 授权是授权给appid的，一个小程序对应着一个appid // 也就意味着，用户只要授权一次即可，下次再进小程序就都不需要再次授权 "desc": "获取用户地址位置" } } } 复制代码

page.js

wx.getLocation({ // 只有用户授权后，小程序才可以获取用户地理位置 success: res => console.log(res),
}) 复制代码

存储

在开发中，某些常见我们需要将一部分数据存储在本地:比如token、用户信息等，小程序提供了专门的Storage用于进行本地存储

同步存取数据的方法:

wx.setStorageSync(string key, any data)
wx.getStorageSync(string key)
wx.removeStorageSync(string key)
wx.clearStorageSync()

// 小程序中的storage 的key值必须是字符串 // 但是小程序中的value值是any类型，也就是任意类型都可以被存储 // 添加  wx.setStorageSync('name', 'Klaus') // 获取 console.log(wx.getStorageSync('name')) // 移除具体某一项 wx.removeStorageSync('name') // 清空storage wx.clearStorageSync() 复制代码

异步存储数据的方法:

wx.setStorage(Object object)
wx.getStorage(Object object)
wx.removeStorage(Object object)
wx.clearStorage(Object object)

所有的异步操作获取值都需要通过success属性监听获取，错误信息也需要通过fail属性来进行监听

自小程序V2.21.3开始，在异步存储数据API中可以对存储的数据进行加密操作，同步存储数据方法不可以

// 存储 wx.setStorage({ key: 'name', // key data: 'Klaus', // value encrypt: true, // 对存储的数据进行加密 success: () => { // 获取 wx.getStorage({ key: 'name', // key // 如果存储的数据是加密的，那么获取数据的时候 也必须开启encrypt 已进行正确的加密和解密操作 // 如果存储的数据没有加密，获取数据的时候，是不可以开启encrypt的, 因为此时对明文数据进行解密操作会失败 encrypt: true, success: res => console.log(res), fail: err => console.log(err)
    })
  }
})

小程序技术人员经常用的API有那些？