现如今市面上端的形态多种多样,业务要求同时在不同的端都要求有所表现的时候只编写一套代码就能够适配到多端的能力就显得极为需要,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开发小程序就完成了。