Nonflavored Prescription Medicine

    @miapp/app

    2.0.2 • Public • Published

    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: 正式发布

    Keywords

    none

    Install

    npm i @miapp/app

    DownloadsWeekly Downloads

    6

    Version

    2.0.2

    License

    none

    Unpacked Size

    11 kB

    Total Files

    9

    Last publish

    Collaborators

    • lamo
    • kingback
    • kehanshi
    • f-loat
    • azure_jyx
    • jackieyoho
    • shaoyouqing