美文网首页
Taro基本使用

Taro基本使用

作者: 隔壁老樊啊 | 来源:发表于2019-06-23 11:28 被阅读0次

    Taro安装非常简单,Node版本不能低于8+。

    cli工具安装

    首先,你需要使用 npm 或者 yarn 全局安装@tarojs/cli

    # 使用 npm 安装 CLI
    $ npm install -g @tarojs/cli
    # OR 使用 yarn 安装 CLI
    $ yarn global add @tarojs/cli
    # OR 安装了 cnpm,使用 cnpm 安装 CLI
    $ cnpm install -g @tarojs/cli
    

    注意

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

    使用

    • 使用命令创建模板
      $ taro init myApp
      
    • npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目
      $ npx @tarojs/cli init myApp
      
    创建项目

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

    安装依赖

    # 使用 yarn 安装依赖
    $ yarn
    # OR 使用 cnpm 安装依赖
    $ cnpm install
    # OR 使用 npm 安装依赖
    $ npm install
    

    进入项目目录开始开发,目前已经支持 微信/百度/支付宝/字节跳动小程序、H5 以及 ReactNative 等端的代码转换,针对不同端的启动以及预览、打包方式并不一致

    微信小程序

    微信小程序编译预览及打包(去掉 --watch 将不会监听文件修改,并会对代码进行压缩打包)

    # 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
    

    H5

    H5 预览项目

    # yarn
    $ yarn dev:h5
    # npm script
    $ npm run dev:h5
    # 仅限全局安装
    $ taro build --type h5 --watch
    # npx 用户也可以使用
    $ npx taro build --type h5 --watch
    

    H5项目打包

    # yarn
    $ yarn build:h5
    # npm script
    $ npm run build:h5
    # 仅限全局安装
    $ taro build --type h5
    # npx 用户也可以使用
    $ npx taro build --type h5
    

    百度小程序

    百度小程序编译预览及打包(去掉 --watch 将不会监听文件修改,并会对代码进行压缩打包)

    # yarn
    $ yarn dev:swan
    $ yarn build:swan
    # npm script
    $ npm run dev:swan
    $ npm run build:swan
    # 仅限全局安装
    $ taro build --type swan --watch
    $ taro build --type swan
    # npx 用户也可以使用
    $ npx taro build --type swan --watch
    $ npx taro build --type swan
    

    支付宝小程序

    支付宝小程序编译预览及打包(去掉 --watch 将不会监听文件修改,并会对代码进行压缩打包)

    # yarn
    $ yarn dev:alipay
    $ yarn build:alipay
    # npm script
    $ npm run dev:alipay
    $ npm run build:alipay
    # 仅限全局安装
    $ taro build --type alipay --watch
    $ taro build --type alipay
    # npx 用户也可以使用
    $ npx taro build --type alipay --watch
    $ npx taro build --type alipay
    

    字节跳动小程序

    字节跳动小程序编译预览及打包(去掉 --watch 将不会监听文件修改,并会对代码进行压缩打包)

    # yarn
    $ yarn dev:tt
    $ yarn build:tt
    # npm script
    $ npm run dev:tt
    $ npm run build:tt
    # 仅限全局安装
    $ taro build --type tt --watch
    $ taro build --type tt
    # npx 用户也可以使用
    $ npx taro build --type tt --watch
    $ npx taro build --type tt
    

    React Native

    React Native 端运行需执行如下命令,React Native 端相关的运行说明请参见 React Native 教程

    # yarn
    $ yarn dev:rn
    # npm script
    $ npm run dev:rn
    # 仅限全局安装
    $ taro build --type rn --watch
    # npx 用户也可以使用
    $ npx taro build --type rn --watch
    

    开发注意事项

    开发注意事项参考官网

    更多文章访问个人博客:http://www.lfanliu.top

    相关文章

      网友评论

          本文标题:Taro基本使用

          本文链接:https://www.haomeiwen.com/subject/badiqctx.html