微信小程序api概述

最新推荐文章于 2024-07-30 14:39:03 发布

kaixinde_9

最新推荐文章于 2024-07-30 14:39:03 发布

阅读量567

点赞数

文章标签：微信小程序前端 javascript

本文链接：https://blog.csdn.net/kaixinde_9/article/details/127857913

版权

本文介绍了微信小程序的网络API，包括wx.request的使用及Promise封装，本地缓存的存储和管理，以及界面API的交互和导航功能。还详细讲解了如何获取用户信息的新方法wx.getUserProfile，并提供了用户授权后的信息存储策略。最后，讨论了图片和文件的下载与上传，如wx.downloadFile和wx.uploadFile的操作步骤。

摘要由CSDN通过智能技术生成

1.api

1.1 网络api

wx.request()
注：项目上线之前要将项目中用到的业务域名在微信公众后台注册备案（生效事件5分钟左右）
在本地开发测试期间为了开发方便可以不配置域名信息，只需要将微信开发者工具中的不校验选项设置即可
微信小程序中不存在跨域问题跨域一般发生位置：浏览器防止CSRF跨站点请求伪造

封装promise版本网络请求方法

wx.request({
   
  url: 'www.baidu.com', //仅为示例，并非真实的接口地址
  data: {
   
    x: '',
    y: ''
  },
  header: {
   
    'content-type': 'application/json' // 默认值
  },
  success (res) {
   
    console.log(res.data)
  }
});

项目中，wx.request的很多参数都是固定的，只需要改变data的值，而一般我们的逻辑处理都是在wx.request的回调success，fail和complete中操作的，并且有部分逻辑也是相同的，（比如判断接口返回数据是否成功，根据成功或失败显示不同的提示框等等），所以在这边用了Promise来做了一个链式调用封装，少去了大部分重复语句。

//定义基础的URL
//const app = getApp();
//const URI = app.globalData;
// 基础的url
const URI = {
   
  baseURL:"http://dida100.com"
}
// {name:"mumu",age:18} => name=mumu&age=18
function tansParams(obj){
   
  var  str = "";
  for(var k in obj){
   
    str+=k+"="+obj[k]+"&";
  }
  //移除最后一个&
  return str.slice(0,-1);
}
function request(option){
   
  var url = option.url;
  // 01 可以添加baseURL
  // 是不是以http开头的，是用url不是加上baseURL
  url = url.startsWith("http")?url:URI.baseURL+url;
  // 选项里面有params（get传入的参数）
  if(option.params){
   
    // 如果有参数，把参数转换为url编码形式加入
    url+="?"+tansParams(option.params);
  }

  // 02 可以添加请求头
  var  header = option.header||{
   };
  header.Authorization ="Bearer "+wx.getStorageSync('token');

  // 03 可以添加加载提示
  if(option.loading){
   
    wx.showToast({
   
      title: option.loading.title,
      icon:option.loading.icon,
    }