Taro的安装和使用,使用react开发微信小程序

CLI工具安装

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

# 先安装了错误的问题
npm install -g mirror-config-china

在这里插入图片描述

  • 安装 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

Taro的安装和使用,使用react开发微信小程序_第1张图片

  • 查询安装结果
# 查询安装结果
npm info @tarojs/cli

Taro的安装和使用,使用react开发微信小程序_第2张图片

Taro小程序搭建

项目初始化,类似于 react 的脚手架搭建一个项目

  • 初始化一个项目
# 初始化一个项目
taro init myApp

因为首次安装有权限,所以 sudo 了一下

Taro的安装和使用,使用react开发微信小程序_第3张图片在这里插入图片描述

如果上面运行的 yarn install 失败了 那就自己 cd 到项目,手动执行。

cd myApp
# 然后手动执行
npm install 
# or use yarn
yarn install

小程序开发

接下俩我们就可以进行小程序的开发了。

下载并打开微信开发者工具,然后选择项目根目录进行预览。

需要注意开发者工具的项目设置:

  • 需要设置关闭 ES6 转 ES5 功能,开启可能报错
  • 需要设置关闭上传代码时样式自动补全,开启可能报错
  • 需要设置关闭代码压缩上传,开启可能报错Taro的安装和使用,使用react开发微信小程序_第4张图片

将我们的项目打开,然后执行编译命令

npm run dev:weapp
npm run build:weapp

Taro的安装和使用,使用react开发微信小程序_第5张图片

解决版本不匹配问题

这里使用了 node 的版本管理模块 n

可能遇到了一个问题

[Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72)](https://stackoverflow.com/questions/60065790/node-sass-does-not-yet-support-your-current-environment-os-x-64-bit-with-unsupp)

这个问题是因为,node-sass 版本跟 node 版本不匹配。node-sass支持的node版本查看

解决方案

# 安装 node 版本管理模块 n
sudo npm install n -g
# 安装 稳定版的 node
sudo n stable 
# 安装 最新的 node
# sudo n latest
# 升级或者降低版本使用
# sudo n 版本号

这里就直接安装稳定版本就可以了

安装完之后,查看已经安装版本

n

Taro的安装和使用,使用react开发微信小程序_第6张图片

如果安装了好几个,使用 n 版本号 就可以切换版本

# n 版本号

删除使用

sudo n rm 版本号

这之后你就可以修改页面,进行开发了,主文件是在 src-pages-index-index.jsx 中。

上述就是全部内容了,感谢各位观看

你可能感兴趣的:(react,小程序)