@miapp/app

app

小程序开发框架

使用

使用 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 和 @miapp/emitter

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

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

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

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

开发

1. yarn 或者 ayarn（阿里内网）安装依赖
2. 小程序 IDE 打开组件（下载地址）

更多命令

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