Taro入门引导

255 阅读3分钟

最近对Taro神化能力影响了,想看看是否可以能够在APP(Android、ios、鸿蒙)也能跑起来

1、安装nvm管理node,github.com/coreybutler…,选择nvm-setup.zip 2、修改镜像:安装路径下settings.txt

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

注意:要用nvm install node版本的时候,需要先去掉这个镜像,因为对应淘宝镜像里面获取找不到该版本资源

- nvm常用指令

nvm install 8.12.0 64 //表示电脑是x64 安装nodejs 8.12.0版本

(注:小编在安装23.3.0的nodejs后,无法使用npm命令,换更低一点18.16.0的可以了-_-)

nvm list //查看目前已经安装的版本

nvm uninstall // 卸载指定版本的nodejs

nvm use 8.12.0 或者 nvm use 8.12.0 32 //使用特定Node版本

重新启动Windows PowerShell,如果用的vscode终端最好也重新打开一下,自己在安装过程中没有重启指令是不识别的.

nvm install stable  //安装最新版 node
nvm install [node版本号]  //安装指定版本的node
nvm ls // 查看已安装版本
nvm use [node版本号]  //切换到指定版本的node
nvm alias default [node版本号] //设置默认版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm version 查看当前的版本
nvm install 安装最新版本nvm
nvm use <version> ## 切换使用指定的版本node
nvm current显示当前版本
nvm alias <name> <version> ## 给不同的版本号添加别名
nvm unalias <name> ## 删除已定义的别名
nvm reinstall-packages <version> ## 在当前版本node环境下,重新全局安装指定版本号的npm包
nvm on 打开nodejs控制
nvm off 关闭nodejs控制
nvm proxy 查看设置与代理
nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror,如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是:https://github.com/npm/npm/archive/
nvm uninstall <version> 卸载制定的版本
nvm use [version] [arch] 切换制定的node版本和位数
nvm root [path] 设置和查看root路径

注意安装完nvm之后一定要执行nvm use [node版本号]

使用 npm 安装 CLI

修改淘宝 npm 镜像 npm config set registry https://registry.npmmirror.com

    npm install -g @tarojs/cli
    npm info @tarojs/cli
    npx @tarojs/cli init myApp

运行项目

npm run dev:h5  
npm run build:h5

更多:weapp(微信小程序)、alipay(支付宝)、harmony-hybrid(鸿蒙)

鸿蒙应用单独说明

  • 在 oh-package.json5 文件中配置 dependencies, 引入 @hybrid/web-container 模块
  • 在 src/main/module.json5 文件中增加权限配置,如:
{
  requestPermissions: [
    {
      name: 'ohos.permission.INTERNET',
    },
  ]
}
  • 把 Taro 项目目录下的 dist 目录的编译产物复制到鸿蒙应用的 src/main/resources/rawfile 目录下,编译运行鸿蒙应用进行开发调试。

鸿蒙原理总结:实际上就是通过新建一个项目作为盒子,通过web-container依赖下的TaroWebContainer组件将资源文件rawfile的html读取后渲染。 OpenHarmony三方库中心仓

安卓和ios构建打包没仔细看,后续有时间补上,估计也是通过和鸿蒙一样的方式,原生项目提供个盒子来渲染资源。