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不是加上baseURLurl = 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,})}// 返回一个promisereturn new Promise((resolve,reject)=>{wx.request({// 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrLurl: url,method:option.method||"GET",//请求的方法 默认getdata:option.data, //post出入的参数header,success(res){// 请求成功resolve(res.data);},fail(err){// 04 对错误进行处理wx.showToast({title:"加载失败",icon:"none"})// 请求失败reject(err);},complete(){// 关闭加载提示wx.hideToast();}})})
}
// 定义get简易方法
request.get= (url,config)=>{return request({url,method:"get",...config})
}
// 定义post简易方法
request.post= (url,data,config)=>{return request({url,method:"post",data,...config})
}
// 导入request
module.exports={request}

应用request.js

// 导入request
const {request}  = require("../utils/request")
// 定义api
// 获取频道与分类
function GetCategory(){return request.get("/mi/cats.php")
}// 获取分类列表
function GetNewsList(data){return request.get("/mi/list.php",{params:data})
}// 获取新闻内容
function GetNewsContent(data){return request.get("/mi/content.php",{params:data,loading:{title:"内容准备中...",icon:"loading"}})
}
module.exports = {GetCategory,GetNewsList,GetNewsContent
}

1.2 缓存api

程序中的本地缓存原理基本同pc端中localstorage，将数据存储在本地缓存中指定的key中，除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用，当个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB

缓存api功能分类：存储（set）获取（get）根据key删除一个（remove）清除所有（clear）获取缓存详情（info）

//缓存数据列表，减少每次网络请求开销onLoad: function (options) {//判断缓存中是否有分类数据let list = wx.getStorageSync('list')if(list === '') {//没有数据重新请求获取数据this.getList()}else {// 有数据直接使用console.log('走缓存了');this.setData({list})}},

1.3 界面api

常用界面API：交互类、导航类等

// 显示导航栏加载动画
wx.showNavigationBarLoadingg()
//动态设置标题内容
wx.setNavigationBarTitle({title: classfiy
})
//动态设置标题颜色（背景色，前景色）
wx.setNavigatiinBarColor({fontColor: "#ffffff",backgroundColor: "#ff0000",animation: {duration: 1500,timingFunc:'easeIn'}
})

挂载加载提示方法

//定义数据加载更新提示的方法
const load = (title)=>{//提示数据加载中wx.showLoading({title})//显示导航栏加载动画wx.showNavigationBarLoading()
}
//定义关闭加载更新提示的方法
const hideLoad=()=>{wx.hideNavigationBarLoading()wx.hideLoading()
}
//导出
module.exports={load,hideLoad
}

wx.showToast(Object object)
显示消息提示框

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

2 开放能力-获取用户信息

2.1 通过API获取用户信息

注意获取用户信息的api方法已经更新，之前方案是通过button组件引导用户首先授权再次使用

wx.getUserinfo()获取用户的信息（头像、昵称等），目前更换为wx.getUserProfile() api方法，每次请求都会弹出授权窗口，用户同意后返回userInfo，该接口用于替换wx.getUserInfo

注意：该接口每次触发不会弹窗：不管上次用户是拒绝还是统一，为了后期开发方便可以再用户同意后讲获取到的用户信息存入本地缓存供后期业务使用

user.wxml

<view><block wx:if="{{buffer}}"><image src="{{userInfo.avataUrl}}"></image><text>{{userInfo.nickName}}</text></block><button wx:else bindtap="getUerInfo">获取您的信息</button>
</view>

user.js

  data: {buffer: false,userInfo: {} //  用户的信息},getUserInfo() {wx.getUserProfile({desc: '完善会员信息',success: res => {//赋值展示用户的信息this.setData({userInfo: res.userInfo,buffer: true})//讲获取到的用户信息存储到本地缓存中wx.setStorageSync('userInfo', res.userInfo)},fail: err => { console.log(22, err); }})},onLoad: function (options) {//获取缓存中的用户信息let userInfo = wx.getStorageSync('userInfo') || ''if (userInfo == '') {wx.showToast({title: '请先授权',icon: 'error',image: '../../images/icon/ssFull.png',mask: true})} else {//直接示意数据展示即可this.setData({ usesInfo, buffer: true })}},

3 图片与文件

3.1 下载图片

wx.downloadFile(Object object)

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。

downPic(){wx.downloadFile({url: this.data.pic,success(res){console.log(res);wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(){wx.showToast({title: '下载图片成功',icon:"none"})}})}
})
},

3.2 上传图片

wx.chooseMedia
拍摄或从手机相册中选择图片或视频
wx.uploadFile(Object object)
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求

upImg() {var that = this;wx.chooseMedia({count: 1,success(res) {console.log(res);var tempFile = res.tempFiles[0].tempFilePath;wx.uploadFile({filePath: tempFile,name: 'file',url: 'http://dida100.com/ajax/file.php',success: res => {console.log(res);var data = JSON.parse(res.data);that.setData({pic: "http://dida100.com" + data.pic})}})}})},

微信小程序api概述相关推荐

微信小程序 API 简介
一小程序 API 概述小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息.本地存储.支付功能等. 二小程序 API 的 ...
小程序长按api_微信小程序API相关知识科普
微信小程序API(Application Programming Interface),即应用程序编程接口.API是一种接口函数,把函数封装起来,给开发者,这样好多的功能就不需要你去实现了,只要会调用 ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...
微信小程序api接口调用用封装
微信小程序api接口调用用封装 1. 在 02-项目下新建request目录及index.js文件 1.1 02-项目\request\index.js 1.2.index.js // 同时发送异步 ...
微信小程序API之showActionSheet（操作菜单）
微信小程序API之showActionSheet(操作菜单) wxml: <button bindtap="cd01">操作菜单01</button> &l ...
微信小程序API之showModal（Loding...）
微信小程序API之showModal(Loding-) wxml: <button bindtap="ts01">显示 Loading 加载框</button&g ...
微信小程序API之video
微信小程序API之video wxml: <button bindtap="tz">跳转tab页面</button><navigator url=&q ...
微信小程序API之setInterval
微信小程序API之setInterval wxml: <button bindtap="mystart">开始计数</button><button b ...
微信小程序API之request
微信小程序API之request wxml: <button bindtap="zfc">获取远程字符串数据</button> 返回数据: {{jieguo ...

微信小程序api概述