前言
目前项目需要快速迭代, 需要流量入口的创业项目在项目起始会选择小程序, 在后期项目稳定时公司需要降低代码迁移成本, 将小程序项目迁移到
H5
, 目的是想先让用户使用一个和小程序版本差别不大的H5
版本, 公司再启动该项目HTML5
版本的开发, 减少用户流失.
1. 前期准备
- 文件规划
一定要按照该规则制定 pages 内的文件, 每个 page 应该有独立文件夹
// 小程序文件目录
components // 组件
|
pages
├----- index
| ├---- index.js
| ├---- index.json
| ├---- index.wxml
| └---- index.wxss
├----- home
| ├---- home.js
| ├---- home.json
| ├---- home.wxml
| └---- home.wxss
....
utils // 工具
|
images // 图片资源文件
|
app.wxss // 全局样式
|
app.js // 首次加载
|
app.json // 小程序内的配置 json 文件, 例如: 底部导航条, topbar 颜色
|
project.config.json // 小程序总配置
注意: 在每个独立文件夹内的样式应该有自己的 class 命名空间, 尽量少使用 view/page/text 这类小程序自带的标签
- 安装依赖
# 使用 npm 安装 CLI $ npm install -g @tarojs/cli # OR 使用 yarn 安装 CLI $ yarn global add @tarojs/cli # OR 安装了 cnpm,使用 cnpm 安装 CLI $ cnpm install -g @tarojs/cli
2. 定位到小程序项目根目录
# 切换路径
cd your_project
# 运行脚本
taro convert
编译成功后将在小程序项目内生成 taroConvert
文件夹, cd taroConvert
进入该文件执行 npm install
命令,
相关脚本可以查看 taroConvert
文件内的 package.json
配置
// taroConvert 文件目录结构
config // 配置文件
├----- dev.js
├----- index.js
└----- prod.js
node_modules
|
src
├----- pages // 对应小程序内的 pages 文件夹
| ├----- index
| | ├----- index.js
| | └----- index.scss
| └----- home
| ├----- home.js
| └----- home.scss
├----- utils // 对应小程序内的 utils 文件夹
├----- app.js // 对应小程序内的 app.js
├----- app.scss // 对应小程序内的 app.wxss; 注意, taro 是使用 scss 语法的
└----- index.html // 入口文件
package-lock.json
|
package.json // npm 依赖管理配置文件, 命令脚本可在该文件查找
|
project.config.json
执行 npm run dev:h5
就可以在浏览器调试并进行二次开发了
如果小程序前期文件规划合理, 将小程序转为
HTML5
耗费的时间并不多, 我司的项目只花了 3 个小时的时间就能正常运行, 重点就是前期的文件与代码规划