【WeLink开放平台】技术干货分享：轻应用如何快速转化为We码小程序

区别

轻应用和We码小程序不同的有：

1、轻应用是通过 Web 的 url 地址访问的，而We码是通过 Welink App 根据 h5://${appId}/html/index.html 这种地址去加载离线化的We码小程序，可参考 plugin.json 中的 indexURL 格式。 而且引用JSAPI路径也不同。

2、轻应用的接口请求可以使用原生 js 的 xhr 或者 fetch 去请求，但在We码小程序里，由于安全问题，需统一走 HWH5.fetchInternet JSAPI。

3、相对轻应用，We码有更多的JSAPI可以调用。详细可参考We码小程序JSAPI总览。

4、轻应用部分JSAPI需要鉴权，而We码小程序不需要。

目录规范

创建We码程序，应严格按照以下规范进行创建目录和应用配置。

We码程序整个本地目录的结构如下：

├── /common/             // JSAPI公用文件目录。
   ├── /html/            // html文件
   ├── /js/              // JSAPI脚本文件
   ├── /css/             // 公共组件库样式文件
   ├── /assets/          // 资源目录
      ├── /images/  
      ├── /media/  
├── /apps/  
   ├── /应用1名称/         // 单独应用名称
      ├── /1/             // 版本号。打包时，只需打包版本号里面的文件。
         ├── /html/       // 应用html文件  
         ├── /js/         // 应用js文件  
         ├── /css/        // 样式文件
         ├── /assets/     // 资源目录
            ├── /images/  // 应用图片资源
            ├── /media/   // 应用媒体资源
         ├── plugin.json  // 应用配置文件
   ├── /应用2名称/         // 同上
      ├── /1/  
         ├── /html/  
         ├── /js/  
         ├── /css/  
         ├── /assets/  
            ├── /images/  
            ├── /media/  
         ├── plugin.json

单独应用包的目录结构

├── /html/  
├── /js/  
├── /css/  
├── /assets/  
   ├── /images/  
   ├── /media/  
├── plugin.json

目录结构说明

修改点

针对以上，轻应用转化为We码小程序需修改以下几点：

1、需修改资源引用路径

轻应用打完包之后，是以静态资源的形式存在，所有的资源应用路径需以静态资源的方式引用。

引用路径

轻应用示例地址：http://example.com/html/index.html

内容如下：

<!-- 示例样式地址 --><script src="/app.css"></script><!-- 直接引用官方提供的hwh5-cloudonline.js，也可根据自己需要新建一个本地文件来引用--><script src="https://open-doc.welink.huaweicloud.com/docs/jsapi/2.0.3/hwh5-cloudonline.js"></script><!-- 您的业务逻辑代码，示例地址 --><script src="/app.js"></script>

需修改为引用相对地址：

<!-- 引入统一的css文件 --><link href="../../../../common/css/hwh5.css" rel="stylesheet" /><script src="./app.css"></script><!-- We码小程序JSAPI，层级引用可参考目录规范 --><script type="text/javascript" src="../../../../common/js/hwh5.js"></script><script src="./app.js"><script>

开发阶段建议引入 vConsole 脚本，方便输出日志调试，请参考 vConsole。

提示：如果是单页面应用的话，只需要入口文件引用hwh5.js。如果是多页面应用，则需要每个页面都引用。

本地开发环境集成JSAPI

本地开发时，hwh5.js 可通过 npm 获取，在终端执行 npm install @wecode/wlk-jsapi，文件路径为 node_modules/@wecode/wlk-jsapi/lib/common。

如果使用 webpack devServer 开发的，可将 @wecode/wlk-jsapi/lib/common 目录，复制至项目编译路径，示例如下：

const CopyPlugin = require('copy-webpack-plugin');const buildPath = './dist'; // 根据项目配置需要const ISLOCALDEV = process.env.NODE_ENV === 'development';const targetCommonPath = 'node_modules/@wecode/wlk-jsapi/lib/common';const buildCommonPath = `${buildPath}/common`;const targetPluginPath = './plugin.json';const buildPluginPath = `${buildPath}/plugin.json`;module.exports = {
  plugins: [    new CopyPlugin([      // 本地开发复制common路径
      ISLOCALDEV && { from: targetCommonPath, to: buildCommonPath },      // 复制根目录的plugin.json至编译完之后的目录
      !ISLOCALDEV && { from: targetPluginPath, to: buildPluginPath }
    ].filter(Boolean)),
  ]
};

请求方式

需要把请求都改造成 HWH5.fetchInternet 请求。

删除鉴权代码

We码中无鉴权，可删除相关鉴权的接口。

配置 wecode.json

在项目根目录中，新增 wecode.json 文件。

wecode.json 格式如下：

{    "distPath": "./dist"}

distPath 指在当前项目路径下需要上传到we码平台的相对目录，可配置为编译完之后的路径。

当使用IDE使用的预览或者上传功能时，distPath 指定的目录将会打包上传，弹出二位码之后，即可扫码体验。

配置 plugin.json

distPath 指定的相对目录必须存在 plugin.json 文件。

包内必须包含plugin.json,描述当前We码包的信息，plugin.json不可有注释信息

  {    "indexURL":"h5://20180531174400036/html/index.html",    "appId":"20180531174400036",    "minSdkVersionName":"1.0.23",    "versionName":"v1.0.0"
  }

h5://appId/ 目录里的文件即 wecode.json 中配置 distPath 的目录文件。

appId： 为新创建 we 码的 appId，可到“我的应用”中查询。

注意： appId 与 indexURL的隐藏关系，URL格式：h5://appId/html路径/index.html