uniapp小程序使用pont

2022/5/25 1:20:07

本文主要是介绍uniapp小程序使用pont,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

原则上,pont只是将swagger返回的接口地址进行封装,所以得出理论上,只要是基于js的项目,如xx小程序,公众号等都可以使用。

比如我的配置如下
pont-config.json

  {
    "originType": "SwaggerV3",
    "originUrl": "http://han96.com/api/v3/api-docs",
    "templatePath": "./pontTemplate",
    "outDir": "./src/services",
    "mocks": {
      "enable": true
    },
    "surrounding": "javaScript",
    "templateType": "fetch"
  }
  

1、main.js引入两个文件

import { createSSRApp } from "vue";
import App from "./App.vue";
import './utils/middleware'; //pont的实现拦截器
import './services/index'; //生成的api

export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
  };
}

2、utils/middleware.js如下

// @ts-nocheck
import { PontCore } from '../services/pontCore';

const baseUrl = 'http://han96.com/api';
PontCore.useFetch((url, fetchOption) => {
    return uni.request({
        url: baseUrl+url,
        ...fetchOption
    })
});

3、修改生成api里的内容
里边有两个地方用到了window,要将其改为global

4、验证使用
比如某个页面组件内使用

<script setup lang="ts">
const test = async ()=>{
  const res = await global.API.article.getList.request({});
  console.log(123, res);
}
</script>


这篇关于uniapp小程序使用pont的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程