Taro简介

Taro 是基于凹凸实验室出品的一个开放式跨端跨框架解决方案，目前3.0版本已经支持vue，对于vue开发者省去了学习成本，今天就基于vue搭建一个demo。

官网：taro.aotu.io/

项目地址： github.com/NervJS/taro

环境搭建

安装

npm i -g @tarojs/cli

创建模板项目

taro init myTaro

选择vue即可，感兴趣的可以选择vue3，并且支持TypeScript语法。

项目结构

├── dist                          编译结果目录
├── config                        配置目录
|   ├── dev.js                    开发时配置
|   ├── index.js                  默认配置
|   └── prod.js                   打包时配置
├── src                           源码目录
|   ├── pages                     页面文件目录
|   |   ├── index                 index页面目录
|   |   |   ├── index.config.js   index页面配置
|   |   |   └── index.less        index页面样式
|   |   |   └── index.vue         index页面布局
|   ├── app.config.js             项目全局配置
|   ├── app.less                  项目总通用样式
|   └── app.js                    项目入口文件
└── package.json
复制代码

启动命令

微信小程序 ：

npm run dev:weapp

h5页面 ：

npm run dev:h5

项目启动后打开微信开发工具,选择项目文件即可预览

微信小程序开发： mp.weixin.qq.com/

Taro强大之处在于，可以在熟悉的vscode里面写vue代码，只需要编译成weapp即可，taro可以一直监听文件修改，做到了同步编译，对于开发来说是非常便捷。

Taro Ui Vue

安装 Taro UI Vue

npm install taro-ui-vue

Taro-ui-vue 是为了适配 taro3.0支持vue而在Taro-ui的基础上重构的ui库,如果用React搭建项目请选择 Taro-ui

PS：使用Taro-ui-vue必须选择TS语法,否则会报错

引入所需组件

引用官网说法：

由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules ，在 taro 项目的 config/index.js 中新增如下配置项：

h5: {
  esnextModules: ['taro-ui-vue']
}
复制代码

全局引入scss

官网可能由于脱胎于Taro Ui，导致说明文档未作修改

// page.js
import { AtButton } from 'taro-ui-vue'
// 除了引入所需的组件，还需要手动引入组件样式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
复制代码

vue开发修改为 import 'taro-ui-vue/dist/style/index.scss' 即可，后续引入同理

组件内按需引入，样例如下

样式

代码

<template>
  <vivew>
    <div @click="Click" class="MyTaro">Click Me</div>
    <AtActionSheet
      cancelText='取消'
      :isOpened="isOpened1"
      :on-cancel="handleCancel"
      :on-close="handleClose"
      title='清除位置信息后， 别人将不能查看到你'
    >
      <AtActionSheetItem :on-click="clickBtn1">
        按钮一
      </AtActionSheetItem>
      <AtActionSheetItem :on-click="clickBtn2">
        按钮二
      </AtActionSheetItem>
      <AtActionSheetItem :on-click="clickBtn3">
        <text class='danger' @click="delectlocal">清除位置信息并退出</text>
      </AtActionSheetItem>
    </AtActionSheet>
  </vivew>
</template>
<script>
import { AtActionSheet, AtActionSheetItem } from 'taro-ui-vue'
import './index.less'
import Taro from '@tarojs/taro'
export default {
  name: 'AtActionSheetDemo',
  components: {
    AtActionSheet,
    AtActionSheetItem,
  },
  data() {
    return {
      isOpened1: false
    }
  },
  methods: {
    Click() {
      this.isOpened1 = true;
    },
    handleClose() {
      this.isOpened1 = false
    },
    showToast (name) {
      Taro.showToast({
        icon: 'none',
        title: name
      })
    },
    // 底部取消按钮回调(Taro Ui 内部封装)
    handleCancel() {
      this.showToast('handleCancel');
      this.isOpened1 = false;
    },
    // 关闭dialog前回调
    handleClose() {
      this.showToast('handleClose');
      this.isOpened1 = false;
    },
    clickBtn1() {
      this.showToast('点击了按钮一')
    },
    clickBtn2() {
      this.showToast('点击了按钮二')
    },
    delectlocal() {
      this.showToast('清除了位置')
      this.isOpened1 = false;
    },
  }
}
</script>
复制代码

总结

Taro作为多端统一开发解决方案，目前来说是非常值得去运用于开发的，官方维护速度快，社区活跃，无论是React还是Vue开发都可以快速上手。