炫意html5
最早CSS3和HTML5移动技术网站之一

小程序 api接口封装

基于Promise封装wx.request

新建一个http.js代码如下:

const Config = {
api_base_url:'https://www.xxxxx.com/', //填写你的服务器api地址
version:1 //版本
}
class HTTP {
request({ url, data = {}, method = 'POST'}) {
return new Promise((resolve, reject) => {
this._request(url, resolve, reject, data, method)
})
}
_request(url, resolve, reject, data = {}, method = 'POST') {
const role_type = wx.getStorageSync('roleType')
const baseParam = { //基本参数
version: Config.version,
token: wx.getStorageSync('token')
}
let data1 = Object.assign(baseParam, data)
wx.request({
url: Config.api_base_url + url,
method: method,
data: data1,
header: {
'content-type': 'application/x-www-form-urlencoded'
},success: (res) => {
//320 未登录跳转登录页
if (res.data.code == 320) {
setTimeout(() => {
wx.navigateTo({
url: '/pages/login/login'
})
}, 300);
return false;
}
if (res.data.success) {
resolve(res.data.data)
}else{
reject(res)
this._show_error(res.data.msg || '返回错误!')
}
},fail: (res) => {
reject(res.data.msg)
this._show_error('服务器繁忙')
},
complete:(res)=>{
}
})
}
//封装提示语
_show_error(msg) {
wx.showToast({
title: msg,
icon: 'none',
duration: 3000
})
}
}
export {
HTTP
}

页面上使用接口

代码示例如下:
//index.js
import {
HTTP
}
from "../../utils/http.js"
const http = new HTTP();
Page({
/**
* 页面的初始数据
*/
data: {
goodsList:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getData()
},
getData() {
http.request({
url: 'goods/get_goods_info', //填写自己的服务器接口
data:{
page:1,
size:10
}  //传自己所需的参数
}).then(res => {
this.setData({
goodsList: res
})
})
}
})

上传图片接口封装

封装 wx.uploadFile 代码示例如下:
 //uploadimg.js 上传图片的封装,可上传多张
const uploadImg = (data)=>{
return new Promise((resolve, reject) => {
_uploadimg(data, resolve, reject)
})
}
_uploadimg(data, resolve, reject) {
let that = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
wx.uploadFile({
url: api_base_url + data.url,
filePath: data.path[i],
name: 'img_url',  //对应后台name
formData: {
token: wx.getStorageSync("token")
},
success: function (res) {
success++;
let data = JSON.parse(res.data)
if (data.success) {
resolve(res.data.data)
}
else {
reject(data.msg)
console.log(i);
},
fail: function (res) {
fail++;
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
console.log(i);
i++;  //这个图片执行完上传后,开始上传下一张
if (i == data.path.length) {   //当图片传完时,停止调用
console.log('成功:' + success + " 失败:" + fail);
} else {  //若图片还没有传完,则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);
}
}
})
}
export { uploadImg }

页面上调用代码示例如下:
//wxml code
<view>上传门店主图</view>
<view bindtap="chooseImage">上传图片</view>

//js code
import {
uploadImg
} from "uploadimg.js"
Page({
//点击上传的按钮事件
chooseImage(e){
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
//调整封装好的uploadImg
uploadImg({
url:'store/edit_store_img',
path: tempFilePaths
})
}
})
}
})

炫意HTML5 » 小程序 api接口封装

Java基础教程Android基础教程