原生小程序代码利用'Taro'转为H5的实践

7,478 阅读2分钟

前言

目前项目需要快速迭代, 需要流量入口的创业项目在项目起始会选择小程序, 在后期项目稳定时公司需要降低代码迁移成本, 将小程序项目迁移到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 个小时的时间就能正常运行, 重点就是前期的文件与代码规划