Annil NPM | npm.io

简介

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

特点

代码片段

组件构建API功能更强大
新的组件构建API加入了computed、watch、store(基于mobx的全局响应式数据)`等功能,使开发更便捷。
复杂组件解决方案
新的组件构建方案(根组件 + 子组件(可选)),组件逻辑与wxml标签一一对应。解决书写复杂组件时不同组件代码耦合的问题。
组件类型概念
新的组件构建API(DefineComponent)返回的类型叫组件类型,好比传统组件(UI)库为每个组件书写的使用文档,在做为子组件构建新组件(页面)时,子组件API(SubComponent)需要使用者传入组件类型,这样在书写配置字段时会得到完美的类型提示和错误检测。这样实现了在一个页面中所有子组件之间的类型耦合,无论组件嵌套多少层,无论哪层组件数据类型发生改变,所有相关组件类型都会得到感知。当您增改、重构代码时,只要无类型报错(tsc --noEmit --watch)就不会有运行时报错的心智负担。
高兼容性
annil提供的API都是原生API的语法糖,不具有强制性和侵入性,可渐进的重构代码。
类型修补
官方类型(miniprogram-api-typings)更新可能不够及时,annil提供了新的类型(补全官方类型)方便开发,这些类型都采用ES模块化,不会污染全局类型。
完美适配第三方组件(UI)库
第三方组件库一般都是以文档的形式对组件说明,annil提供了泛型CreateComponentType,可根据组件文档快速书写组件类型,使第三方组件完美融入annil组件模型,也可以自己书写临时组件类型用于项目。内置的原生组件类型库(Wm)和第三方组件库(Vant)也会持续维护。
vscode插件 annil
当使用ts开发时,可安装vscode插件,会自动检测组件中.wxml 和 .json错误,并可一键修复,不必在书写wxml中自定义组件的属性和json文件的导入地址了。详情见插件市场

安装

依赖安装

必装
```
npm i annil
```

可选

# 使用ts开发 hry-types为annil依赖的类型库。
npm  --save-dev typescript hry-types miniprogram-api-typings

# 使用状态管理 
npm i mobx

构建npm
若使用mobx(当前mobx为6.x.x),在构建npm前需要手动更改node_modules/mobx/dist/index.js文件避免构建时出现 ReferenceError: process is not defined 错误。
```
// 更改前
"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
tsconfig.json推荐配置(使用ts开发时)

{
  "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"
  ]
}