VScode+Taro开发小程序

本文主要是介绍VScode+Taro开发小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

现如今市面上端的形态多种多样，业务要求同时在不同的端都要求有所表现的时候只编写一套代码就能够适配到多端的能力就显得极为需要，Taro 是一个开放式跨端跨框架解决方案。
首先，你需要使用npm或者yarn全局安装@tarojs/cli，或者直接使用npx；
使用npm安装cli：

$ npm install -g @tarojs/cli

OR使用yarn安装cli；

$ yarn global add @tarojs/cli

OR安装了cnpm，使用cnpm安装cli；

$cnpm install -g @tarojs/cli

使用命令创建模板项目

$ taro init myApp

npm 5.2+ 也可以在不全局安装的情况下使用npx创建模板。`

$ npx @tarojs/cli init myApp

在创建完项目之后，Taro 会默认开始安装项目所需要的依赖，安装使用的工具按照 yarn>cnpm>npm 顺序进行检测，一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装。
使用 yarn 安装依赖：

$ yarn

OR使用 cnpm 安装依赖：

$ cnpm install

OR使用 npm 安装依赖：

$ npm install

进入项目目录开始开发，目前已经支持 微信/百度/支付宝/字节跳动/QQ 小程序、H5、快应用以及 ReactNative 等端的代码转换，针对不同端的启动以及预览、打包方式并不一致。
taro支持多端开发，在dev环境启动：

//web
$ npm run dev:h5
//微信小程序
$ npm run dev:weapp
//百度小程序
$ npm run dev:swan
//支付宝小程序
$ npm run dev:alipay
//字节跳动小程序 
$ npm run dev:tt

我们这里主要是使用VScode进行微信小程序的开发，所以我们使用的是

$ npm run dev:weapp

但是如果在创建完项目之后输入该指令那么控制台会报错。

主要的原因是因为启动项目之前需要进入到该项目的目录之中才可以直接启动项目。

启动成功之后我们需要自行下载并打开微信开发者工具，除了需要下载微信开发者工具外，还需要下载VScode软件。
下载VScode只要直接在百度上搜索VScode。

进入到VScode官网后，根据自己电脑的配置以及型号进行选择下载的版本。

下载完成之后，打开VScode.

如果你是英文的可以在扩展中下载中文的插件。


接下来我们就可以导入之前利用Taro搭建的项目。
点击文件------>打开文件夹------->选择你之前所搭建项目的文件。

选择完成。

最后我们需要下载微信开发者工具。下载地址以及安装教程
在下载和安装完成微信开发者工具之后我们就可以把之前搭建好的项目导入进来了。
1.进入到微信开发者工具的界面

点击项目，选择导入项目。记住不是新建项目而是导入项目。

在导入项目的时候，一定要找到该项目的DIST文件，因为导入项目的时候只需要导入这个文件就行了。

然后我们可以在微信小程序中看到hello world。

我们在VScode中修改文字，在微信小程序中也会同时更新。

到此我们第一个VScode+Taro开发小程序就完成了。

这篇关于VScode+Taro开发小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！