### 简介

annil(安奈儿)是开源的微信小程序原生开发插件。她会给您更佳的开发体验,大大提高代码质量和开发效率。

讨论群：加微信 missannil 请注明(annil)

[github地址](https://github.com/missannil/annil)

### 特点

代码片段 https://developers.weixin.qq.com/s/TSS7Jpmv7aTY

- **组件构建API功能更强大**

  新的组件构建API加入了

[computed](https://developers.weixin.qq.com/community/develop/article/doc/000e82fc98c788bf4ef1a2c7c61813)、

[watch](https://developers.weixin.qq.com/community/develop/article/doc/000448a5608768805af1b6b2964413)、

[store](https://developers.weixin.qq.com/community/develop/article/doc/000c22856a48587050f1769be67813)(基于mobx的全局响应式数据)等功能,使开发更便捷。

- **复杂组件解决方案**

  新的组件构建方案(根组件 + 子组件(可选)),组件逻辑与wxml标签一一对应。解决书写复杂组件时不同组件代码耦合的问题。

- **组件类型概念**

  新的组件构建API(DefineComponent)返回的类型叫组件类型,好比传统组件(UI)库为每个组件书写的使用文档,在做为子组件构建新组件(页面)时,子组件API(SubComponent)需要使用者传入组件类型,这样在书写配置字段时会得到完美的类型提示和错误检测。这样实现了在一个页面中所有子组件之间的类型耦合,无论组件嵌套多少层,无论哪层组件数据类型发生改变,所有相关组件类型都会得到感知。当您增改、重构代码时,只要无类型报错(tsc --noEmit --watch)就不会有运行时报错的心智负担。

- **高兼容性**

  annil提供的API都是原生API的语法糖,不具有强制性和侵入性,可渐进的重构代码。

- **类型修补**

  官方类型(miniprogram-api-typings)更新可能不够及时,annil提供了新的类型(补全官方类型)方便开发,这些类型都采用ES模块化,不会污染全局类型。

- **完美适配第三方组件(UI)库**

  第三方组件库一般都是以文档的形式对组件说明,annil提供了泛型[CreateComponentType](./src/types/CreateComponentType.ts),可根据组件文档快速书写组件类型,使第三方组件完美融入annil组件模型,也可以自己书写临时组件类型用于项目。内置的原生组件类型库(Wm)和第三方组件库(Vant)也会持续维护。

- **vscode插件 `annil`**

  当使用ts开发时,可安装vscode插件,会自动检测组件中`.wxml` 和 `.json`错误,并可一键修复,不必在书写wxml中自定义组件的属性和json文件的导入地址了。详情见 [插件市场](https://marketplace.visualstudio.com/items?itemName=missannil.vscode-annil)

### 安装

1. 依赖安装

- 必装

  ```bash

  npm i annil

  ```

- 可选

  ```bash

  # 使用ts开发 hry-types为annil依赖的类型库。

  npm  --save-dev typescript hry-types miniprogram-api-typings

  ```

  ```bash

  # 使用状态管理

  npm i mobx

  ```

2. 构建npm

   > 若使用mobx(当前mobx为6.x.x),在构建npm前需要手动更改`node_modules/mobx/dist/index.js`文件

   > 避免构建时出现 `ReferenceError: process is not defined` 错误。

   ```js

   // 更改前

   "use strict";

   if (process.env.NODE_ENV === "production") {

     module.exports = require("./mobx.cjs.production.min.js"); // 仅保留这行即可

   } else {

     module.exports = require("./mobx.cjs.development.js");

   }

   ```

   ```js

   // 更改后

   "use strict";

   module.exports = require("./mobx.cjs.production.min.js");

   ```

   开发者工具左上部工具栏——工具——构建npm

3. tsconfig.json推荐配置(使用ts开发时)

```json

{

  "compilerOptions": {

    "target": "ES2022",

    "moduleResolution": "node",

    "skipLibCheck": true, // 跳过声明文件的类型检查(.d.ts)。

    "esModuleInterop": true, // 默认false. 兼容非ES模块引用的写法(如 import type mobx from 'mobx'等).

    "strict": true, // 启用严格模式

    "exactOptionalPropertyTypes": true, // 带有?标志的属性类型不在包含undefined类型

    "noEmit": true, // 编译时不生成文件。

    "strictFunctionTypes": false, // 忽略函数参数逆变引起的问题

    "types": [

      "hry-types",

      "mobx",

      "miniprogram-api-typings"

    ]

  },

  "include": [

    "**/*.ts"

  ]

}

```

###使用文档

[github地址](https://github.com/missannil/annil)