【七日打卡】taro小程序项目入门使用

1,281 阅读2分钟

环境准备

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-docs.jd.com/taro/docs/b…

目录结构介绍

更多内容参考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 属性中记录

如何演示

  1. 在项目client目录下执行如下命令,启动编译微信小程序
npm run build:weapp -- --watch

# --watch表示实时编译
  1. 打开微信开发者工具,导入项目文件夹,最终如图所示

点关注,不迷路

文章每周持续更新,可以微信搜索「 十分钟学编程 」第一时间阅读和催更,如果这个文章写得还不错,觉得有点东西的话
~求点赞👍 求关注❤️ 求分享❤️
各位的支持和认可,就是我创作的最大动力,我们下篇文章见!