card-loader

hybrid 浮层 loader

安装和使用

安装：

yarn add card-loader -D

使用 loader：

import card from 'card-loader!./card/modal';

配置

sdk 参数用于指定 sdk 环境，对于 biubiu 项目，传入 'biubiu'

import card from 'card-loader?sdk=biubiu!./card/modal';

示例：

// 引入路径为./card/modal.js的浮层
import card from 'card-loader!./card/modal';

const param = {
  display: {
    opacity: 0.5
  },
  message: {},
  success(data) {
    console.log('success', data);
  },
  error(opt, errMessage) {
    console.log('err', errMessage, opt);
  }
};

// 参数的配置path字段外遵循 http://wiki.intra.sina.com.cn/pages/viewpage.action?pageId=166466748
card.show(param);

浮层模块的开发

先看一个最简单的例子：

//./card/index.js文件（浮层入口）

/**
 * 模块暴露一个名称为card的函数，接收三个参数
 * 使用函数声明的原因是 在抹平差异同时需要传递参数给业务人员
 * 函数会在hybrid的ready生命周期后执行，并注入参数
 *
 * @export
 * @param {object} data 从主view传递过来的参数(实际为ready方法触发传递的参数)
 * @param {object} {
 *   closeModal
 * } 注入的变量和方法，目前只有closeModal方法，调用则关闭当前浮层
 * @param {string} container 渲染的容器id
 * @returns {object} {show: function}
 * 函数返回对象中包含键为show的方法，内部执行浮层渲染、显示，业务人员需要实现此方法
 */
export default function(data, inject, containerId) {

  // 处理数据
  output = processData(data)

  return {
    show() {
      renderModal(output, inject, containerId)
    }
  };
}

function renderModal(data, inject, containerId) {

  // use data
  console.log(data)

  const container = document.getElementById(containerId);

  const button = document.createElement("button");

  const destroy = () => {...}

  button.addEventListener("click", () => {

    // closeModal为注入的关闭弹层方法
    // 可选：这里可以传递一个destroy方法，该方法由业务实现，主要目的是在web环境中，进行垃圾回收（⌚事件销毁，实例化对象释放等）
    inject.closeModal(destroy)
  });

  container.appendChild(button);
}

 如注释，模块只规定通过 export default 输出  一个方法，该方法  接收三个参数，并且返回一个含有 show 方法的对象。

show 方法完成模块渲染。

注意： 当使用card-loader加载代码时，客户端的浮层代码会以一个单独的页面存在。 换句话说在编译页面同时会以 loader 为入口文件执行 webpack 构建弹层页面。 因此弹层使用的各种资源文件（包含但不限于 js、css）需要直接或间接的被浮层入口文件引入

manifest.json文件

由于需要对每个浮层进行唯一标示，需要在浮层入口代码的同级目录创建一个manifest.json文件：

{
  "name": "card-name"
}

如果没有此文件，编译时会报错。