环境准备
node
Taro 项目基于 node,请确保已具备较新的 node 环境(>=8.0.0),推荐使用 node 版本管理工具 nvm 来管理 node,这样不仅可以很方便地切换 node 版本,而且全局安装时候也不用加 sudo 了。
安装@tarojs/cli
指定版本安装
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli@3.0.8
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli@3.0.8
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli@3.0.8
全局安装
# 使用 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相关的安装错误
$ npm install -g mirror-config-china
如何创建一个新项目
使用命令创建模板项目
$ taro init myApp
查看 Taro 所有命令及帮助
$ taro -h
各端开发前注意
目录结构介绍
更多内容参考taro 配置详情
.
├── client
│ ├── babel.config.js # 测试使用的 babel 配置
│ ├── config # 编译配置
│ ├── dist # 编译后对静态页面
│ ├── node_modules # 项目依赖下载对包
│ ├── package.json # 项目对依赖包配置
│ └── src # 源码目录
│ ├── app.config.js # 入口文件配置
│ ├── app.js # 项目入口文件
│ ├── app.scss # 项目总通用样式
│ ├── components # 公告逻辑目录
│ │ └── login
│ ├── index.html
│ ├── packageA # 分包A
│ │ ├── asset
│ │ └── pages
│ ├── packageB # 分包B
│ │ └── pages
│ ├── pages # 主包(小程序启动立即加载的页面)
│ │ ├── course
│ │ ├── discover
│ │ ├── index
│ │ └── me
│ └── sitemap.json #打包进dist目录是使小程序不提示该文件错误
├── cloud # 微信小程序云函数
│ └── functions # 云函数文件
└── project.config.json # 各类小程序平台项目配置文件
云函数开发
更多内容参考云函数 | 微信开放文档
最后在微信小程序开发者平台部署对应函数文件
页面开发
在对应的client/src/packageX包下添加页面文件夹名称与页面文件,一般包含 .jsx .scss两个文件
新页面需要在app.config.js 中的pages 属性或subpackages 属性中记录
如何演示
- 在项目client目录下执行如下命令,启动编译微信小程序
npm run build:weapp -- --watch
# --watch表示实时编译
- 打开微信开发者工具,导入项目文件夹,最终如图所示
点关注,不迷路
文章每周持续更新,可以微信搜索「 十分钟学编程 」第一时间阅读和催更,如果这个文章写得还不错,觉得有点东西的话
~求点赞👍 求关注❤️ 求分享❤️
各位的支持和认可,就是我创作的最大动力,我们下篇文章见!