简易模板适配H5项目迁移指南


简易模板可将 src 目录里面的文件,直接复制并上传。支持使用IDE一键调试、预览和上传。

适用于纯html+css+js进行开发,且未使用 webpack、gulp 等构建工具旧项目的迁移

迁移步骤

1、新建简易模板:IDE首页->模板选取->基础类模板->选择并新建“简易模板”

2、复制目录:可将H5项目的目录复制到简易模板src 目录中

3、配置 plugin.json

在项目根目录下的 plugin.json 文件中的 indexURL 需要配置成对应 src 目录下的 html 文件

plugin.json

  {
    "indexURL": "h5://appid/index.html",
    "appId": "",
    "minSdkVersionName": "",
    "versionName": "1.0.0"
  }

备注:访问 h5://appid/ 目录可理解为访问 src 目录,如访问h5://appid/index.html即访问 src/index.html

4、使用JSAPI:需在 html 中引用 JSAPI 脚本和样式组件文件

src/index.html

  <!-- 引入统一的css文件,需注意引用层级 -->
  <link href="../../../common/css/hwh5.css" rel="stylesheet" />
  <!-- 引用We码小程序JSAPI,需注意引用层级 -->
  <script type="text/javascript" src="../../../common/js/hwh5.js"></script>
  <!-- 测试JSAPI是否可用 -->
  <script>
    HWH5.getWecodeInfo().then(function (data) {
      console.log(data);
    }).catch(function (error) {
      console.log(error);
    });
  </script>

在We码小程序里,由于安全问题,使用 XHR 请求会被禁用,需统一整改成使用 HWH5.fetchInternet JSAPI。

开发阶段建议引入 vConsole 脚本,方便调试和输出日志信息,请参考 vConsole

注意事项

由于简易模板只是做了简单复制,并不会将 ES6 语法进行转换。所以,项目中请使用 ES5 语法,避免浏览器兼容问题。

结果。 ""

    无结果。 ""