open-index/open-npm huggingface dataset:
npm package: @miapp/app
Description: 小程序开发框架
Author: huya.nzb
Latest version: 2.0.2

# app

![](https://img.shields.io/npm/v/@miapp/app.svg?style=flat) ![](https://img.shields.io/npm/dt/@miapp/app.svg?style=flat)

> 小程序开发框架

## 使用

使用 `createApp/createPage/createComponent` 包裹对应类型的初始化配置，让实例具备以下方法：

* 跳转关闭：`open/close`
* 事件相关：`on/off/emit`
* 获取实例：`getApp/getPage` 兼容插件
* 获取参数：`getParams/getLaunchOptions`

使用 `createPlugin` 包裹插件配置，让插件具备以下方法：

* `getData`：获取插件数据，支持 `a.b.c.d` 链式获取
* `setData`：设置插件数据，支持 `a.b.c.d` 链式设置
* `getHost`：获取宿主环境（包括当前应用插件的 `app/page` 实例）

由于插件中不能使用 `<web-view>` 组件，因此插件中调用 `this.open(url, { webview: true })` 会触发事件冒泡至 `app`，然后在 `app` 中打开 `<web-view>` 页面（`pages/webview/index?url=url`）

跳转和事件等文档请查看 [@miapp/utils](https://www.npmjs.com/package/@miapp/utils) 和 [@miapp/emitter](https://www.npmjs.com/package/@miapp/emitter)

```js
import {
  createApp,
  createPage,
  createComponent,
  createPlugin
} from "@miapp/app";

// app.js
import appConfig from './app.json';

createApp({
  mixins: [], // 全局混入
  onLaunch() {
    this.on('foo', e => console.log('app', e)); // app bar
  }
}, appConfig); // 此处要传入 appConfig，用于初始化 plugins

// page.js
createPage({
  mixins: [], // 页面混入
  onLoad() {
    this.on('foo', e => console.log('page', e)); // page bar
    console.log(this.getLaunchOptions());
  }
});

// component.js
createComponent({
  onInit() {
    this.on('foo', e => console.log('component', e)); // component bar
  },
  didMount() {
    this.emit('foo|app', 'bar'); // 冒泡 component => page => app
    this.getParams(); // 获取页面参数
    this.getLaunchOptions(); // 获取APP参数
  }
});

// plugin.js
createPlugin({
  data: {
    foo: {
      bar: 'yes'
    }
  },

  methods: {
    sayHello() {
      console.log('hello');
    },

    log() {
      this.sayHello(); // hello
      this.getData('foo.bar'); // yes
      this.getHost().app; // 当前 getApp() 获取的实例
      this.getHost().page; // 当前应用插件的页面实例
    }
  }
});

requirePlugin('plugin').setData('foo.bar'); // no
```

## Mixins

支持对象或函数类型的混入方式

``` js
export const loading = {
  showLoading() {
    this.emit('show:loading');
  },
  hideLoading() {
    this.emit('hide:loading');
  }
}
```

``` js
export const mixinLoading = (target) => {
  target.showLoading = function () {
    this.emit('show:loading');
  };
  target.hideLoading = function () {
    this.emit('hide:loading');
  };
  return target;
};
```

## 开发

1. `yarn` 或者 `ayarn`（[阿里内网](https://web.npm.alibaba-inc.com/package/@ali/yarn)）安装依赖
2. 小程序 IDE 打开组件（[下载地址](https://opendocs.alipay.com/mini/ide/download)）

## 更多命令

* `miapp newbranch`: 新建分支
* `miapp push`: 提交代码
* `miapp prepub`: 预发（发布 beta 版本）
* `miapp publish`: 正式发布