简易模板适配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 语法,避免浏览器兼容问题。