Annil

简介

annil(安奈儿)是微信小程序原生开发插件。

特点

• 组件构建API功能更强大

  新的组件构建API加入了computed、watch、store(基于mobx的全局响应式数据)`等功能,使开发更便捷。

• 复杂组件解决方案

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

• 专为typescript开发设计

  annil是专为TS开发而设计的,通过类型提示、约束、检测,提升开发效率,避免运行时错误的发生。使用js开发时可忽略开发文档中的ts部分。

• 组件类型概念

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

• 高兼容性

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

• 类型修补

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

• 适配第三方库类型

  第三方组件库一般都是以文档的形式对组件说明,插件提供了泛型GenerateDoc,可根据组件文档快速书写组件类型,使第三方组件融入组件构建模型,后续插件会陆续添加原生(Wm)和常用第三方组件库(Vant)类型。

• 设计思想

  请参考设计思想

安装

1. 依赖安装

• 必装

  npm i annil

• 可选

  # 使用ts开发
  npm typescript --save-dev

  # 使用全局状态管理
  npm i mobx

2. 构建npm

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

   若使用mobx,在构建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");
   }

   // 更改后
   "use strict";
   module.exports = require("./mobx.cjs.production.min.js");

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

   {
     "compilerOptions": {
       // ...
       "lib": ["ES2022"],
       "skipLibCheck": true,
       "strict": true,
       "strictFunctionTypes": false, // 解决给事件参数e重定义类型报错的问题
       "types": ["miniprogram-api-typings"]
     }
     // ...
   }

使用文档

• 组件构建API

  DefineComponent

  RootComopnent

  SubComponent

• navigateTo

  navigateTo

• 实用类型

更新日志

CHANGELOG