Taro小程序开发(一)之初始化项目

1,910 阅读1分钟

一、编辑器准备

下载安装微信开发者工具和vscode(推荐使用)

image.png image.png

二、安装 Taro CLI

前提是已经安装了node.js 安装地址:nodejs.org/en/

npm i -g @tarojs/cli

yarn global add @tarojs/cli

安装完毕后在终端输入taro -v命令检查是否安装成功

image-20211206103555477.png

三、初始化项目

taro init 你的项目名

taro init myApp

执行命令后如下:按提示依次进行配置

  • 项目介绍:你关于项目的介绍

image-20211206104640809.png

  • 选择你的开发框架(上下键选择,回车确认)

image-20211206105115881.png

  • 是否使用ts

image-20211206105322976.png

  • 选择css预处理器

image-20211206105402740.png

  • 选择模板源和模板

image-20211206110042209.png

image-20211206110108139.png

image-20211206110227520.png

image-20211206110238958.png

项目创建成功

这是初始化成功后的项目路径

image-20211206110346654.png

各文件的作用:

image-20211206111316157.png

四、启动项目

npm run dev:weapp

yarn dev:weapp

image-20211206112123873.png

启动项目后会多出一个dist文件夹,这个文件夹是小程序的打包目录。

src文件夹是开发目录,开发小程序时代码在src文件夹进行编写,启动项目和保存操作后会自动同步到dist中。

五、在微信开发者工具中打开小程序

目录选择dist文件夹

AppID使用你注册的小程序的ID或者测试号

小程序注册地址mp.weixin.qq.com/wxopen/ware…

image-20211206112801001.png

image-20211206113109963.png

打开成功——在vscode编译代码保存后会自动同步编译。