微信小程序配置接口调用API

本文介绍小程序调用 API 接口的封装，并通过 koa2 写个测试接口调用。

基本目录

├── api
│   └── api.js      // 接口配置
├── pages
│   ├── index       // 测试页面
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
├── utils
│   └── util.js
...

./api/api

// 定义基本URL
const BASE_URL = 'http://0.0.0.0:3000';// 封装请求
const request = (url, method, data) => {return new Promise((resolve, reject) => {wx.request({url: BASE_URL + '/api/v2'  + url,method: method,data: data || {},header: {Accept: "application/json",'Content-Type': 'application/x-www-form-urlencoded'},success(request) {resolve(request.data)},fail(error) {reject(error)},complete(res) {console.log('loading completed');}})})
}// 扩展 promise 的 finally 方法
Promise.prototype.finally = function (callback) {let P = this.constructor;return this.then(value => {P.resolve(callback()).then(() => value);},reason => {P.resolve(callback()).then( () => { throw reason });});
}// 导出接口
module.exports = {// 测试接口test(params){return request('/test','post', params);}
}

首先定义基础接口路径 BASE_URL
封装 request 返回一个用 Promise 包裹的 wx.request 方法
后面扩展了 Promise 实例的 finally 方法。原因是手机上会报没有 finally 这个方法的错。
最后导出接口，此示例导出一个 post 方式请求的 test 方法。

测试接口 ./pages/index/index.js 只列出相关代码

// 导入接口
import { test } from '../../api/api';Page({data: {...res_data: null,  // 定义数据...},...onLoad() {test({title: "post-test"}).then(res=>{this.setData({res_data: JSON.stringify(res)});})},...
})

展示接口数据 ./pages/index/index.wxml

<view class="container">{{api_test}}
</view>

调用接口后获取到的 json 结构

{"code":200,"data":{"title":"post-test","message":"wechat applet api test post"},"msg":"success"
}

这个 json 结构是由 koa2 简单写个示例提供。

koa2 相关代码

const Router = require('koa-router');
const router = new Router();router.post('/test', async (ctx,next) => {const { title } = ctx.request.body;ctx.body = {code: 200,data:{title: title || "default",message: "wechat applet api test post"},msg: "success"};
});router.use('/api/v2', router.routes());
module.exports = router;

为了简化，直接把返回结果写在路由里。

微信小程序配置接口调用API相关推荐

wamp3.0.6配置https + Nginx转发 + 满足微信小程序的接口调用域名
环境:winserver2012 R2 wamp环境安卓无法发起请求https://www.jianshu.com/p/61695bfae5f7?utm_campaign 一. wamp3.0.6 ...
微信小程序getWXACodeUnlimit接口调用和返回二进制流转换成图片保存到本地
微信小程序获取无限制带参数二维码后台接口请求处理第一步简单无坑GET请求把你的appid和appsecret拼接起来的URL会返回一个ACCESS_TOKEN public static Strin ...
微信小程序开发——接口调用
利用前一篇 http_get 调用接口函数. wx.cloud.callFunction({name: 'http_get',data: {"options": {"m ...
微信小程序-配置请求合法域名的问题以及豆瓣api问题
微信小程序-配置请求合法域名的问题以及豆瓣api问题 https://www.jianshu.com/p/b71200e0b9b9
小程序api 分享scene_网课查题题库接口API-在线免费授权,微信小程序网课答案api接口...
网课查题题库接口API-在线免费授权,微信小程序网课答案api接口更多相关问题支持员工实现绩效目标.促进员工自身发展的能力标准的目标是().A．组织目标B．部门目标C．发展目标B．化肝煎合左金丸C． ...
关于使用nodejs搭建微信小程序支付接口
前言前段时间在开发一个微信小程序的时候需要用到支付功能,我就去看了下微信支付的官方文档,好家伙,微信官方只提供了java.php还有Go语言的sdk.PHP我会点吧,但又不是很会,做为一个菜鸡前端, ...
java微信小程序接口openid过期_Java微信小程序登录接口获取openid
根据官方文档,wx.login()的回调函数中,需要我们传递生成的用户登录凭证到code2accessToken的接口中小程序登录方法 code2accessToken的方法中要求传入如下参数 co ...
PHP:【微信小程序】初识微信小程序，微信小程序配置
PHP:[微信小程序]初识微信小程序,微信小程序配置一.介绍小程序提供了一个简单.高效的应用开发框架和丰富的组件及 API,帮助开发者在微信中开发具有原生 APP 体验的服务小程序是一种全新的连 ...
微信小程序学习总结(六) --- API
微信小程序学习总结(六) - API API 规则: 1 . 都是以wx.开头 2. 以wx.on开头的是监听某个事件的API接口,接受一个回调函数作为参数 3. api大多是异步的函数,接受Obje ...
微信小程序配置服务器域名和业务域名
微信小程序配置服务器域名和业务域名背景如何配置服务器域名如何配置业务域名背景微信小程序本身的限制,并不能直接请求接口地址和在web-view中随意跳转H5页面,其需要配置服务器域名,才能在微 ...

微信小程序配置接口调用API

微信小程序配置接口调用API相关推荐

最新文章

热门文章