Taro 入门

Taro 框架简介

Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

开发环境的安装和 HelloWorld

根据文档先新建一个项目文件夹,然后在其目录下新建一个终端输入以下内容:
在这里插入图片描述
具体操作如下图所示:
在这里插入图片描述
完成之后就可以新建一个 taro 项目:
在这里插入图片描述
项目安装成功后是这样的:
在这里插入图片描述
最后我们进入我们的项目文件目录里,执行编译:
在这里插入图片描述
编译结果如下:
在这里插入图片描述

Taro 生成小程序代码并预览

首先,我们先在 VSCode 上让项目按小程序的方式编译:
在这里插入图片描述
编译成功后会生成一个 dist 文件夹,接下来我们打开 微信开发者工具,点击【导入项目】,把路径选择为该项目的 dist 文件夹即可:
在这里插入图片描述

Taro 代码结构目录介绍

在这里插入图片描述
在这里插入图片描述
具体的文档内也有写:
在这里插入图片描述

Vue 的配置

根据下图文档的步骤,
在这里插入图片描述
我们::

安装 Taro UI

接下来我们按照文档给的步骤安装 Taro UI:
在这里插入图片描述
第一步,先在终端中输入命令行安装 Taro UI:
在这里插入图片描述
第二步,配置需要额外编译的源码模块:
在这里插入图片描述

使用 Taro UI

第一步,引入所需组件:

猜你喜欢

转载自blog.csdn.net/Jessieeeeeee/article/details/108022810