• Taro安装及使用


    安装及使用

    安装​

    Taro 项目基于 node,请确保已具备较新的 node 环境(>=12.0.0),推荐使用 node 版本管理工具 nvm 来管理 node,这样不仅可以很方便地切换 node 版本,而且全局安装时候也不用加 sudo 了。
    CLI 工具安装​
    首先,你需要使用 npm 或者 yarn 全局安装 @tarojs/cli,或者直接使用 npx:

    # 使用 npm 安装 CLI$ 
    npm install -g @tarojs/cli
    
    # OR 使用 yarn 安装 CLI$ 
    yarn global add @tarojs/cli
    
    # OR 安装了 cnpm,使用 cnpm 安装 CLI$ 
    cnpm install -g @tarojs/cli
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    请注意
    值得一提的是,如果安装过程出现sass相关的安装错误,请在安装 mirror-config-china 后重试。

    npm install -g mirror-config-china
    
    • 1

    查看 Taro 全部版本信息​
    可以使用 npm info 查看 Taro 版本信息,在这里你可以看到当前最新版本

    npm info @tarojs/cli
    
    • 1

    在这里插入图片描述

    由图第 1 行可知最新版本,如果你用的是 beta 或者 canary 你可以通过 dist-tags: 下面那行看到最新的版本。

    项目初始化​

    使用命令创建模板项目:

    taro init myApp
    
    • 1

    npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目:

    npx @tarojs/cli init myApp
    
    • 1

    在创建完项目之后,Taro 会默认开始安装项目所需要的依赖,安装使用的工具按照 yarn > cnpm > npm 顺序进行检测。一般来说,依赖安装会比较顺利,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装:
    在这里插入图片描述

    # 进入项目根目录
    cd myApp
    # 使用 yarn 安装依赖 
    yarn
    # OR 使用 npm 安装依赖 
    npm install
    # OR 使用 pnpm 安装依赖
    pnpm install
    # OR 使用 cnpm 安装依赖
    cnpm install
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    编译运行​
    使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。
    Taro 编译分为 dev 和 build 模式:

    • dev 模式(增加 --watch 参数)
    • build 模式(去掉 --watch 参数)
    • dev 模式生成的文件较大,设置环境变量
      NODE_ENV
      production

    微信小程序​

    编译命令​

    # yarn
    yarn dev:weapp 
    yarn build:weapp
    # npm script
    npm run dev:weapp
    npm run build:weapp
    # 仅限全局安装
    taro build --type weapp --watch
    taro build --type weapp
    # npx 用户也可以使用
    npx taro build --type weapp --watch
    npx taro build --type weapp
    # watch 同时开启压缩 
    set NODE_ENV=production && taro build --type weapp --watch 
    # CMD$ 
    NODE_ENV=production taro build --type weapp --watch 
    # Bash
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    小程序开发者工具


    下载并打开微信开发者工具,然后选择项目根目录进行预览。
    需要注意开发者工具的项目设置:

    • 需要设置关闭 ES6 转 ES5 功能,开启可能报错
    • 需要设置关闭上传代码时样式自动补全,开启可能报错
    • 需要设置关闭代码压缩上传,开启可能报错

    常见问题​

    保持 CLI 的版本各端依赖版本一致​
    在使用 Taro 进行多端开发中,请保持 Taro CLI 的版本与你项目的依赖版本一致,否则可能会出现编译错误或者运行时错误。
    如果发现不一致的情况可以使用 Taro 升级命令 taro update self [版本号] 和 taro update project [版本号]来分别将 CLI 和项目依赖升级到指定版本; 或者也可以手动安装相应版本 CLI,修改 package.json 依赖版本号,然后重装依赖来解决。

    # 使用Taro 升级命令更新CLI版本到最新版本$
     taro update self
     # 使用Taro 升级命令更新CLI版本到指定版本$
     taro update self [版本号]
     # 使用Taro 升级命令将项目依赖升级到与@tarojs/cli一致的版本$ 
     taro update project
     # 使用Taro 升级命令将项目依赖升级到指定版本$ 
     taro update project [版本号]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    如果你所使用的 Taro CLI 版本为 3.0.9,而项目里使用的依赖版本为 3.0.10,则有可能会出现问题,这时请将你的 Taro CLI 版本更新至项目依赖版本号相同的版本,如果还是出现问题,请向我们提出 Issue。

    Taro 多版本共存问题​

    很多开发者曾经使用 Taro 旧版本开发过项目,已经在全局安装了 Taro,但是想同时体验到 Taro 3,应该如何进行操作?

    我们提供了两种思路:

    • 如果是需要新创建 Taro 3 项目,可以使用 nvm
    • 如果是部分已有项目需要升级到 Taro 3,可以在这些项目本地安装相应版本的 Taro CLI,这样通过
    yarn  
    npm  
    yarn add @tarojs/cli
    
    • 1
    • 2
    • 3

    回到某个版本​
    需要安装某个固定版本,或者回到某个版本,例如我们要安装 1.3.9 , 则如下:

    # 使用 npm 安装 CLI$
     npm install -g @tarojs/cli@1.3.9
     # OR 使用 yarn 安装 CLI$ 
     yarn global add @tarojs/cli@1.3.9
     # OR 安装了 cnpm,使用 cnpm 安装 CLI$
      cnpm install -g @tarojs/cli@1.3.9
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    taro启动微信小程序报错Error: Cannot find module ‘@tarojs/plugin-platform-weapp‘ from...
    taro启动微信小程序报错Error: Cannot find module ‘@tarojs/plugin-platform-weapp’ from…
    报错提示如下图:
    问题原因:项目使用的cli版本与本地使用的版本不一致
    解决办法:找到项目的package.json文件,查看taro版本,安装对应版本

    卸载tarojs

    npm uninstall -g @tarojs/cli
    
    • 1

    安装指定版本,比如你当前的版本为1.3.33:

    npm install -g @tarojs/cli@1.3.33
    
    • 1

    再次运行:

    npm run dev:weapp
    
    • 1
  • 相关阅读:
    Ubuntu宝塔面板命令下载的install.sh文件为空,安装不了宝塔,如何解决
    nodejs--开发自己的项目——2.1——注册用户信息
    怎么运用大语言模型的
    OpenCV图像处理方法:腐蚀操作
    5.10如何调度考生的座位
    【算法】高精度加、减、乘、除(C++实现)
    详细分析Uniapp中的轮播图基本知识(附Demo)
    Vue2学习_lesson1
    Hololens低版本不支持多通道或者单眼左眼显示问题
    fdbus之CBaseMessage
  • 原文地址:https://blog.csdn.net/Min_nna/article/details/134457961