A few days ago, the demand was not very tight. Our boss asked me to study Taro to prepare for the multi-platform release of small programs. I ran into some problems, so here’s a note.

Official document address: taro-docs.jd.com/taro/docs/R…

Basic introduction:

1. Global installation:

$NPM install -g@tarojs/CLI $YARN global add @tarojs/ CLICopy the code

2. View installation information.

# View details NPM info @tarojs/cli # View version taro --vCopy the code

3. Initialize the project

$ taro init myApp
Copy the code

4. Compile and run:

The taro project will automatically install all dependencies required by the project after initialization. If the installation fails, you can manually install NPM Install

Different compilation commands generate different platform packages. For details, see package.json scripts:

    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch",
Copy the code

5. Applet preview:

The preview of the applet is in the applet developer tools. The project directory can be the root directory of the project, or you can specify it directly as the packaged dist directory. You can test it.

Problem solving:
1. Yarn Run Dev: Retry p True engine debugging indicates that project packages are overlarge

Do not use “dev” or “add”. If “build” is used, subcontracting loads can be performed

2. Taro wechat applet running error [app.json file content error] app.json: app.json not found

“MiniprogramRoot “: “./dist/ app.json “: “miniprogramRoot”: “./dist/ app.json”

3. The sourceMap code reported an error locating the configuration
# config/ index.js module.exports = { env: { NODE_ENV: '"development"' }, defineConstants: {}, mini: { enableSourceMap: SourceMapType: "module-source-map", // Default: cheap-module-source-map}, h5: {}}Copy the code