前提
确保已具备较新的 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
了,到这里整个项目就创建完成了,可以开始你的正式开发啦。