preface

Current projects need rapid iteration, flow entrance of entrepreneurial projects in the project beginning can choose small programs, in the later project stability when the company needs to reduce the code migration cost, will be migrated to H5, small application project purpose is to let the user using a small program version and difference of H5 version, HTML version of the company to start the project development, Reduce churn.

1. Prepare

  • File planning

Be sure to follow this rule for pages files; each page should have its own folder

Small program files directory components / / / / component | pages ├ -- -- -- -- -- the index | ├ -- index. Js | ├ -- index. Json | ├ -- index. WXML | └ - Index. WXSS ├ -- -- -- -- -- home | ├ -- home. Js | ├ -- home. Json | ├ -- home. WXML | └ -- home. WXSS... Utils / / tools | images / / picture resource file | app. The WXSS global style | app. / / js / / loading | app for the first time. The json / / small configuration json files within the program, such as: Navigation bar, at the bottom of the topbar color | project. Config. The json / / applet general configurationCopy the code

Note: Styles in a separate folder should have their own class namespace, and minimize the use of tags from applets such as View /page/text

  • Install dependencies 
      Install CLI using NPM
  $ npm install -g @tarojs/cli
  # OR Install the CLI using YARN
  $ yarn global add @tarojs/cli
  Install the CLI using CNPM
  $ cnpm install -g @tarojs/cli
Copy the code

2. Navigate to the root directory of the applets

# Change path
cd your_project
Run the script
taro convert
Copy the code

After successful compilation, the taroConvert folder will be generated in the applet project. CD taroConvert go to this file and run the NPM install command. Related scripts can view the package.json configuration in the taroConvert file

Config / / / / taroConvert file directory structure configuration file ├ -- -- -- -- - dev. Js ├ -- -- -- -- -- index. The js └ -- -- -- -- - prod. Js node_modules | SRC ├ -- -- -- -- -- pages / / Corresponding pages within the small program folder | ├ -- -- -- -- -- the index | | ├ -- -- -- -- -- index. The js | | └ -- -- -- -- -- index. The SCSS | └ -- -- -- -- -- home | ├ -- -- -- -- - home. Js | └ -- -- -- -- -- Homes.scss ├----- utils // Corresponding to miniapp Utills folder ├----- app.js // Corresponding to miniapp ├----- app.scss // Corresponding to miniapp ├----- app.wxss; Attention, taro is the use of SCSS grammar └ -- -- -- -- -- index. The HTML / / entry document package - lock. Json | package. The json / / NPM dependency management configuration file, Command scripts can be in the file search | project. Config. JsonCopy the code

Execute NPM run dev:h5 to debug in the browser and perform secondary development

If the preliminary file planning of the small program is reasonable, it doesn’t take much time to convert the small program into HTML5. Our company’s project only takes 3 hours to run normally. The key is the preliminary file and code planning