Taro初体验前几天需求不是很紧张, 我们老大让我研究一下Taro, 为小程序多平台发版做准备.遇到了一些问题, 这里做

前几天需求不是很紧张, 我们老大让我研究一下Taro, 为小程序多平台发版做准备.遇到了一些问题, 这里做个记录.

基础入门:

1.全局安装:

# 使用 npm 安装 CLI

$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI

$ yarn global add @tarojs/cli

2.查看安装信息:

# 查看详细信息
npm info @tarojs/cli

# 查看版本
taro --v

3.初始化项目

$ taro init myApp

4.编译运行:

一般来说, taro项目初始化完成之后会自动安装项目所需要的依赖, 安装失败之后可以手动进行安装npm install

不同的编译命令生成不同的平台包, 具体可以看 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",

5.小程序预览:

小程序的预览要在小程序开发者工具中, 项目目录可以是项目的根目录, 也可以直接指定为打包后的dist目录.亲测懂可以.

问题解决:

1. yarn run dev:weapp 真机调试, 提示项目包过大

解决: 不要使用dev:weapp进行编译，使用build:weapp, 会进行分包加载

2.taro微信小程序运行报错[ app.json 文件内容错误] app.json: app.json 未找到

这是由于根目录下的project.config.json文件中的“miniprogramRoot”未找到app.json所导致的, 改成路径: "miniprogramRoot": "./dist/weapp",

3. sourceMap 代码报错定位配置

# config/ index.js
module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {},
  mini: {
    enableSourceMap: true,  // 默认为 dev 为 true build 为 false
    sourceMapType: "module-source-map", // 默认为: cheap-module-source-map
  },
  h5: {}
}