npm package: @jdwx/api
Description: 1、终端使用命令安装 npm 包
Latest version: 0.1.4

## 安装/更新

1、终端使用命令安装 npm 包

```bash
npm install --save @jdwx/api@latest
```

> 一般会和[jdwx-components](https://code.miniappapi.com/wx/jdwx-components)一同搭配使用。安装：
> ```bash
> npm install --save @jdwx/components@latest
> ```

2、在小程序开发者工具中：菜单选择工具 -> 构建 npm

## 使用

```js
import {
  onLoginReady,
  waitLogin,

  injectApp,
  injectPage,
  injectComponent,
  hijackApp,
  hijackAllPage,

  gatewayHttpClient,
  baseHttpClient,
  apiHttpClient,
  HttpClient,

  adManager,
} from '@jdwx/api'
```

### `waitLogin`/`onLoginReady` - 确保登录完成

- 同步的写法

```js
async function onLoad() {
  await waitLogin()
  // 此处代码将在已登录或登陆完成后执行。请求将自动携带Token
  await gatewayHttpClient.request('/xxx', 'GET', {})
}
```

- 异步的写法

```js
function onLoad() {
  onLoginReady(() => {
    // 此处代码将在已登录或登陆完成后执行。请求将自动携带Token
    gatewayHttpClient.request('/xxx', 'GET', {})
  })
}
```

### `injectApp` - 向App注入基础代码

- 注入之后实现自动登录、广告初始化等功能

```js
// app.js
App(injectApp()({
  // 业务代码
  onLaunch() {
    
  }
}))
```

### `injectPage` - 向Page注入基础代码

- 注入之后实现页面自动统计、自动展示插屏广告以及激励视频广告的调用支持
- 参数：
  - showInterstitialAd: 是否自动展示插屏广告

```js
// pages/xxx/xxx.js
Page(injectPage({
  showInterstitialAd: true
})({
  // 业务代码
  onLoad() {

  }
}))
```

### `injectComponent` - 向Component注入基础代码

- 适用于使用Component构造页面的场景
- 注入之后实现页面自动统计、自动展示插屏广告以及激励视频广告的调用支持
- 参数：
  - showInterstitialAd: 是否自动展示插屏广告

```js
// pages/xxx/xxx.js
Component(injectComponent({
  showInterstitialAd: true
})({
  // 业务代码
  methods: {
    onLoad() {

    }
  }
}))
```

### `hijackApp` - 劫持全局App方法，注入基础代码

- 在不方便使用injectApp时使用（如解包后代码复杂，难以修改App调用）
- 此方法会修改全局App方法，存在未知风险，使用时请进行完整测试
- 不可与injectApp同时使用

```js
// app.js
hijackApp()
```

### `hijackAllPage` - 劫持全局Page方法，注入基础代码

- 在不方便使用injectPage/injectComponent时使用（如解包后代码复杂，难以修改Page/Component调用）
- 此方法会修改全局Page方法，并影响所有的页面，存在未知风险，使用时请进行完整测试
- 参数同injectPage/injectComponent方法，不可与这些方法同时使用

```js
// app.js
hijackAllPage({
  showInterstitialAd: true
})
```

### `gatewayHttpClient` - 网关API调用封装

- 同步的写法

```js
async function onLoad() {
  try {
    // 网关请求。参数：路径、方法、数据、其他选项（如headers、responseType）
    const data = await gatewayHttpClient.request(path, method, data，options)

    // 头像上传。参数：文件路径
    const data = await gatewayHttpClient.uploadAvatar(filePath)

    // 文件上传。参数：文件路径、数据
    const data = await gatewayHttpClient.uploadFile(filePath, data)
    
    // 文件删除。参数：文件ID
    const data = await gatewayHttpClient.deleteFile(fileId)
  } catch(err) {
    // 响应HTTP状态码非200时自动showToast并抛出异常
  }
}
```

- 所有方法均支持异步的写法

```js
function onLoad() {
  gatewayHttpClient.request('/xxx')
    .then(data => {
      console.log(data)
    })
    .catch(err => {})
}
```

### `baseHttpClient`/`apiHttpClient` - 为老版本兼容保留，不推荐使用

### `HttpClient` - API底层类，用于封装自定义请求

- 示例：封装一个百度的请求客户端，并调用百度搜索

```js
const baiduHttpClient = new HttpClient({
  baseURL: 'https://www.baidu.com',
  timeout: 5000,
});

baiduHttpClient.request('/s', 'GET', { wd: '测试' }, { responseType: 'text' })
  .then(data => console.log(data))
```

### `adManager` - 广告管理器

- 确保广告数据加载完成，支持同步/异步的写法

```js
// 同步的写法
async function onLoad() {
  await adManager.waitAdData()
  // 此处代码将在广告数据加载完成后执行
  await adManager.createAndShowInterstitialAd()
}

// 异步的写法
function onLoad () {
  adManager.onDataReady(() => {
    // 此处代码将在广告数据加载完成后执行
    adManager.createAndShowInterstitialAd()
  })
}
```

- 广告数据

```js
// 格式化之后的广告数据对象，如{banner: "adunit-f7709f349de05edc", custom: "adunit-34c76b0c3e4a6ed0", ...}
const ads = adManager.ads

// 友情链接顶部广告数据
const top = adManager.top

// 友情链接数据
const link = adManager.link
```

- 创建并展示插屏广告

```js
function onLoad() {
  adManager.createAndShowInterstitialAd()
}
```

- 创建并展示激励视频广告
  - 传入当前页面的上下文this，返回用户是否已看完广告
  - 由于微信的底层限制，需要先在调用的页面上进行injectPage注入，且该方法必须放在用户的点击事件里调用
  - 使用示例可参考[jdwx-demo](https://code.miniappapi.com/wx/jdwx-demo)

```js
// 同步的写法
page({
  async handleClick() {
    const isEnded = await adManager.createAndShowRewardedVideoAd(this)
  }
})

// 异步的写法
page({
  handleClick() {
    adManager.createAndShowRewardedVideoAd(this).then((isEnded) => {
      
    })
  }
})
```