Taro+React开发微信小程序保姆级教程

前提

确保已具备较新的 node 环境(>=16.20.0),建议使用 nvm 版本管理工具来管理 node 。

nvm

这里我的电脑已经安装了 nvm ,但是用 nvm list 查了一下,还没有 >=16.20.0 的 node 版本

运行 nvm install 版本号 安装一个制定版本号的 node.js ,这里我直接装了最低能用的版本,你们也可以装更新一点的版本

安装完后我直接 nvm use 想直接切换到刚刚安装的版本,结果报错了,不慌,只是没有权限。

解决方案:启动提升的命令提示符(即:开始>键入cmd>右键单击并以管理员身份运行),打开终端后再输入 nvm use 16.20.0,最后执行 node -v 返回对应版本就是切换成功了。

Taro

npm 全局安装 CLI

npm install -g @tarojs/cli 安装成功是这样

项目初始化

taro init 项目名

我这里提示安装项目依赖失败(成功的小伙伴可以忽略这里),不慌,cd 项目名 进入项目文件再重新安装 npm install,但是我进入项目文件安装后又遇到 sass 相关的安装错误。

根据官网的提示,如果安装过程出现sass相关的安装错误,请在安装 mirror-config-china 后重试

npm install -g mirror-config-china

接着再重新安装一次(这个过程好久好久。。。)终于安装完了,感觉过了一个世纪!

编译运行微信小程序

npm run dev:weapp

小程序开发工具

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

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

找到 src/pages/index.tsx 文件改一下代码保存

这里我们已经把 hello world 改成了 my taro project ,再去开发工具刷新一下,会发现页面已经展示我们刚刚写的 my taro project 了,到这里整个项目就创建完成了,可以开始你的正式开发啦。

相关推荐
秋邱几秒前
AR + 离线 AI 实战:YOLOv9+TensorFlow Lite 实现移动端垃圾分类识别
开发语言·前端·数据库·人工智能·python·html
蜡笔小嘟几秒前
使用gemini 3 pro实现可视化大屏
前端·ai·gemini·gemini3peo
马玉霞6 分钟前
vue3很丝滑的table表格向上滚动效果,多用于统计页面
前端·vue.js
用户952081611796 分钟前
百度地图JSAPI THREE Label 组件使用指南,轻松实现地图标签渲染
前端
SVIP1115911 分钟前
webpack入门 精细版
前端·webpack·node.js
畅畅畅哥哥11 分钟前
Next.js App Router 实战避坑:状态、缓存与测试
前端·前端框架
一水鉴天13 分钟前
整体设计 定稿 之20 拼语言表述体系之3 dashboard.html完整代码
java·前端·javascript
一颗烂土豆13 分钟前
React 大屏可视化适配方案:vfit-react 发布 🚀
前端·javascript·react.js
Qinana13 分钟前
构建一个融合前端、模拟后端与大模型服务的全栈 AI 应用
前端·后端·程序员
加洛斯16 分钟前
箭头函数的艺术:如何优雅的写好JS代码
前端·javascript