1. 程式人生 > 其它 >uniapp小程式使用pont

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>