第三方模板集成文档

第三方模板接入 We 码模板，可通过以下几个步骤：标识 We 码模板、新增配置文件和构建脚本。

集成步骤

1、标识 We 码模板

在项目根目录的 package.json 文件中 config.wecode 增加配置，如下：

{
  // ...
  "config": {
    "wecode": {
      "templateName": "base",
      "buildScriptPath": "scripts/build.js",
      "compression": {
        "type": "zip",
        "dest": "build/zip"
      }
    }
  }
  // ...
}

字段说明

templateName：模板名称，可根据类型传入，不作限制。如基础模板 base；

buildScriptPath: 可动态配置构建脚本 build.js ，默认值 scripts/build.js；

compression：type 打包压缩方式，取值为 zip 或 7z ， 默认值 zip; dest 打包输出的目标地址，默认值： build/zip。

2、新增配置文件

用途：所属 We 码应用相关信息，供真机调试和上传包使用。

新增 plugin.json，格式如下：

{
  "indexURL": "h5://{appId}/html/index.html",
  "appId": "{appId}",
  "minSdkVersionName": "1.0.25",
  "versionName": "1.0.3"
}

字段说明

appId：We码的唯一识别ID。

新增 build 文件

用途：提供构建完目录，供真机调试和上传包使用。

在 scripts 目录，新增 build.js：

|—— scripts
    └── build.js

build.js 路径可动态配置，在 package.json 中进行配置，如下：

  // ...
  "config": {
    // ...
    "buildScriptPath": "scripts/build.js"
  }
  // ...

build.js

方法定义：

/**
 * 构建文件，供 IDE 调试和上传包使用。
 * @param {*} param0 json
 * debug 调试阶段为 true，上传包操作为 false，可用于是否压缩混淆代码，取值为 true 或 false。
 */
function build({ debug = false }) {
  return new Promise((resolve, reject) => {
    // 如果捕获到编译报错信息，需 reject 返回错误信息，字符串类型
    // reject('error info');

    // 编译成功时，resolve 编译完的路径
    resolve({
      buildPath: `build/apps/production/1` // 示例目录，仅供参考
    });

  }).catch(error => {
    return { error };
  });
}
module.exports = build;

返回说明：

buildPath：字符串类型，打完包返回一个构建完的路径目录， cli 将按此目录进行打包上传。

error：字符串类型，报错信息。编译报错时，或者执行 js 报错时，需 reject 错误信息。

提示：打包过程，需关闭 SourceMap，避免上传包体积过大。由于打完包之后只提供静态文件，无服务端支持，单页面路由建议设置为 hash。

附录：使用 cli api

cli 提供一些 api 供模板使用，模板可根据需要进行调用。

clean

用途：删除指定目录的文件，可用于构建前，删除之前构建的文件。

使用方法：

import { clean } from '@wecode/wlk-cli';

clean({
  path: 'build/apps/production/1' // 示例地址，仅供参考
  }).then(()=>{
  console.log('复制文件成功');
});

参数说明：

path，指定删除的目录。

copy common

用途：在本地开发阶段，可将 common 包放置于指定目录下，如 build/common，common 包含 We 码的 mock 版 api 和 样式。

common 包：*默认项目根目录 node_modules/@wecode/wlk-jsapi/lib/common 中的文件。

使用方法：

import { copyCommon } from '@wecode/wlk-cli';

copyCommon({ path: 'build/common' }).then(()=>{
  console.log('复制文件成功');
});

在 html/index.html 中进行引用：

<link rel="stylesheet" href="../../../../common/css/hwh5.css">
<script src="../../../../common/js/hwh5.js"></script>

参数说明：

path，目标路径，复制 common 包到指定的路径。

copy public

用途：将项目根目录 public 文件夹里面的文件复制至指定文件夹中。

可用于引入不经过webpack打包的第三方框架，如 zepto，vue 等。在 html 中以 global script 的形式进行引用。

使用方法：

import { copyPublic } from '@wecode/wlk-cli';

copyPublic({
  path: 'build/apps/211539651967516/1.0.3' // 示例地址，仅供参考
  }).then(()=>{
  console.log('复制文件成功');
});

参数说明：

path，目标路径。

简单示例：

copy common 和 copy public 后，可在 html 直接引用相关脚本和样式。

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="description" content="" />
    <!-- copy common JSAPI相关样式  -->
    <link rel="stylesheet" href="../../../../../common/css/hwh5.css">
</head>

<body>
    <div class="page">
        <div class="page__bd">
            <h1 id="hello-world" class="hello-world">Hello World!</h1>
        </div>
        <a class="page-link" href="../desc/index.html" >使用说明</a>
    </div>
    <!-- copy public 控制台脚本，调试阶段可打开  -->
    <%= htmlWebpackPlugin.options.vconsole === true ? '<script type="text/javascript" src="../vconsole.js"></script>' : '' %>
    <script src="../zepto.min.js"></script>
    <!-- copy common JSAPI相关脚本 -->
    <script src="../../../../common/js/hwh5.js"></script>
</body>
</html>

其中， hwh5.css 和 hwh5.js 执行 copy commm 后的引用； vconsole.js 和 zepto.mim.js 是执行 copy public 之后的引用，也可以引入其他第三方包，如 vue 。

result. ""

    Not Found. ""